feat: profit loss
This commit is contained in:
efrilm
@@ -1,14 +1,23 @@
|
||||
import 'package:fl_chart/fl_chart.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:line_icons/line_icons.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../../domain/analytic/analytic.dart';
|
||||
|
||||
class FinanceCashFlow extends StatelessWidget {
|
||||
const FinanceCashFlow({super.key});
|
||||
final List<ProfitLossDailyData> dailyData;
|
||||
|
||||
const FinanceCashFlow({super.key, required this.dailyData});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Calculate totals from daily data
|
||||
final totalCashIn = _calculateTotalCashIn();
|
||||
final totalCashOut = _calculateTotalCashOut();
|
||||
final netFlow = totalCashIn - totalCashOut;
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.all(20),
|
||||
@@ -70,7 +79,7 @@ class FinanceCashFlow extends StatelessWidget {
|
||||
Expanded(
|
||||
child: _buildCashFlowIndicator(
|
||||
'Cash In',
|
||||
'Rp 28.5M',
|
||||
_formatCurrency(totalCashIn),
|
||||
LineIcons.arrowUp,
|
||||
AppColor.success,
|
||||
),
|
||||
@@ -79,7 +88,7 @@ class FinanceCashFlow extends StatelessWidget {
|
||||
Expanded(
|
||||
child: _buildCashFlowIndicator(
|
||||
'Cash Out',
|
||||
'Rp 21.2M',
|
||||
_formatCurrency(totalCashOut),
|
||||
LineIcons.arrowDown,
|
||||
AppColor.error,
|
||||
),
|
||||
@@ -88,7 +97,7 @@ class FinanceCashFlow extends StatelessWidget {
|
||||
Expanded(
|
||||
child: _buildCashFlowIndicator(
|
||||
'Net Flow',
|
||||
'Rp 7.3M',
|
||||
_formatCurrency(netFlow),
|
||||
LineIcons.equals,
|
||||
AppColor.info,
|
||||
),
|
||||
@@ -110,7 +119,7 @@ class FinanceCashFlow extends StatelessWidget {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Grafik Cash Flow 7 Hari Terakhir',
|
||||
'Grafik Cash Flow ${dailyData.length} Hari Terakhir',
|
||||
style: AppStyle.sm.copyWith(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w600,
|
||||
@@ -118,207 +127,9 @@ class FinanceCashFlow extends StatelessWidget {
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Expanded(
|
||||
child: LineChart(
|
||||
LineChartData(
|
||||
gridData: FlGridData(
|
||||
show: true,
|
||||
drawVerticalLine: false,
|
||||
horizontalInterval: 5000000, // 5M interval
|
||||
getDrawingHorizontalLine: (value) {
|
||||
return FlLine(
|
||||
color: AppColor.borderLight,
|
||||
strokeWidth: 1,
|
||||
);
|
||||
},
|
||||
),
|
||||
titlesData: FlTitlesData(
|
||||
show: true,
|
||||
rightTitles: AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
topTitles: AxisTitles(
|
||||
sideTitles: SideTitles(showTitles: false),
|
||||
),
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 30,
|
||||
interval: 1,
|
||||
getTitlesWidget: (double value, TitleMeta meta) {
|
||||
const style = TextStyle(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 10,
|
||||
);
|
||||
Widget text;
|
||||
switch (value.toInt()) {
|
||||
case 0:
|
||||
text = const Text('Sen', style: style);
|
||||
break;
|
||||
case 1:
|
||||
text = const Text('Sel', style: style);
|
||||
break;
|
||||
case 2:
|
||||
text = const Text('Rab', style: style);
|
||||
break;
|
||||
case 3:
|
||||
text = const Text('Kam', style: style);
|
||||
break;
|
||||
case 4:
|
||||
text = const Text('Jum', style: style);
|
||||
break;
|
||||
case 5:
|
||||
text = const Text('Sab', style: style);
|
||||
break;
|
||||
case 6:
|
||||
text = const Text('Min', style: style);
|
||||
break;
|
||||
default:
|
||||
text = const Text('', style: style);
|
||||
break;
|
||||
}
|
||||
return SideTitleWidget(meta: meta, child: text);
|
||||
},
|
||||
),
|
||||
),
|
||||
leftTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
interval: 10000000, // 10M interval
|
||||
reservedSize: 42,
|
||||
getTitlesWidget: (double value, TitleMeta meta) {
|
||||
return Text(
|
||||
'${(value / 1000000).toInt()}M',
|
||||
style: const TextStyle(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 10,
|
||||
),
|
||||
textAlign: TextAlign.left,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
borderData: FlBorderData(
|
||||
show: true,
|
||||
border: Border.all(color: AppColor.borderLight),
|
||||
),
|
||||
minX: 0,
|
||||
maxX: 6,
|
||||
minY: -5000000,
|
||||
maxY: 30000000,
|
||||
lineBarsData: [
|
||||
// Cash In Line
|
||||
LineChartBarData(
|
||||
spots: const [
|
||||
FlSpot(0, 25000000), // Monday
|
||||
FlSpot(1, 22000000), // Tuesday
|
||||
FlSpot(2, 28000000), // Wednesday
|
||||
FlSpot(3, 24000000), // Thursday
|
||||
FlSpot(4, 30000000), // Friday
|
||||
FlSpot(5, 18000000), // Saturday
|
||||
FlSpot(6, 26000000), // Sunday
|
||||
],
|
||||
isCurved: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.success.withOpacity(0.8),
|
||||
AppColor.success,
|
||||
],
|
||||
),
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: FlDotData(
|
||||
show: true,
|
||||
getDotPainter: (spot, percent, barData, index) {
|
||||
return FlDotCirclePainter(
|
||||
radius: 4,
|
||||
color: AppColor.success,
|
||||
strokeWidth: 2,
|
||||
strokeColor: AppColor.white,
|
||||
);
|
||||
},
|
||||
),
|
||||
belowBarData: BarAreaData(
|
||||
show: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.success.withOpacity(0.1),
|
||||
AppColor.success.withOpacity(0.0),
|
||||
],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Cash Out Line
|
||||
LineChartBarData(
|
||||
spots: const [
|
||||
FlSpot(0, 20000000), // Monday
|
||||
FlSpot(1, 18000000), // Tuesday
|
||||
FlSpot(2, 23000000), // Wednesday
|
||||
FlSpot(3, 19000000), // Thursday
|
||||
FlSpot(4, 25000000), // Friday
|
||||
FlSpot(5, 15000000), // Saturday
|
||||
FlSpot(6, 21000000), // Sunday
|
||||
],
|
||||
isCurved: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.error.withOpacity(0.8),
|
||||
AppColor.error,
|
||||
],
|
||||
),
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: FlDotData(
|
||||
show: true,
|
||||
getDotPainter: (spot, percent, barData, index) {
|
||||
return FlDotCirclePainter(
|
||||
radius: 4,
|
||||
color: AppColor.error,
|
||||
strokeWidth: 2,
|
||||
strokeColor: AppColor.white,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
// Net Flow Line
|
||||
LineChartBarData(
|
||||
spots: const [
|
||||
FlSpot(0, 5000000), // Monday
|
||||
FlSpot(1, 4000000), // Tuesday
|
||||
FlSpot(2, 5000000), // Wednesday
|
||||
FlSpot(3, 5000000), // Thursday
|
||||
FlSpot(4, 5000000), // Friday
|
||||
FlSpot(5, 3000000), // Saturday
|
||||
FlSpot(6, 5000000), // Sunday
|
||||
],
|
||||
isCurved: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.info.withOpacity(0.8),
|
||||
AppColor.info,
|
||||
],
|
||||
),
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: FlDotData(
|
||||
show: true,
|
||||
getDotPainter: (spot, percent, barData, index) {
|
||||
return FlDotCirclePainter(
|
||||
radius: 4,
|
||||
color: AppColor.info,
|
||||
strokeWidth: 2,
|
||||
strokeColor: AppColor.white,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: dailyData.isEmpty
|
||||
? _buildEmptyChart()
|
||||
: LineChart(_buildLineChartData()),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
// Legend
|
||||
@@ -340,6 +151,273 @@ class FinanceCashFlow extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
LineChartData _buildLineChartData() {
|
||||
final maxValue = _getMaxChartValue();
|
||||
final minValue = _getMinChartValue();
|
||||
|
||||
return LineChartData(
|
||||
gridData: FlGridData(
|
||||
show: true,
|
||||
drawVerticalLine: false,
|
||||
horizontalInterval: (maxValue / 5).roundToDouble(),
|
||||
getDrawingHorizontalLine: (value) {
|
||||
return FlLine(color: AppColor.borderLight, strokeWidth: 1);
|
||||
},
|
||||
),
|
||||
titlesData: FlTitlesData(
|
||||
show: true,
|
||||
rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
||||
bottomTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
reservedSize: 30,
|
||||
interval: 1,
|
||||
getTitlesWidget: (double value, TitleMeta meta) {
|
||||
final index = value.toInt();
|
||||
if (index >= 0 && index < dailyData.length) {
|
||||
final date = DateTime.parse(dailyData[index].date);
|
||||
final dayName = _getDayName(date.weekday);
|
||||
return SideTitleWidget(
|
||||
meta: meta,
|
||||
child: Text(
|
||||
dayName,
|
||||
style: const TextStyle(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return SideTitleWidget(meta: meta, child: Text(''));
|
||||
},
|
||||
),
|
||||
),
|
||||
leftTitles: AxisTitles(
|
||||
sideTitles: SideTitles(
|
||||
showTitles: true,
|
||||
interval: (maxValue / 3).roundToDouble(),
|
||||
reservedSize: 42,
|
||||
getTitlesWidget: (double value, TitleMeta meta) {
|
||||
return Text(
|
||||
_formatChartValue(value),
|
||||
style: const TextStyle(
|
||||
color: AppColor.textSecondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 10,
|
||||
),
|
||||
textAlign: TextAlign.left,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
borderData: FlBorderData(
|
||||
show: true,
|
||||
border: Border.all(color: AppColor.borderLight),
|
||||
),
|
||||
minX: 0,
|
||||
maxX: (dailyData.length - 1).toDouble(),
|
||||
minY: minValue,
|
||||
maxY: maxValue,
|
||||
lineBarsData: [
|
||||
// Cash In Line (Revenue)
|
||||
LineChartBarData(
|
||||
spots: _buildCashInSpots(),
|
||||
isCurved: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [AppColor.success.withOpacity(0.8), AppColor.success],
|
||||
),
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: FlDotData(
|
||||
show: true,
|
||||
getDotPainter: (spot, percent, barData, index) {
|
||||
return FlDotCirclePainter(
|
||||
radius: 4,
|
||||
color: AppColor.success,
|
||||
strokeWidth: 2,
|
||||
strokeColor: AppColor.white,
|
||||
);
|
||||
},
|
||||
),
|
||||
belowBarData: BarAreaData(
|
||||
show: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppColor.success.withOpacity(0.1),
|
||||
AppColor.success.withOpacity(0.0),
|
||||
],
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Cash Out Line (Total Cost)
|
||||
LineChartBarData(
|
||||
spots: _buildCashOutSpots(),
|
||||
isCurved: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [AppColor.error.withOpacity(0.8), AppColor.error],
|
||||
),
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: FlDotData(
|
||||
show: true,
|
||||
getDotPainter: (spot, percent, barData, index) {
|
||||
return FlDotCirclePainter(
|
||||
radius: 4,
|
||||
color: AppColor.error,
|
||||
strokeWidth: 2,
|
||||
strokeColor: AppColor.white,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
// Net Flow Line (Net Profit)
|
||||
LineChartBarData(
|
||||
spots: _buildNetFlowSpots(),
|
||||
isCurved: true,
|
||||
gradient: LinearGradient(
|
||||
colors: [AppColor.info.withOpacity(0.8), AppColor.info],
|
||||
),
|
||||
barWidth: 3,
|
||||
isStrokeCapRound: true,
|
||||
dotData: FlDotData(
|
||||
show: true,
|
||||
getDotPainter: (spot, percent, barData, index) {
|
||||
return FlDotCirclePainter(
|
||||
radius: 4,
|
||||
color: AppColor.info,
|
||||
strokeWidth: 2,
|
||||
strokeColor: AppColor.white,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmptyChart() {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
LineIcons.lineChart,
|
||||
size: 48,
|
||||
color: AppColor.textSecondary.withOpacity(0.3),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Tidak ada data untuk ditampilkan',
|
||||
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Helper methods for calculating data
|
||||
int _calculateTotalCashIn() {
|
||||
return dailyData.fold(0, (sum, data) => sum + data.revenue);
|
||||
}
|
||||
|
||||
int _calculateTotalCashOut() {
|
||||
return dailyData.fold(
|
||||
0,
|
||||
(sum, data) => sum + data.cost + data.tax + data.discount,
|
||||
);
|
||||
}
|
||||
|
||||
double _getMaxChartValue() {
|
||||
if (dailyData.isEmpty) return 30000000;
|
||||
|
||||
final maxRevenue = dailyData
|
||||
.map((e) => e.revenue)
|
||||
.reduce((a, b) => a > b ? a : b);
|
||||
final maxCost = dailyData
|
||||
.map((e) => e.cost + e.tax + e.discount)
|
||||
.reduce((a, b) => a > b ? a : b);
|
||||
final maxValue = maxRevenue > maxCost ? maxRevenue : maxCost;
|
||||
|
||||
return (maxValue * 1.2).toDouble(); // Add 20% padding
|
||||
}
|
||||
|
||||
double _getMinChartValue() {
|
||||
if (dailyData.isEmpty) return -5000000;
|
||||
|
||||
final minNetProfit = dailyData
|
||||
.map((e) => e.netProfit)
|
||||
.reduce((a, b) => a < b ? a : b);
|
||||
return minNetProfit < 0 ? (minNetProfit * 1.2).toDouble() : 0;
|
||||
}
|
||||
|
||||
List<FlSpot> _buildCashInSpots() {
|
||||
return dailyData.asMap().entries.map((entry) {
|
||||
return FlSpot(entry.key.toDouble(), entry.value.revenue.toDouble());
|
||||
}).toList();
|
||||
}
|
||||
|
||||
List<FlSpot> _buildCashOutSpots() {
|
||||
return dailyData.asMap().entries.map((entry) {
|
||||
final totalCost =
|
||||
entry.value.cost + entry.value.tax + entry.value.discount;
|
||||
return FlSpot(entry.key.toDouble(), totalCost.toDouble());
|
||||
}).toList();
|
||||
}
|
||||
|
||||
List<FlSpot> _buildNetFlowSpots() {
|
||||
return dailyData.asMap().entries.map((entry) {
|
||||
return FlSpot(entry.key.toDouble(), entry.value.netProfit.toDouble());
|
||||
}).toList();
|
||||
}
|
||||
|
||||
String _getDayName(int weekday) {
|
||||
switch (weekday) {
|
||||
case 1:
|
||||
return 'Sen';
|
||||
case 2:
|
||||
return 'Sel';
|
||||
case 3:
|
||||
return 'Rab';
|
||||
case 4:
|
||||
return 'Kam';
|
||||
case 5:
|
||||
return 'Jum';
|
||||
case 6:
|
||||
return 'Sab';
|
||||
case 7:
|
||||
return 'Min';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
String _formatChartValue(double value) {
|
||||
if (value.abs() >= 1000000) {
|
||||
return '${(value / 1000000).toStringAsFixed(0)}M';
|
||||
} else if (value.abs() >= 1000) {
|
||||
return '${(value / 1000).toStringAsFixed(0)}K';
|
||||
} else {
|
||||
return value.toStringAsFixed(0);
|
||||
}
|
||||
}
|
||||
|
||||
String _formatCurrency(int amount) {
|
||||
if (amount.abs() >= 1000000000) {
|
||||
return 'Rp ${(amount / 1000000000).toStringAsFixed(1)}B';
|
||||
} else if (amount.abs() >= 1000000) {
|
||||
return 'Rp ${(amount / 1000000).toStringAsFixed(1)}M';
|
||||
} else if (amount.abs() >= 1000) {
|
||||
return 'Rp ${(amount / 1000).toStringAsFixed(1)}K';
|
||||
} else {
|
||||
return 'Rp ${NumberFormat('#,###', 'id_ID').format(amount)}';
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildChartLegend(String label, Color color) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
|
||||
Reference in New Issue
Block a user