feat: dashboard
This commit is contained in:
efrilm
@@ -1,24 +1,35 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:line_icons/line_icons.dart';
|
||||
import 'dart:math' as math;
|
||||
|
||||
import '../../../application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_bloc.dart';
|
||||
import '../../../common/theme/theme.dart';
|
||||
import '../../../injection.dart';
|
||||
import '../../components/appbar/appbar.dart';
|
||||
import '../../components/button/button.dart';
|
||||
import '../../components/spacer/spacer.dart';
|
||||
import 'widgets/payment_method.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()
|
||||
class ReportPage extends StatefulWidget {
|
||||
class ReportPage extends StatefulWidget implements AutoRouteWrapper {
|
||||
const ReportPage({super.key});
|
||||
|
||||
@override
|
||||
State<ReportPage> createState() => _ReportPageState();
|
||||
|
||||
@override
|
||||
Widget wrappedRoute(BuildContext context) => BlocProvider(
|
||||
create: (context) =>
|
||||
getIt<DashboardAnalyticLoaderBloc>()
|
||||
..add(DashboardAnalyticLoaderEvent.fetched()),
|
||||
child: this,
|
||||
);
|
||||
}
|
||||
|
||||
class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
|
||||
@@ -78,54 +89,76 @@ class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColor.background,
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
expandedHeight: 120,
|
||||
floating: false,
|
||||
pinned: true,
|
||||
backgroundColor: AppColor.primary,
|
||||
centerTitle: false,
|
||||
flexibleSpace: CustomAppBar(title: 'Laporan', isBack: false),
|
||||
actions: [
|
||||
ActionIconButton(onTap: () {}, icon: LineIcons.download),
|
||||
ActionIconButton(onTap: () {}, icon: LineIcons.filter),
|
||||
SpaceWidth(8),
|
||||
],
|
||||
),
|
||||
body:
|
||||
BlocBuilder<
|
||||
DashboardAnalyticLoaderBloc,
|
||||
DashboardAnalyticLoaderState
|
||||
>(
|
||||
builder: (context, state) {
|
||||
return CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
expandedHeight: 120,
|
||||
floating: false,
|
||||
pinned: true,
|
||||
backgroundColor: AppColor.primary,
|
||||
centerTitle: false,
|
||||
flexibleSpace: CustomAppBar(
|
||||
title: 'Laporan',
|
||||
isBack: false,
|
||||
),
|
||||
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,
|
||||
// Content
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.all(AppValue.padding),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildListDelegate([
|
||||
FadeTransition(
|
||||
opacity: _fadeAnimation,
|
||||
child: SlideTransition(
|
||||
position: _slideAnimation,
|
||||
child: Column(
|
||||
children: [
|
||||
ReportRevenueSummary(
|
||||
overview: state.dashboardAnalytic.overview,
|
||||
rotationAnimation: _rotationAnimation,
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
ReportQuickStats(
|
||||
overview: state.dashboardAnalytic.overview,
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
ReportSales(
|
||||
salesData:
|
||||
state.dashboardAnalytic.recentSales,
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
ReportPaymentMethod(
|
||||
paymentMethods:
|
||||
state.dashboardAnalytic.paymentMethods,
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
ReportTopProduct(
|
||||
products: state.dashboardAnalytic.topProducts,
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SpaceHeight(24),
|
||||
ReportQuickStats(),
|
||||
const SpaceHeight(24),
|
||||
ReportSales(),
|
||||
const SpaceHeight(24),
|
||||
ReportTopProduct(),
|
||||
const SpaceHeight(24),
|
||||
ReportAction(),
|
||||
const SpaceHeight(20),
|
||||
],
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,616 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../../common/extension/extension.dart';
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../domain/analytic/analytic.dart';
|
||||
import '../../../components/widgets/empty_widget.dart';
|
||||
|
||||
class ReportPaymentMethod extends StatelessWidget {
|
||||
final List<DashboardPaymentMethod> paymentMethods;
|
||||
|
||||
const ReportPaymentMethod({super.key, required this.paymentMethods});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.06),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 4),
|
||||
spreadRadius: -4,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: AppColor.primaryGradient,
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.primary.withOpacity(0.3),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(Icons.payment, color: AppColor.white, size: 24),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Payment Methods',
|
||||
style: AppStyle.xl.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Revenue breakdown by payment method',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Payment Method List
|
||||
if (paymentMethods.isEmpty)
|
||||
_buildEmptyState()
|
||||
else
|
||||
ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: paymentMethods.length,
|
||||
padding: EdgeInsets.zero,
|
||||
separatorBuilder: (context, index) =>
|
||||
const SizedBox(height: 12),
|
||||
itemBuilder: (context, index) {
|
||||
final method = paymentMethods[index];
|
||||
return TweenAnimationBuilder<double>(
|
||||
tween: Tween<double>(begin: 0, end: 1),
|
||||
duration: Duration(milliseconds: 600 + (index * 150)),
|
||||
curve: Curves.easeOutCubic,
|
||||
builder: (context, value, child) {
|
||||
return Transform.translate(
|
||||
offset: Offset(30 * (1 - value), 0),
|
||||
child: Opacity(
|
||||
opacity: value,
|
||||
child: _buildPaymentMethodTile(
|
||||
context,
|
||||
method,
|
||||
index,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPaymentMethodTile(
|
||||
BuildContext context,
|
||||
DashboardPaymentMethod method,
|
||||
int index,
|
||||
) {
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
final isCompact = screenWidth < 400; // For smaller screens
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.1),
|
||||
width: 1.5,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.08),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 4),
|
||||
spreadRadius: -2,
|
||||
),
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.03),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Stack(
|
||||
children: [
|
||||
// Subtle background gradient
|
||||
Positioned.fill(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
_getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.03),
|
||||
_getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.01),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Main content
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header section with improved responsive layout
|
||||
if (isCompact)
|
||||
_buildCompactHeader(method)
|
||||
else
|
||||
_buildStandardHeader(context, method),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Stats row with better spacing
|
||||
_buildStatsSection(method),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Enhanced progress bar section
|
||||
_buildProgressSection(method, index),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Accent line on the left
|
||||
Positioned(
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
width: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(16),
|
||||
bottomLeft: Radius.circular(16),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStandardHeader(
|
||||
BuildContext context,
|
||||
DashboardPaymentMethod method,
|
||||
) {
|
||||
return Row(
|
||||
children: [
|
||||
// Enhanced icon container
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
_getPaymentMethodColor(method.paymentMethodType),
|
||||
_getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.8),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.3),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
_getPaymentMethodIcon(method.paymentMethodType),
|
||||
color: AppColor.white,
|
||||
size: 28,
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 16),
|
||||
|
||||
// Payment method info - improved text handling
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
method.paymentMethodName,
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
vertical: 5,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.2),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
method.paymentMethodType.toUpperCase(),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.8,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 12),
|
||||
|
||||
// Percentage badge
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.3),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 3),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
'${method.percentage.toStringAsFixed(1)}%',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCompactHeader(DashboardPaymentMethod method) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 48,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
_getPaymentMethodColor(method.paymentMethodType),
|
||||
_getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Icon(
|
||||
_getPaymentMethodIcon(method.paymentMethodType),
|
||||
color: AppColor.white,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
method.paymentMethodName,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
method.paymentMethodType.toUpperCase(),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Text(
|
||||
'${method.percentage.toStringAsFixed(1)}%',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildStatsSection(DashboardPaymentMethod method) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.background.withOpacity(0.5),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(color: AppColor.border.withOpacity(0.2), width: 1),
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Total Revenue',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
method.totalAmount.currencyFormatRp,
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.textPrimary,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 1,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Text(
|
||||
'Orders',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'${method.orderCount}',
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProgressSection(DashboardPaymentMethod method, int index) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'Revenue Share',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
'${method.percentage.toStringAsFixed(1)}%',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: _getPaymentMethodColor(method.paymentMethodType),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TweenAnimationBuilder<double>(
|
||||
tween: Tween<double>(begin: 0, end: method.percentage / 100),
|
||||
duration: Duration(milliseconds: 1200 + (index * 200)),
|
||||
curve: Curves.easeOutCubic,
|
||||
builder: (context, value, child) {
|
||||
return Container(
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
FractionallySizedBox(
|
||||
widthFactor: value,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
_getPaymentMethodColor(method.paymentMethodType),
|
||||
_getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: _getPaymentMethodColor(
|
||||
method.paymentMethodType,
|
||||
).withOpacity(0.3),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmptyState() {
|
||||
return EmptyWidget(
|
||||
title: 'No Payment Methods',
|
||||
message:
|
||||
'Payment method data will appear here once transactions are made',
|
||||
);
|
||||
}
|
||||
|
||||
Color _getPaymentMethodColor(String type) {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'cash':
|
||||
return AppColor.success;
|
||||
case 'card':
|
||||
case 'credit_card':
|
||||
case 'debit_card':
|
||||
return AppColor.info;
|
||||
case 'bank_transfer':
|
||||
case 'transfer':
|
||||
return AppColor.primary;
|
||||
case 'ewallet':
|
||||
case 'e_wallet':
|
||||
case 'digital_wallet':
|
||||
return AppColor.warning;
|
||||
case 'qr_code':
|
||||
case 'qris':
|
||||
return const Color(0xFF9C27B0); // Purple
|
||||
default:
|
||||
return AppColor.textSecondary;
|
||||
}
|
||||
}
|
||||
|
||||
IconData _getPaymentMethodIcon(String type) {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'cash':
|
||||
return Icons.payments;
|
||||
case 'card':
|
||||
case 'credit_card':
|
||||
case 'debit_card':
|
||||
return Icons.credit_card;
|
||||
case 'bank_transfer':
|
||||
case 'transfer':
|
||||
return Icons.account_balance;
|
||||
case 'ewallet':
|
||||
case 'e_wallet':
|
||||
case 'digital_wallet':
|
||||
return Icons.account_balance_wallet;
|
||||
case 'qr_code':
|
||||
case 'qris':
|
||||
return Icons.qr_code;
|
||||
default:
|
||||
return Icons.payment;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,53 +1,109 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../common/extension/extension.dart';
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../domain/analytic/analytic.dart';
|
||||
import 'stat_tile.dart';
|
||||
|
||||
class ReportQuickStats extends StatelessWidget {
|
||||
const ReportQuickStats({super.key});
|
||||
final DashboardOverview overview;
|
||||
|
||||
const ReportQuickStats({super.key, required this.overview});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
return Column(
|
||||
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,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
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 Orders',
|
||||
value: overview.totalOrders.toString(),
|
||||
icon: Icons.receipt_long,
|
||||
color: AppColor.info,
|
||||
animatedValue: overview.totalOrders * 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: 'Average Order',
|
||||
value: overview.averageOrderValue
|
||||
.round()
|
||||
.currencyFormatRp,
|
||||
icon: Icons.trending_up,
|
||||
color: AppColor.warning,
|
||||
animatedValue: overview.averageOrderValue * 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,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TweenAnimationBuilder<double>(
|
||||
tween: Tween<double>(begin: 0, end: 1),
|
||||
duration: const Duration(milliseconds: 1200),
|
||||
builder: (context, value, child) {
|
||||
return Transform.scale(
|
||||
scale: value,
|
||||
child: ReportStatTile(
|
||||
title: 'Customers',
|
||||
value: overview.totalCustomers.toString(),
|
||||
icon: Icons.people,
|
||||
color: AppColor.success,
|
||||
animatedValue: overview.totalCustomers * value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: TweenAnimationBuilder<double>(
|
||||
tween: Tween<double>(begin: 0, end: 1),
|
||||
duration: const Duration(milliseconds: 1400),
|
||||
builder: (context, value, child) {
|
||||
return Transform.scale(
|
||||
scale: value,
|
||||
child: ReportStatTile(
|
||||
title: 'Void + Refund',
|
||||
value: (overview.voidedOrders + overview.refundedOrders)
|
||||
.toString(),
|
||||
|
||||
icon: Icons.cancel,
|
||||
color: AppColor.error,
|
||||
animatedValue:
|
||||
(overview.voidedOrders + overview.refundedOrders) *
|
||||
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,11 +1,18 @@
|
||||
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 ReportRevenueSummary extends StatelessWidget {
|
||||
final DashboardOverview overview;
|
||||
final Animation<double> rotationAnimation;
|
||||
const ReportRevenueSummary({super.key, required this.rotationAnimation});
|
||||
const ReportRevenueSummary({
|
||||
super.key,
|
||||
required this.rotationAnimation,
|
||||
required this.overview,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -106,51 +113,13 @@ class ReportRevenueSummary extends StatelessWidget {
|
||||
),
|
||||
const Spacer(),
|
||||
Text(
|
||||
'Rp 15.450.000',
|
||||
overview.totalSales.currencyFormatRp,
|
||||
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,11 +1,15 @@
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
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';
|
||||
import '../../../components/widgets/empty_widget.dart';
|
||||
|
||||
class ReportSales extends StatelessWidget {
|
||||
const ReportSales({super.key});
|
||||
final List<DashboardRecentSale> salesData;
|
||||
|
||||
const ReportSales({super.key, required this.salesData});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -25,6 +29,7 @@ class ReportSales extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header Section
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
@@ -32,16 +37,17 @@ class ReportSales extends StatelessWidget {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Grafik Penjualan',
|
||||
'Sales Chart',
|
||||
style: AppStyle.xxl.copyWith(
|
||||
color: AppColor.textPrimary,
|
||||
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Text(
|
||||
'7 hari terakhir',
|
||||
salesData.isEmpty
|
||||
? 'No data available'
|
||||
: '${salesData.length} days overview',
|
||||
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
|
||||
),
|
||||
],
|
||||
@@ -60,233 +66,124 @@ class ReportSales extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
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',
|
||||
];
|
||||
// Sales Summary Cards
|
||||
if (salesData.isNotEmpty) ...[
|
||||
_buildSalesSummary(),
|
||||
const SpaceHeight(20),
|
||||
],
|
||||
|
||||
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();
|
||||
},
|
||||
// Chart Container
|
||||
salesData.isEmpty
|
||||
? _buildEmptyChart()
|
||||
: Container(
|
||||
height: 300,
|
||||
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,
|
||||
),
|
||||
),
|
||||
touchCallback:
|
||||
(FlTouchEvent event, LineTouchResponse? touchResponse) {
|
||||
// Handle touch events here if needed
|
||||
},
|
||||
handleBuiltInTouches: true,
|
||||
child: _buildSalesChart(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SpaceHeight(16),
|
||||
|
||||
// Legend
|
||||
if (salesData.isNotEmpty)
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [_buildLegendItem('Sales Data', AppColor.primary)],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSalesSummary() {
|
||||
final totalSales = salesData.fold<int>(0, (sum, item) => sum + item.sales);
|
||||
final totalOrders = salesData.fold<int>(
|
||||
0,
|
||||
(sum, item) => sum + item.orders,
|
||||
);
|
||||
final totalItems = salesData.fold<int>(0, (sum, item) => sum + item.items);
|
||||
final totalNetSales = salesData.fold<int>(
|
||||
0,
|
||||
(sum, item) => sum + item.netSales,
|
||||
);
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.backgroundLight,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
border: Border.all(color: AppColor.border.withOpacity(0.3), width: 1),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_buildLegendItem('Minggu Ini', AppColor.primary),
|
||||
const SpaceWidth(24),
|
||||
_buildLegendItem('Minggu Lalu', AppColor.success),
|
||||
Expanded(
|
||||
child: _buildSummaryItem(
|
||||
'Total Sales',
|
||||
totalSales.currencyFormatRp,
|
||||
Icons.attach_money,
|
||||
AppColor.success,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 40,
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
),
|
||||
Expanded(
|
||||
child: _buildSummaryItem(
|
||||
'Net Sales',
|
||||
totalNetSales.currencyFormatRp,
|
||||
Icons.trending_up,
|
||||
AppColor.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(16),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildSummaryItem(
|
||||
'Total Orders',
|
||||
totalOrders.toString(),
|
||||
Icons.shopping_cart,
|
||||
AppColor.info,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 40,
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16),
|
||||
),
|
||||
Expanded(
|
||||
child: _buildSummaryItem(
|
||||
'Total Items',
|
||||
totalItems.toString(),
|
||||
Icons.inventory,
|
||||
AppColor.warning,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
@@ -294,6 +191,251 @@ class ReportSales extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSummaryItem(
|
||||
String label,
|
||||
String value,
|
||||
IconData icon,
|
||||
Color color,
|
||||
) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, size: 16, color: color),
|
||||
const SpaceWidth(6),
|
||||
Text(
|
||||
label,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(6),
|
||||
Text(
|
||||
value,
|
||||
style: AppStyle.md.copyWith(
|
||||
color: color,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSalesChart() {
|
||||
final maxValue = _getMaxValue();
|
||||
final spots = _generateSpots(salesData);
|
||||
|
||||
return LineChart(
|
||||
LineChartData(
|
||||
gridData: FlGridData(
|
||||
show: true,
|
||||
drawHorizontalLine: true,
|
||||
drawVerticalLine: false,
|
||||
horizontalInterval: maxValue / 5,
|
||||
getDrawingHorizontalLine: (value) {
|
||||
return FlLine(
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
strokeWidth: 1,
|
||||
dashArray: [5, 5],
|
||||
);
|
||||
},
|
||||
),
|
||||
titlesData: FlTitlesData(
|
||||
leftTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 70,
|
||||
getTitlesWidget: (value, meta) {
|
||||
return Text(
|
||||
_formatCurrency(value),
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 32,
|
||||
getTitlesWidget: (value, meta) {
|
||||
final index = value.toInt();
|
||||
if (index >= 0 && index < salesData.length) {
|
||||
final date = DateTime.parse(salesData[index].date);
|
||||
final dayName = _getDayName(date.weekday);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Text(
|
||||
dayName,
|
||||
style: AppStyle.xs.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: (salesData.length - 1).toDouble(),
|
||||
minY: 0,
|
||||
maxY: maxValue,
|
||||
lineBarsData: [
|
||||
// Main sales line
|
||||
LineChartBarData(
|
||||
spots: spots,
|
||||
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,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
lineTouchData: LineTouchData(
|
||||
enabled: true,
|
||||
touchTooltipData: LineTouchTooltipData(
|
||||
tooltipPadding: const EdgeInsets.all(12),
|
||||
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
|
||||
return touchedBarSpots
|
||||
.map((barSpot) {
|
||||
final index = barSpot.x.toInt();
|
||||
|
||||
if (index >= 0 && index < salesData.length) {
|
||||
final sale = salesData[index];
|
||||
final date = DateTime.parse(sale.date);
|
||||
final dayName = _getDayName(date.weekday);
|
||||
|
||||
return LineTooltipItem(
|
||||
'$dayName\n',
|
||||
const TextStyle(
|
||||
color: AppColor.textWhite,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14,
|
||||
),
|
||||
children: [
|
||||
TextSpan(
|
||||
text: 'Sales: ${sale.sales.currencyFormatRp}\n',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textWhite,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
TextSpan(
|
||||
text: 'Orders: ${sale.orders}\n',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textWhite,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
TextSpan(
|
||||
text: 'Net: ${sale.netSales.currencyFormatRp}',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textWhite,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.where((item) => item != null)
|
||||
.cast<LineTooltipItem>()
|
||||
.toList();
|
||||
},
|
||||
),
|
||||
touchCallback:
|
||||
(FlTouchEvent event, LineTouchResponse? touchResponse) {
|
||||
// Handle touch events here if needed
|
||||
},
|
||||
handleBuiltInTouches: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmptyChart() {
|
||||
return EmptyWidget(
|
||||
title: 'No Sales Data',
|
||||
message: 'Sales data will appear here once transactions are recorded',
|
||||
emptyIcon: Icons.show_chart,
|
||||
);
|
||||
}
|
||||
|
||||
List<FlSpot> _generateSpots(List<DashboardRecentSale> data) {
|
||||
return data.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final sale = entry.value;
|
||||
return FlSpot(index.toDouble(), sale.sales.toDouble());
|
||||
}).toList();
|
||||
}
|
||||
|
||||
double _getMaxValue() {
|
||||
if (salesData.isEmpty) return 1000000;
|
||||
|
||||
double maxValue = salesData
|
||||
.map((e) => e.sales.toDouble())
|
||||
.reduce((a, b) => a > b ? a : b);
|
||||
|
||||
// Add 20% padding to max value
|
||||
return maxValue * 1.2;
|
||||
}
|
||||
|
||||
String _formatCurrency(double value) {
|
||||
if (value >= 1000000) {
|
||||
return '${(value / 1000000).toStringAsFixed(1)}M';
|
||||
} else if (value >= 1000) {
|
||||
return '${(value / 1000).toStringAsFixed(0)}K';
|
||||
}
|
||||
return value.toStringAsFixed(0);
|
||||
}
|
||||
|
||||
String _getDayName(int weekday) {
|
||||
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||
return days[weekday - 1];
|
||||
}
|
||||
|
||||
Widget _buildLegendItem(String label, Color color) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
@@ -311,7 +453,6 @@ class ReportSales extends StatelessWidget {
|
||||
label,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
|
||||
@@ -7,7 +7,6 @@ class ReportStatTile extends StatelessWidget {
|
||||
final String value;
|
||||
final IconData icon;
|
||||
final Color color;
|
||||
final String change;
|
||||
final double animatedValue;
|
||||
const ReportStatTile({
|
||||
super.key,
|
||||
@@ -15,7 +14,6 @@ class ReportStatTile extends StatelessWidget {
|
||||
required this.value,
|
||||
required this.icon,
|
||||
required this.color,
|
||||
required this.change,
|
||||
required this.animatedValue,
|
||||
});
|
||||
|
||||
@@ -53,20 +51,6 @@ class ReportStatTile extends StatelessWidget {
|
||||
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),
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
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 ReportTopProduct extends StatelessWidget {
|
||||
const ReportTopProduct({super.key});
|
||||
final List<DashboardTopProduct> products;
|
||||
const ReportTopProduct({super.key, required this.products});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -59,39 +62,25 @@ class ReportTopProduct extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
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,
|
||||
ListView.builder(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemBuilder: (context, index) {
|
||||
return _buildEnhancedProductItem(products[index], index + 1);
|
||||
},
|
||||
itemCount: products.length,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEnhancedProductItem(
|
||||
String name,
|
||||
String price,
|
||||
String sold,
|
||||
int rank,
|
||||
) {
|
||||
Widget _buildEnhancedProductItem(DashboardTopProduct product, int rank) {
|
||||
final isFirst = rank == 1;
|
||||
final isTopThree = rank <= 3;
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
gradient: isFirst
|
||||
? LinearGradient(
|
||||
@@ -102,100 +91,478 @@ class ReportTopProduct extends StatelessWidget {
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
)
|
||||
: isTopThree
|
||||
? LinearGradient(
|
||||
colors: [
|
||||
AppColor.primary.withOpacity(0.08),
|
||||
AppColor.primary.withOpacity(0.03),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
)
|
||||
: null,
|
||||
color: isFirst ? null : AppColor.backgroundLight,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
color: isTopThree ? null : AppColor.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: isFirst ? AppColor.warning.withOpacity(0.3) : AppColor.border,
|
||||
color: isFirst
|
||||
? AppColor.warning.withOpacity(0.3)
|
||||
: isTopThree
|
||||
? AppColor.primary.withOpacity(0.2)
|
||||
: AppColor.border.withOpacity(0.3),
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: isFirst
|
||||
? AppColor.warning.withOpacity(0.15)
|
||||
: isTopThree
|
||||
? AppColor.primary.withOpacity(0.1)
|
||||
: Colors.black.withOpacity(0.04),
|
||||
blurRadius: isFirst ? 16 : 12,
|
||||
offset: const Offset(0, 4),
|
||||
spreadRadius: isFirst ? -2 : -3,
|
||||
),
|
||||
const SpaceWidth(16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
name,
|
||||
style: AppStyle.lg.copyWith(
|
||||
color: AppColor.textPrimary,
|
||||
fontWeight: FontWeight.w600,
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: Stack(
|
||||
children: [
|
||||
// Top accent line for rank 1-3
|
||||
if (isTopThree)
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: isFirst
|
||||
? [
|
||||
AppColor.warning,
|
||||
AppColor.warning.withOpacity(0.7),
|
||||
]
|
||||
: [
|
||||
AppColor.primary,
|
||||
AppColor.primary.withOpacity(0.7),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.shopping_cart,
|
||||
size: 14,
|
||||
color: AppColor.textSecondary,
|
||||
),
|
||||
|
||||
// Main content
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header with rank and product info
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Rank badge
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
gradient: isFirst
|
||||
? const LinearGradient(
|
||||
colors: [AppColor.warning, Color(0xFFFFB74D)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
)
|
||||
: isTopThree
|
||||
? LinearGradient(
|
||||
colors: [
|
||||
AppColor.primary,
|
||||
AppColor.primary.withOpacity(0.8),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
)
|
||||
: LinearGradient(
|
||||
colors: [
|
||||
AppColor.textSecondary.withOpacity(0.8),
|
||||
AppColor.textSecondary.withOpacity(0.6),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: isFirst
|
||||
? AppColor.warning.withOpacity(0.3)
|
||||
: isTopThree
|
||||
? AppColor.primary.withOpacity(0.3)
|
||||
: AppColor.textSecondary.withOpacity(0.2),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Center(
|
||||
child: isFirst
|
||||
? const Icon(
|
||||
Icons.emoji_events,
|
||||
color: AppColor.white,
|
||||
size: 28,
|
||||
)
|
||||
: rank == 2
|
||||
? const Icon(
|
||||
Icons.workspace_premium,
|
||||
color: AppColor.white,
|
||||
size: 26,
|
||||
)
|
||||
: rank == 3
|
||||
? const Icon(
|
||||
Icons.military_tech,
|
||||
color: AppColor.white,
|
||||
size: 26,
|
||||
)
|
||||
: Text(
|
||||
rank.toString(),
|
||||
style: AppStyle.xl.copyWith(
|
||||
color: AppColor.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SpaceWidth(16),
|
||||
|
||||
// Product info
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
product.productName,
|
||||
style: AppStyle.lg.copyWith(
|
||||
color: AppColor.textPrimary,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SpaceHeight(6),
|
||||
// Category badge
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
vertical: 4,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: isFirst
|
||||
? AppColor.warning.withOpacity(0.1)
|
||||
: AppColor.primary.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: isFirst
|
||||
? AppColor.warning.withOpacity(0.3)
|
||||
: AppColor.primary.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
product.categoryName,
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: isFirst
|
||||
? AppColor.warning
|
||||
: AppColor.primary,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: 0.5,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SpaceHeight(16),
|
||||
|
||||
// Statistics section
|
||||
Container(
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.background.withOpacity(0.5),
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: AppColor.border.withOpacity(0.2),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
const SpaceWidth(4),
|
||||
Text(
|
||||
sold,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
child: Column(
|
||||
children: [
|
||||
// Revenue and Average Price
|
||||
IntrinsicHeight(
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.attach_money,
|
||||
size: 14,
|
||||
color: AppColor.success,
|
||||
),
|
||||
const SpaceWidth(3),
|
||||
Flexible(
|
||||
child: Text(
|
||||
'Revenue',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 11,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Text(
|
||||
product.revenue.currencyFormatRp,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.success,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 13,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
Container(
|
||||
width: 1,
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
),
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
),
|
||||
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
'Avg. Price',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 11,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SpaceWidth(3),
|
||||
Icon(
|
||||
Icons.trending_up,
|
||||
size: 14,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Text(
|
||||
product.averagePrice
|
||||
.round()
|
||||
.currencyFormatRp,
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.primary,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 13,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.end,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const SpaceHeight(10),
|
||||
|
||||
// Quantity Sold and Order Count
|
||||
IntrinsicHeight(
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.inventory,
|
||||
size: 14,
|
||||
color: AppColor.warning,
|
||||
),
|
||||
const SpaceWidth(3),
|
||||
Flexible(
|
||||
child: Text(
|
||||
'Sold',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 11,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Text(
|
||||
'${product.quantitySold}',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.warning,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
Container(
|
||||
width: 1,
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
),
|
||||
color: AppColor.border.withOpacity(0.3),
|
||||
),
|
||||
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
'Orders',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 11,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SpaceWidth(3),
|
||||
Icon(
|
||||
Icons.shopping_cart,
|
||||
size: 14,
|
||||
color: AppColor.info,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SpaceHeight(4),
|
||||
Text(
|
||||
'${product.orderCount}',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.info,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Performance indicator for top 3
|
||||
if (isTopThree) ...[
|
||||
const SpaceHeight(10),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: isFirst
|
||||
? [
|
||||
AppColor.warning.withOpacity(0.2),
|
||||
AppColor.warning.withOpacity(0.1),
|
||||
]
|
||||
: [
|
||||
AppColor.primary.withOpacity(0.2),
|
||||
AppColor.primary.withOpacity(0.1),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(
|
||||
color: isFirst
|
||||
? AppColor.warning.withOpacity(0.3)
|
||||
: AppColor.primary.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
isFirst ? Icons.star : Icons.trending_up,
|
||||
size: 14,
|
||||
color: isFirst
|
||||
? AppColor.warning
|
||||
: AppColor.primary,
|
||||
),
|
||||
const SpaceWidth(5),
|
||||
Flexible(
|
||||
child: Text(
|
||||
isFirst ? 'Best Seller' : 'Top Performer',
|
||||
style: AppStyle.xs.copyWith(
|
||||
color: isFirst
|
||||
? AppColor.warning
|
||||
: AppColor.primary,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 11,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
price,
|
||||
style: AppStyle.lg.copyWith(
|
||||
color: isFirst ? AppColor.warning : AppColor.primary,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user