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

feat: profit loss

Browse Source
This commit is contained in:
efrilm
2025-08-17 22:36:46 +07:00
parent beb9ead4da
commit 50b06da627
21 changed files with 4548 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/finance/finance_page.dart
+102 -185
View File
@@ -1,20 +1,33 @@
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 '../../../application/profit_loss/profit_loss_loader/profit_loss_loader_bloc.dart';
import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../../domain/analytic/analytic.dart';
import '../../../injection.dart';
import '../../components/appbar/appbar.dart';
import 'widgets/cash_flow.dart';
import 'widgets/category.dart';
import 'widgets/product.dart';
import 'widgets/profit_loss.dart';
import 'widgets/summary_card.dart';
@RoutePage()
class FinancePage extends StatefulWidget {
class FinancePage extends StatefulWidget implements AutoRouteWrapper {
const FinancePage({super.key});
@override
State<FinancePage> createState() => _FinancePageState();
@override
Widget wrappedRoute(BuildContext context) => BlocProvider(
create: (_) =>
getIt<ProfitLossLoaderBloc>()..add(ProfitLossLoaderEvent.fetched()),
child: this,
);
}
class _FinancePageState extends State<FinancePage>
@@ -90,69 +103,74 @@ class _FinancePageState extends State<FinancePage>
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
body: CustomScrollView(
slivers: [
// SliverAppBar with animated background
SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppColor.primary,
elevation: 0,
flexibleSpace: CustomAppBar(title: 'Keuangan'),
),
body: BlocBuilder<ProfitLossLoaderBloc, ProfitLossLoaderState>(
builder: (context, state) {
return CustomScrollView(
slivers: [
// SliverAppBar with animated background
SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppColor.primary,
elevation: 0,
flexibleSpace: CustomAppBar(title: 'Keuangan'),
),
// Header dengan filter periode
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: _buildPeriodSelector(),
),
),
// Header dengan filter periode
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: _buildPeriodSelector(),
),
),
// Summary Cards
SliverToBoxAdapter(
child: SlideTransition(
position: _slideAnimation,
child: _buildSummaryCards(),
),
),
// Summary Cards
SliverToBoxAdapter(
child: SlideTransition(
position: _slideAnimation,
child: _buildSummaryCards(state.profitLoss.summary),
),
),
// Cash Flow Analysis
SliverToBoxAdapter(
child: ScaleTransition(
scale: _scaleAnimation,
child: FinanceCashFlow(),
),
),
// Cash Flow Analysis
SliverToBoxAdapter(
child: ScaleTransition(
scale: _scaleAnimation,
child: FinanceCashFlow(dailyData: state.profitLoss.data),
),
),
// Profit Loss Detail
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: FinanceProfitLoss(),
),
),
// Profit Loss Detail
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: FinanceProfitLoss(data: state.profitLoss.summary),
),
),
// Transaction Categories
SliverToBoxAdapter(
child: SlideTransition(
position: _slideAnimation,
child: FinanceCategory(),
),
),
SliverToBoxAdapter(
child: SlideTransition(
position: _slideAnimation,
child: FinanceCategory(),
),
),
// Monthly Comparison
SliverToBoxAdapter(
child: ScaleTransition(
scale: _scaleAnimation,
child: _buildMonthlyComparison(),
),
),
// Product Analysis Section
SliverToBoxAdapter(
child: SlideTransition(
position: _slideAnimation,
child: _buildProductAnalysis(state.profitLoss.productData),
),
),
// Bottom spacing
const SliverToBoxAdapter(child: SizedBox(height: 100)),
],
// Transaction Categories
// Bottom spacing
const SliverToBoxAdapter(child: SizedBox(height: 100)),
],
);
},
),
);
}
@@ -210,7 +228,7 @@ class _FinancePageState extends State<FinancePage>
);
}
Widget _buildSummaryCards() {
Widget _buildSummaryCards(ProfitLossSummary summary) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
@@ -220,10 +238,9 @@ class _FinancePageState extends State<FinancePage>
Expanded(
child: FinanceSummaryCard(
title: 'Total Pendapatan',
amount: 'Rp 25.840.000',
amount: summary.totalRevenue.currencyFormatRp,
icon: LineIcons.arrowUp,
color: AppColor.success,
change: '+12.5%',
isPositive: true,
),
),
@@ -231,10 +248,9 @@ class _FinancePageState extends State<FinancePage>
Expanded(
child: FinanceSummaryCard(
title: 'Total Pengeluaran',
amount: 'Rp 18.320.000',
amount: summary.totalCost.currencyFormatRp,
icon: LineIcons.arrowDown,
color: AppColor.error,
change: '+8.2%',
isPositive: false,
),
),
@@ -246,10 +262,9 @@ class _FinancePageState extends State<FinancePage>
Expanded(
child: FinanceSummaryCard(
title: 'Keuntungan Bersih',
amount: 'Rp 7.520.000',
amount: summary.netProfit.currencyFormatRp,
icon: LineIcons.lineChart,
color: AppColor.info,
change: '+15.3%',
isPositive: true,
),
),
@@ -257,10 +272,9 @@ class _FinancePageState extends State<FinancePage>
Expanded(
child: FinanceSummaryCard(
title: 'Margin Profit',
amount: '29.1%',
amount: '${summary.profitabilityRatio.round()}%',
icon: LineIcons.percent,
color: AppColor.warning,
change: '+2.1%',
isPositive: true,
),
),
@@ -271,7 +285,7 @@ class _FinancePageState extends State<FinancePage>
);
}
Widget _buildMonthlyComparison() {
Widget _buildProductAnalysis(List<ProfitLossProductData> products) {
return Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
@@ -295,138 +309,41 @@ class _FinancePageState extends State<FinancePage>
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: AppColor.warning.withOpacity(0.1),
color: AppColor.info.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: const Icon(
LineIcons.calendarCheck,
color: AppColor.warning,
LineIcons.shoppingBag,
color: AppColor.info,
size: 20,
),
),
const SizedBox(width: 12),
Text(
'Perbandingan Bulanan',
'Analisis Produk',
style: AppStyle.lg.copyWith(fontWeight: FontWeight.bold),
),
],
),
const SizedBox(height: 20),
Row(
children: [
Expanded(
child: _buildComparisonCard(
'Bulan Ini',
'Rp 7.52M',
'+15.3%',
true,
AppColor.primary,
),
),
const SizedBox(width: 12),
Expanded(
child: _buildComparisonCard(
'Bulan Lalu',
'Rp 6.53M',
'-2.1%',
false,
AppColor.textSecondary,
const Spacer(),
TextButton(
onPressed: () {},
child: Text(
'Lihat Semua',
style: AppStyle.sm.copyWith(color: AppColor.primary),
),
),
],
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.success.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.success.withOpacity(0.2)),
),
child: Row(
children: [
const Icon(
LineIcons.thumbsUp,
color: AppColor.success,
size: 20,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Performa Bagus!',
style: AppStyle.md.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.success,
),
),
Text(
'Keuntungan meningkat 15.3% dari bulan lalu',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
),
),
],
),
),
],
),
),
],
),
);
}
Widget _buildComparisonCard(
String period,
String amount,
String change,
bool isPositive,
Color color,
) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: color.withOpacity(0.05),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: color.withOpacity(0.2)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
period,
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
),
const SizedBox(height: 8),
Text(
amount,
style: AppStyle.lg.copyWith(
fontWeight: FontWeight.bold,
color: color,
),
),
const SizedBox(height: 4),
Row(
children: [
Icon(
isPositive ? LineIcons.arrowUp : LineIcons.arrowDown,
size: 14,
color: isPositive ? AppColor.success : AppColor.error,
),
const SizedBox(width: 4),
Text(
change,
style: AppStyle.xs.copyWith(
color: isPositive ? AppColor.success : AppColor.error,
fontWeight: FontWeight.w600,
),
),
],
// Product list
ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: const EdgeInsets.only(top: 12),
itemCount: products.length,
separatorBuilder: (context, index) => const SizedBox(height: 12),
itemBuilder: (context, index) {
final product = products[index];
return ProfitLossProduct(product: product);
},
),
],
),
lib/presentation/pages/finance/widgets/cash_flow.dart
+284 -206
View File
@@ -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,
lib/presentation/pages/finance/widgets/product.dart
+148
View File
@@ -0,0 +1,148 @@
import 'package:flutter/material.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
class ProfitLossProduct extends StatelessWidget {
final ProfitLossProductData product;
const ProfitLossProduct({super.key, required this.product});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.background,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.border.withOpacity(0.5)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Product header
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.productName,
style: AppStyle.md.copyWith(fontWeight: FontWeight.bold),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Text(
product.categoryName,
style: AppStyle.xs.copyWith(color: AppColor.primary),
),
),
],
),
),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'${product.quantitySold} terjual',
style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
),
Text(
'${product.grossProfitMargin.toStringAsFixed(1)}%',
style: AppStyle.md.copyWith(
fontWeight: FontWeight.bold,
color: product.grossProfitMargin > 25
? AppColor.success
: product.grossProfitMargin > 15
? AppColor.warning
: AppColor.error,
),
),
],
),
],
),
const SizedBox(height: 16),
// Financial metrics
Row(
children: [
Expanded(
child: _buildMetricColumn(
'Pendapatan',
product.revenue.currencyFormatRp,
AppColor.success,
),
),
Expanded(
child: _buildMetricColumn(
'Biaya',
product.cost.currencyFormatRp,
AppColor.error,
),
),
Expanded(
child: _buildMetricColumn(
'Laba Kotor',
product.grossProfit.currencyFormatRp,
AppColor.info,
),
),
],
),
const SizedBox(height: 12),
// Average metrics
Row(
children: [
Expanded(
child: _buildMetricColumn(
'Harga Rata-rata',
product.averagePrice.currencyFormatRp,
AppColor.textSecondary,
),
),
Expanded(
child: _buildMetricColumn(
'Laba per Unit',
product.profitPerUnit.currencyFormatRp,
AppColor.primary,
),
),
const Expanded(child: SizedBox()),
],
),
],
),
);
}
Widget _buildMetricColumn(String label, String value, Color color) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: AppStyle.xs.copyWith(color: AppColor.textSecondary)),
const SizedBox(height: 2),
Text(
value,
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w600,
color: color,
),
),
],
);
}
}
lib/presentation/pages/finance/widgets/profit_loss.dart
+43 -9
View File
@@ -1,10 +1,14 @@
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
class FinanceProfitLoss extends StatelessWidget {
const FinanceProfitLoss({super.key});
final ProfitLossSummary data;
const FinanceProfitLoss({super.key, required this.data});
@override
Widget build(BuildContext context) {
@@ -49,52 +53,77 @@ class FinanceProfitLoss extends StatelessWidget {
),
const SizedBox(height: 20),
// Total Revenue (Penjualan Kotor)
_buildPLItem(
'Penjualan Kotor',
'Rp 25.840.000',
data.totalRevenue.currencyFormatRp,
AppColor.success,
true,
),
_buildPLItem('Diskon & Retur', '- Rp 560.000', AppColor.error, false),
// Discount (Diskon & Retur)
_buildPLItem(
'Diskon & Retur',
'- ${data.totalDiscount.currencyFormatRp}',
AppColor.error,
false,
),
const Divider(height: 24),
// Net Sales (Penjualan Bersih = Total Revenue - Discount)
_buildPLItem(
'Penjualan Bersih',
'Rp 25.280.000',
(data.totalRevenue - data.totalDiscount).currencyFormatRp,
AppColor.textPrimary,
true,
isHeader: true,
),
const SizedBox(height: 12),
// Cost of Goods Sold (HPP)
_buildPLItem(
'HPP (Harga Pokok Penjualan)',
'- Rp 15.120.000',
'- ${data.totalCost.currencyFormatRp}',
AppColor.error,
false,
),
const Divider(height: 24),
// Gross Profit (Laba Kotor)
_buildPLItem(
'Laba Kotor',
'Rp 10.160.000',
data.grossProfit.currencyFormatRp,
AppColor.success,
true,
isHeader: true,
showPercentage: true,
percentage: '${data.grossProfitMargin.toStringAsFixed(1)}%',
),
const SizedBox(height: 12),
// Operational Cost (Biaya Operasional) - calculated as difference
_buildPLItem(
'Biaya Operasional',
'- Rp 2.640.000',
'- ${_calculateOperationalCost().currencyFormatRp}',
AppColor.error,
false,
),
const Divider(height: 24),
// Net Profit (Laba Bersih)
_buildPLItem(
'Laba Bersih',
'Rp 7.520.000',
data.netProfit.currencyFormatRp,
AppColor.primary,
true,
isHeader: true,
showPercentage: true,
percentage: '29.8%',
percentage: '${data.netProfitMargin.round()}%',
),
],
),
@@ -155,4 +184,9 @@ class FinanceProfitLoss extends StatelessWidget {
),
);
}
// Calculate operational cost as the difference between gross profit and net profit
int _calculateOperationalCost() {
return data.grossProfit - data.netProfit - data.totalTax;
}
}
lib/presentation/pages/finance/widgets/summary_card.dart
-18
View File
@@ -9,7 +9,6 @@ class FinanceSummaryCard extends StatelessWidget {
required this.amount,
required this.icon,
required this.color,
required this.change,
required this.isPositive,
});
@@ -17,7 +16,6 @@ class FinanceSummaryCard extends StatelessWidget {
final String amount;
final IconData icon;
final Color color;
final String change;
final bool isPositive;
@override
@@ -50,22 +48,6 @@ class FinanceSummaryCard extends StatelessWidget {
),
child: Icon(icon, color: color, size: 20),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: isPositive
? AppColor.success.withOpacity(0.1)
: AppColor.error.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
change,
style: AppStyle.xs.copyWith(
color: isPositive ? AppColor.success : AppColor.error,
fontWeight: FontWeight.w600,
),
),
),
],
),
const SizedBox(height: 12),