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

Compare commits

base: apksel-dev:9458de5059fa45cfa4d01de1650c16cf44125379
Branches Tags
apksel-dev:main
apksel-dev:dev
..
compare: apksel-dev:8fa20d03b600d40d335e99c3318e89c80e59a3e0
Branches Tags
apksel-dev:dev
apksel-dev:main

2 Commits
9458de5059 ... 8fa20d03b6

Author SHA1 Message Date
efrilm
8fa20d03b6 feat: report page 2025-08-12 22:33:31 +07:00
efrilm
f22c36d6de feat: transaction page 2025-08-12 21:27:13 +07:00
14 changed files with 1936 additions and 6 deletions
Show Stats Expand all files Collapse all files

2
lib/common/theme/theme.dart
View File

@ -43,7 +43,7 @@ class ThemeApp {
),
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: AppColor.background,
backgroundColor: AppColor.white,
selectedItemColor: AppColor.primary,
unselectedItemColor: AppColor.textSecondary,
selectedLabelStyle: AppStyle.md.copyWith(

30
lib/presentation/components/button/action_icon_button.dart Normal file
View File

@ -0,0 +1,30 @@
part of 'button.dart';
class ActionIconButton extends StatelessWidget {
const ActionIconButton({super.key, required this.onTap, required this.icon});
final Function()? onTap;
final IconData icon;
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(right: 8),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: AppColor.textWhite, size: 20),
),
),
),
);
}
}

1
lib/presentation/components/button/button.dart
View File

@ -5,3 +5,4 @@ import '../../../common/theme/theme.dart';
import '../spacer/spacer.dart';
part 'elevated_button.dart';
part 'action_icon_button.dart';

124
lib/presentation/pages/report/report_page.dart
View File

@ -1,12 +1,132 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import 'dart:math' as math;
import '../../../common/theme/theme.dart';
import '../../components/button/button.dart';
import '../../components/spacer/spacer.dart';
import 'widgets/appbar.dart';
import 'widgets/quick_stats.dart';
import 'widgets/report_action.dart';
import 'widgets/revenue_summary.dart';
import 'widgets/sales.dart';
import 'widgets/top_product.dart';
@RoutePage()
class ReportPage extends StatelessWidget {
class ReportPage extends StatefulWidget {
const ReportPage({super.key});
@override
State<ReportPage> createState() => _ReportPageState();
}
class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
late AnimationController _fadeController;
late AnimationController _slideController;
late AnimationController _rotationController;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
late Animation<double> _rotationAnimation;
@override
void initState() {
super.initState();
_fadeController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
_slideController = AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this,
);
_rotationController = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat();
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
CurvedAnimation(parent: _slideController, curve: Curves.elasticOut),
);
_rotationAnimation = Tween<double>(
begin: 0,
end: 2 * math.pi,
).animate(_rotationController);
_fadeController.forward();
_slideController.forward();
}
@override
void dispose() {
_fadeController.dispose();
_slideController.dispose();
_rotationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(child: Text('ReportPage'));
return Scaffold(
backgroundColor: AppColor.background,
body: CustomScrollView(
slivers: [
// Custom App Bar with Hero Effect
SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppColor.primary,
centerTitle: false,
flexibleSpace: ReportAppBar(rotationAnimation: _rotationAnimation),
actions: [
ActionIconButton(onTap: () {}, icon: LineIcons.download),
ActionIconButton(onTap: () {}, icon: LineIcons.filter),
SpaceWidth(8),
],
),
// Content
SliverPadding(
padding: EdgeInsets.all(AppValue.padding),
sliver: SliverList(
delegate: SliverChildListDelegate([
FadeTransition(
opacity: _fadeAnimation,
child: SlideTransition(
position: _slideAnimation,
child: Column(
children: [
ReportRevenueSummary(
rotationAnimation: _rotationAnimation,
),
const SpaceHeight(24),
ReportQuickStats(),
const SpaceHeight(24),
ReportSales(),
const SpaceHeight(24),
ReportTopProduct(),
const SpaceHeight(24),
ReportAction(),
const SpaceHeight(20),
],
),
),
),
]),
),
),
],
),
);
}
}

96
lib/presentation/pages/report/widgets/appbar.dart Normal file
View File

@ -0,0 +1,96 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class ReportAppBar extends StatelessWidget {
final Animation<double> rotationAnimation;
const ReportAppBar({super.key, required this.rotationAnimation});
@override
Widget build(BuildContext context) {
return FlexibleSpaceBar(
titlePadding: const EdgeInsets.only(left: 20, bottom: 16),
title: Text(
'Laporan Bisnis',
style: AppStyle.xl.copyWith(
color: AppColor.textWhite,
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
background: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: AppColor.primaryGradient,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Stack(
children: [
Positioned(
right: -20,
top: -20,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: rotationAnimation.value,
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.1),
),
),
);
},
),
),
Positioned(
left: -30,
bottom: -30,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: -rotationAnimation.value * 0.5,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.05),
),
),
);
},
),
),
Positioned(
right: 80,
bottom: 30,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: -rotationAnimation.value * 0.2,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.white.withOpacity(0.08),
),
),
);
},
),
),
],
),
),
);
}
}

55
lib/presentation/pages/report/widgets/quick_stats.dart Normal file
View File

@ -0,0 +1,55 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
import 'stat_tile.dart';
class ReportQuickStats extends StatelessWidget {
const ReportQuickStats({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: TweenAnimationBuilder<double>(
tween: Tween<double>(begin: 0, end: 1),
duration: const Duration(milliseconds: 800),
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: ReportStatTile(
title: 'Total Transaksi',
value: '245',
icon: Icons.receipt_long,
color: AppColor.info,
change: '+8.2%',
animatedValue: 245 * value,
),
);
},
),
),
const SizedBox(width: 16),
Expanded(
child: TweenAnimationBuilder<double>(
tween: Tween<double>(begin: 0, end: 1),
duration: const Duration(milliseconds: 1000),
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: ReportStatTile(
title: 'Rata-rata',
value: 'Rp 63.061',
icon: Icons.trending_up,
color: AppColor.warning,
change: '+5.1%',
animatedValue: 63061 * value,
),
);
},
),
),
],
);
}
}

136
lib/presentation/pages/report/widgets/report_action.dart Normal file
View File

@ -0,0 +1,136 @@
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(),
);
}
}

161
lib/presentation/pages/report/widgets/revenue_summary.dart Normal file
View File

@ -0,0 +1,161 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';
class ReportRevenueSummary extends StatelessWidget {
final Animation<double> rotationAnimation;
const ReportRevenueSummary({super.key, required this.rotationAnimation});
@override
Widget build(BuildContext context) {
return Container(
height: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: AppColor.primary.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 8),
),
],
),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: AppColor.primaryGradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(24),
),
),
// Floating elements
Positioned(
right: 20,
top: 20,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: rotationAnimation.value * 0.3,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.white.withOpacity(0.1),
),
),
);
},
),
),
Positioned(
right: 60,
bottom: 30,
child: AnimatedBuilder(
animation: rotationAnimation,
builder: (context, child) {
return Transform.rotate(
angle: -rotationAnimation.value * 0.2,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColor.white.withOpacity(0.08),
),
),
);
},
),
),
// Content
Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(10),
),
child: const Icon(
Icons.account_balance_wallet,
color: AppColor.textWhite,
size: 20,
),
),
const SpaceWidth(12),
Text(
'Total Pendapatan',
style: AppStyle.lg.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w500,
),
),
],
),
const Spacer(),
Text(
'Rp 15.450.000',
style: AppStyle.h1.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.bold,
letterSpacing: -1,
),
),
const SpaceHeight(8),
Row(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: AppColor.success.withOpacity(0.9),
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.trending_up,
color: AppColor.textWhite,
size: 16,
),
SpaceWidth(4),
Text(
'+12.5%',
style: AppStyle.sm.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w700,
),
),
],
),
),
const SpaceWidth(12),
Text(
'dari periode sebelumnya',
style: AppStyle.sm.copyWith(color: AppColor.textWhite),
),
],
),
],
),
),
],
),
);
}
}

321
lib/presentation/pages/report/widgets/sales.dart Normal file
View File

@ -0,0 +1,321 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';
class ReportSales extends StatelessWidget {
const ReportSales({super.key});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: AppColor.textSecondary.withOpacity(0.1),
blurRadius: 20,
offset: const Offset(0, 8),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Grafik Penjualan',
style: AppStyle.xxl.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.bold,
),
),
const SpaceHeight(4),
Text(
'7 hari terakhir',
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
],
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.show_chart,
color: AppColor.primary,
size: 24,
),
),
],
),
const SpaceHeight(20),
// Chart Container
Container(
height: 280,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.primary.withOpacity(0.05),
AppColor.backgroundLight,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppColor.primary.withOpacity(0.1),
width: 2,
),
),
child: LineChart(
LineChartData(
gridData: FlGridData(
show: true,
drawHorizontalLine: true,
drawVerticalLine: false,
horizontalInterval: 500000,
getDrawingHorizontalLine: (value) {
return FlLine(
color: AppColor.border.withOpacity(0.3),
strokeWidth: 1,
dashArray: [5, 5],
);
},
),
titlesData: FlTitlesData(
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 60,
getTitlesWidget: (value, meta) {
return Text(
'${(value / 1000000).toStringAsFixed(1)}M',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
);
},
),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 32,
getTitlesWidget: (value, meta) {
const days = [
'Sen',
'Sel',
'Rab',
'Kam',
'Jum',
'Sab',
'Min',
];
if (value.toInt() >= 0 && value.toInt() < days.length) {
return Padding(
padding: const EdgeInsets.only(top: 8),
child: Text(
days[value.toInt()],
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
);
}
return const Text('');
},
),
),
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
),
borderData: FlBorderData(show: false),
minX: 0,
maxX: 6,
minY: 0,
maxY: 3000000,
lineBarsData: [
// Main sales line
LineChartBarData(
spots: [
const FlSpot(0, 1800000), // Senin
const FlSpot(1, 2200000), // Selasa
const FlSpot(2, 1900000), // Rabu
const FlSpot(3, 2600000), // Kamis
const FlSpot(4, 2300000), // Jumat
const FlSpot(5, 2800000), // Sabtu
const FlSpot(6, 2500000), // Minggu
],
isCurved: true,
curveSmoothness: 0.35,
gradient: LinearGradient(
colors: [AppColor.primary, AppColor.primaryLight],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
barWidth: 4,
isStrokeCapRound: true,
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
colors: [
AppColor.primary.withOpacity(0.3),
AppColor.primary.withOpacity(0.1),
Colors.transparent,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
dotData: FlDotData(
show: true,
getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 6,
color: AppColor.surface,
strokeWidth: 3,
strokeColor: AppColor.primary,
);
},
),
),
// Secondary line for comparison
LineChartBarData(
spots: [
const FlSpot(0, 1500000),
const FlSpot(1, 1800000),
const FlSpot(2, 1600000),
const FlSpot(3, 2100000),
const FlSpot(4, 1900000),
const FlSpot(5, 2300000),
const FlSpot(6, 2100000),
],
isCurved: true,
curveSmoothness: 0.35,
color: AppColor.success.withOpacity(0.7),
barWidth: 3,
isStrokeCapRound: true,
dashArray: [8, 4],
belowBarData: BarAreaData(show: false),
dotData: FlDotData(
show: true,
getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 4,
color: AppColor.success,
strokeWidth: 2,
strokeColor: AppColor.surface,
);
},
),
),
],
lineTouchData: LineTouchData(
enabled: true,
touchTooltipData: LineTouchTooltipData(
tooltipPadding: const EdgeInsets.all(12),
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
return touchedBarSpots.map((barSpot) {
final flSpot = barSpot;
const days = [
'Senin',
'Selasa',
'Rabu',
'Kamis',
'Jumat',
'Sabtu',
'Minggu',
];
return LineTooltipItem(
'${days[flSpot.x.toInt()]}\n',
const TextStyle(
color: AppColor.textWhite,
fontWeight: FontWeight.bold,
fontSize: 14,
),
children: [
TextSpan(
text:
'Rp ${(flSpot.y / 1000000).toStringAsFixed(1)}M',
style: AppStyle.sm.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w500,
),
),
],
);
}).toList();
},
),
touchCallback:
(FlTouchEvent event, LineTouchResponse? touchResponse) {
// Handle touch events here if needed
},
handleBuiltInTouches: true,
),
),
),
),
const SpaceHeight(16),
// Legend
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildLegendItem('Minggu Ini', AppColor.primary),
const SpaceWidth(24),
_buildLegendItem('Minggu Lalu', AppColor.success),
],
),
],
),
);
}
Widget _buildLegendItem(String label, Color color) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 16,
height: 3,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(2),
),
),
const SpaceWidth(8),
Text(
label,
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
],
);
}
}

92
lib/presentation/pages/report/widgets/stat_tile.dart Normal file
View File

@ -0,0 +1,92 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class ReportStatTile extends StatelessWidget {
final String title;
final String value;
final IconData icon;
final Color color;
final String change;
final double animatedValue;
const ReportStatTile({
super.key,
required this.title,
required this.value,
required this.icon,
required this.color,
required this.change,
required this.animatedValue,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: color.withOpacity(0.1),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
border: Border.all(color: color.withOpacity(0.2), width: 1.5),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [color.withOpacity(0.2), color.withOpacity(0.1)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: color, size: 24),
),
const Spacer(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppColor.success.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
change,
style: AppStyle.sm.copyWith(
color: AppColor.success,
fontWeight: FontWeight.w700,
),
),
),
],
),
const SizedBox(height: 16),
Text(
title,
style: AppStyle.md.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 4),
Text(
value,
style: AppStyle.xxl.copyWith(
color: color,
fontWeight: FontWeight.bold,
),
),
],
),
);
}
}

202
lib/presentation/pages/report/widgets/top_product.dart Normal file
View File

@ -0,0 +1,202 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';
class ReportTopProduct extends StatelessWidget {
const ReportTopProduct({super.key});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: AppColor.textSecondary.withOpacity(0.1),
blurRadius: 20,
offset: const Offset(0, 8),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Produk Terlaris',
style: AppStyle.xxl.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.bold,
),
),
const SpaceHeight(4),
Text(
'Ranking penjualan tertinggi',
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
],
),
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppColor.warning.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.star,
color: AppColor.warning,
size: 24,
),
),
],
),
const SpaceHeight(20),
_buildEnhancedProductItem(
'Kopi Americano',
'Rp 25.000',
'145 terjual',
1,
),
_buildEnhancedProductItem(
'Nasi Goreng Spesial',
'Rp 35.000',
'98 terjual',
2,
),
_buildEnhancedProductItem(
'Mie Ayam Bakso',
'Rp 28.000',
'87 terjual',
3,
),
],
),
);
}
Widget _buildEnhancedProductItem(
String name,
String price,
String sold,
int rank,
) {
final isFirst = rank == 1;
return Container(
margin: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
gradient: isFirst
? LinearGradient(
colors: [
AppColor.warning.withOpacity(0.1),
AppColor.warning.withOpacity(0.05),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: null,
color: isFirst ? null : AppColor.backgroundLight,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isFirst ? AppColor.warning.withOpacity(0.3) : AppColor.border,
width: isFirst ? 2 : 1,
),
),
child: Row(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
gradient: isFirst
? const LinearGradient(
colors: [AppColor.warning, Color(0xFFFFB74D)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: LinearGradient(
colors: [
AppColor.primary.withOpacity(0.8),
AppColor.primaryLight.withOpacity(0.6),
],
),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: isFirst
? AppColor.warning.withOpacity(0.3)
: AppColor.primary.withOpacity(0.2),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: Center(
child: isFirst
? const Icon(
Icons.emoji_events,
color: AppColor.white,
size: 24,
)
: Text(
rank.toString(),
style: AppStyle.xl.copyWith(
color: AppColor.white,
fontWeight: FontWeight.bold,
),
),
),
),
const SpaceWidth(16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: AppStyle.lg.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
),
),
const SpaceHeight(4),
Row(
children: [
Icon(
Icons.shopping_cart,
size: 14,
color: AppColor.textSecondary,
),
const SpaceWidth(4),
Text(
sold,
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
),
],
),
],
),
),
Text(
price,
style: AppStyle.lg.copyWith(
color: isFirst ? AppColor.warning : AppColor.primary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
],
),
);
}
}

703
lib/presentation/pages/transaction/transaction_page.dart
View File

@ -1,12 +1,711 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../common/theme/theme.dart';
class Transaction {
final String id;
final String customerName;
final DateTime date;
final double total;
final String status;
final List<TransactionItem> items;
final String paymentMethod;
Transaction({
required this.id,
required this.customerName,
required this.date,
required this.total,
required this.status,
required this.items,
required this.paymentMethod,
});
}
class TransactionItem {
final String name;
final int quantity;
final double price;
TransactionItem({
required this.name,
required this.quantity,
required this.price,
});
}
@RoutePage()
class TransactionPage extends StatelessWidget {
class TransactionPage extends StatefulWidget {
const TransactionPage({super.key});
@override
State<TransactionPage> createState() => _TransactionPageState();
}
class _TransactionPageState extends State<TransactionPage> {
String selectedFilter = 'All';
DateTime selectedDate = DateTime.now();
final List<Transaction> transactions = [
Transaction(
id: 'TRX001',
customerName: 'Ahmad Rizki',
date: DateTime.now().subtract(Duration(hours: 2)),
total: 125000,
status: 'Completed',
paymentMethod: 'Cash',
items: [
TransactionItem(name: 'Nasi Goreng', quantity: 2, price: 25000),
TransactionItem(name: 'Es Teh', quantity: 3, price: 5000),
TransactionItem(name: 'Ayam Bakar', quantity: 1, price: 35000),
],
),
Transaction(
id: 'TRX002',
customerName: 'Siti Nurhaliza',
date: DateTime.now().subtract(Duration(hours: 4)),
total: 85000,
status: 'Completed',
paymentMethod: 'QRIS',
items: [
TransactionItem(name: 'Gado-gado', quantity: 1, price: 20000),
TransactionItem(name: 'Jus Jeruk', quantity: 2, price: 12000),
TransactionItem(name: 'Kerupuk', quantity: 1, price: 5000),
],
),
Transaction(
id: 'TRX003',
customerName: 'Budi Santoso',
date: DateTime.now().subtract(Duration(hours: 6)),
total: 200000,
status: 'Pending',
paymentMethod: 'Debit Card',
items: [
TransactionItem(name: 'Paket Keluarga', quantity: 1, price: 150000),
TransactionItem(name: 'Es Campur', quantity: 2, price: 15000),
],
),
];
@override
Widget build(BuildContext context) {
return Center(child: Text('TransactionPage'));
return Scaffold(
backgroundColor: AppColor.background,
appBar: AppBar(
elevation: 0,
backgroundColor: AppColor.white,
title: Text(
'Transactions',
style: TextStyle(
color: AppColor.textPrimary,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
actions: [
IconButton(
icon: Icon(Icons.search, color: AppColor.textPrimary),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.filter_list, color: AppColor.textPrimary),
onPressed: () => _showFilterBottomSheet(context),
),
],
),
body: Column(
children: [
_buildSummaryCards(),
_buildFilterTabs(),
Expanded(child: _buildTransactionList()),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
backgroundColor: AppColor.primary,
icon: Icon(Icons.add, color: AppColor.white),
label: Text(
'New Sale',
style: TextStyle(color: AppColor.white, fontWeight: FontWeight.w600),
),
),
);
}
Widget _buildSummaryCards() {
return Container(
padding: EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: _buildSummaryCard(
'Today\'s Sales',
'Rp 2,450,000',
Icons.trending_up,
AppColor.success,
'+12%',
),
),
SizedBox(width: 12),
Expanded(
child: _buildSummaryCard(
'Total Orders',
'48',
Icons.receipt_long,
AppColor.info,
'+8%',
),
),
],
),
);
}
Widget _buildSummaryCard(
String title,
String value,
IconData icon,
Color color,
String change,
) {
return Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColor.black.withOpacity(0.05),
blurRadius: 10,
offset: Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(icon, color: color, size: 24),
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppColor.success.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
change,
style: TextStyle(
color: AppColor.success,
fontSize: 10,
fontWeight: FontWeight.w600,
),
),
),
],
),
SizedBox(height: 12),
Text(
value,
style: TextStyle(
color: AppColor.textPrimary,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Text(
title,
style: TextStyle(
color: AppColor.textSecondary,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
Widget _buildFilterTabs() {
final filters = ['All', 'Completed', 'Pending', 'Cancelled'];
return Container(
height: 60,
padding: EdgeInsets.symmetric(horizontal: 16),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: filters.length,
itemBuilder: (context, index) {
final filter = filters[index];
final isSelected = selectedFilter == filter;
return GestureDetector(
onTap: () {
setState(() {
selectedFilter = filter;
});
},
child: Container(
margin: EdgeInsets.only(right: 12, top: 8, bottom: 8),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
decoration: BoxDecoration(
color: isSelected ? AppColor.primary : AppColor.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: isSelected ? AppColor.primary : AppColor.border,
width: 1,
),
),
child: Text(
filter,
style: TextStyle(
color: isSelected ? AppColor.white : AppColor.textSecondary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
),
);
},
),
);
}
Widget _buildTransactionList() {
final filteredTransactions = transactions.where((transaction) {
if (selectedFilter == 'All') return true;
return transaction.status == selectedFilter;
}).toList();
return ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 16),
itemCount: filteredTransactions.length,
itemBuilder: (context, index) {
final transaction = filteredTransactions[index];
return _buildTransactionCard(transaction);
},
);
}
Widget _buildTransactionCard(Transaction transaction) {
return GestureDetector(
onTap: () => _showTransactionDetail(transaction),
child: Container(
margin: EdgeInsets.only(bottom: 12),
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColor.black.withOpacity(0.05),
blurRadius: 10,
offset: Offset(0, 2),
),
],
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
transaction.id,
style: TextStyle(
color: AppColor.textPrimary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Text(
transaction.customerName,
style: TextStyle(
color: AppColor.textSecondary,
fontSize: 14,
),
),
SizedBox(height: 4),
Text(
'${_formatTime(transaction.date)} • ${transaction.paymentMethod}',
style: TextStyle(
color: AppColor.textLight,
fontSize: 12,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'Rp ${_formatCurrency(transaction.total)}',
style: TextStyle(
color: AppColor.textPrimary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: _getStatusColor(
transaction.status,
).withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Text(
transaction.status,
style: TextStyle(
color: _getStatusColor(transaction.status),
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
],
),
],
),
SizedBox(height: 12),
Row(
children: [
Icon(
Icons.shopping_bag_outlined,
color: AppColor.textLight,
size: 16,
),
SizedBox(width: 8),
Text(
'${transaction.items.length} items',
style: TextStyle(color: AppColor.textLight, fontSize: 12),
),
Spacer(),
Icon(
Icons.arrow_forward_ios,
color: AppColor.textLight,
size: 14,
),
],
),
],
),
),
);
}
Color _getStatusColor(String status) {
switch (status) {
case 'Completed':
return AppColor.success;
case 'Pending':
return AppColor.warning;
case 'Cancelled':
return AppColor.error;
default:
return AppColor.textSecondary;
}
}
String _formatCurrency(double amount) {
return amount
.toStringAsFixed(0)
.replaceAllMapped(
RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
(Match m) => '${m[1]},',
);
}
String _formatTime(DateTime dateTime) {
final now = DateTime.now();
final difference = now.difference(dateTime);
if (difference.inHours < 1) {
return '${difference.inMinutes}m ago';
} else if (difference.inHours < 24) {
return '${difference.inHours}h ago';
} else {
return '${difference.inDays}d ago';
}
}
void _showFilterBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (context) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Filter Transactions',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
SizedBox(height: 20),
_buildFilterOption('Date Range', Icons.date_range),
_buildFilterOption('Payment Method', Icons.payment),
_buildFilterOption('Amount Range', Icons.attach_money),
_buildFilterOption('Customer', Icons.person),
SizedBox(height: 20),
Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () => Navigator.pop(context),
style: OutlinedButton.styleFrom(
side: BorderSide(color: AppColor.border),
padding: EdgeInsets.symmetric(vertical: 12),
),
child: Text(
'Reset',
style: TextStyle(color: AppColor.textSecondary),
),
),
),
SizedBox(width: 12),
Expanded(
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
padding: EdgeInsets.symmetric(vertical: 12),
),
child: Text(
'Apply',
style: TextStyle(color: AppColor.white),
),
),
),
],
),
],
),
);
},
);
}
Widget _buildFilterOption(String title, IconData icon) {
return ListTile(
contentPadding: EdgeInsets.zero,
leading: Icon(icon, color: AppColor.textSecondary),
title: Text(title, style: TextStyle(color: AppColor.textPrimary)),
trailing: Icon(
Icons.arrow_forward_ios,
size: 16,
color: AppColor.textLight,
),
onTap: () {},
);
}
void _showTransactionDetail(Transaction transaction) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
builder: (context) {
return DraggableScrollableSheet(
initialChildSize: 0.7,
maxChildSize: 0.9,
minChildSize: 0.5,
builder: (context, scrollController) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColor.borderLight,
borderRadius: BorderRadius.circular(2),
),
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Transaction Detail',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: _getStatusColor(
transaction.status,
).withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Text(
transaction.status,
style: TextStyle(
color: _getStatusColor(transaction.status),
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
],
),
SizedBox(height: 20),
_buildDetailRow('Transaction ID', transaction.id),
_buildDetailRow('Customer', transaction.customerName),
_buildDetailRow(
'Date',
'${transaction.date.day}/${transaction.date.month}/${transaction.date.year}',
),
_buildDetailRow('Payment Method', transaction.paymentMethod),
SizedBox(height: 20),
Text(
'Items Ordered',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
SizedBox(height: 12),
Expanded(
child: ListView.builder(
controller: scrollController,
itemCount: transaction.items.length,
itemBuilder: (context, index) {
final item = transaction.items[index];
return Container(
margin: EdgeInsets.only(bottom: 8),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppColor.backgroundLight,
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.name,
style: TextStyle(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
),
),
Text(
'Qty: ${item.quantity}',
style: TextStyle(
color: AppColor.textSecondary,
fontSize: 12,
),
),
],
),
),
Text(
'Rp ${_formatCurrency(item.price * item.quantity)}',
style: TextStyle(
color: AppColor.textPrimary,
fontWeight: FontWeight.bold,
),
),
],
),
);
},
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
border: Border(top: BorderSide(color: AppColor.border)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Total Amount',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
Text(
'Rp ${_formatCurrency(transaction.total)}',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColor.primary,
),
),
],
),
),
],
),
);
},
);
},
);
}
Widget _buildDetailRow(String label, String value) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: TextStyle(color: AppColor.textSecondary, fontSize: 14),
),
Text(
value,
style: TextStyle(
color: AppColor.textPrimary,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
],
),
);
}
}

18
pubspec.lock
View File

@ -297,6 +297,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "2.1.1"
equatable:
dependency: transitive
description:
name: equatable
sha256: "567c64b3cb4cf82397aac55f4f0cbd3ca20d77c6c03bedbc4ceaddc08904aef7"
url: "https://pub.dev"
source: hosted
version: "2.0.7"
fake_async:
dependency: transitive
description:
@ -329,6 +337,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.1.1"
fl_chart:
dependency: "direct main"
description:
name: fl_chart
sha256: "577aeac8ca414c25333334d7c4bb246775234c0e44b38b10a82b559dd4d764e7"
url: "https://pub.dev"
source: hosted
version: "1.0.0"
flutter:
dependency: "direct main"
description: flutter
@ -1039,4 +1055,4 @@ packages:
version: "3.1.3"
sdks:
dart: ">=3.8.1 <4.0.0"
flutter: ">=3.27.0"
flutter: ">=3.27.4"

1
pubspec.yaml
View File

@ -30,6 +30,7 @@ dependencies:
awesome_dio_interceptor: ^1.3.0
line_icons: ^2.0.3
flutter_spinkit: ^5.2.2
fl_chart: ^1.0.0
dev_dependencies:
flutter_test: