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

feat: dashboard

Browse Source
This commit is contained in:
efrilm
2025-08-18 01:50:50 +07:00
parent 51289d7829
commit 65ba81f311
25 changed files with 5786 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/report/widgets/sales.dart
+363 -222
View File
@@ -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,
),
),