321 lines
11 KiB
Dart
321 lines
11 KiB
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';
|
|
|
|
class HeaderSummaryCard extends StatelessWidget {
|
|
final IconData icon;
|
|
final Color iconColor;
|
|
final String title;
|
|
final int value;
|
|
final String subtitle;
|
|
final List<ExclusiveSummaryDaily> dailyData;
|
|
final double? percentage;
|
|
final bool isValueVisible;
|
|
final VoidCallback? onTap;
|
|
|
|
const HeaderSummaryCard({
|
|
super.key,
|
|
required this.icon,
|
|
required this.iconColor,
|
|
required this.title,
|
|
required this.value,
|
|
required this.subtitle,
|
|
required this.dailyData,
|
|
this.percentage,
|
|
this.isValueVisible = true,
|
|
this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(18),
|
|
gradient: const LinearGradient(
|
|
colors: [
|
|
Color(0xFFE8000A), // sedikit lebih terang di atas
|
|
Color(0xFFC40202), // primary di tengah
|
|
Color(0xFF990000), // gelap di bawah
|
|
],
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
stops: [0.0, 0.5, 1.0],
|
|
),
|
|
boxShadow: [
|
|
// Shadow merah di bawah — efek floating/3D
|
|
BoxShadow(
|
|
color: const Color(0xFFC40202).withOpacity(0.55),
|
|
blurRadius: 16,
|
|
spreadRadius: 0,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
// Inner highlight di atas kiri (simulasi cahaya)
|
|
BoxShadow(
|
|
color: AppColor.white.withOpacity(0.08),
|
|
blurRadius: 0,
|
|
spreadRadius: -1,
|
|
offset: const Offset(0, 1),
|
|
),
|
|
],
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(18),
|
|
child: Stack(
|
|
children: [
|
|
// Top highlight strip — efek glossy
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
height: 1.5,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
AppColor.white.withOpacity(0.0),
|
|
AppColor.white.withOpacity(0.35),
|
|
AppColor.white.withOpacity(0.0),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Decorative circles
|
|
Positioned(
|
|
top: -30,
|
|
right: -30,
|
|
child: Container(
|
|
width: 120,
|
|
height: 120,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: AppColor.white.withOpacity(0.07),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
bottom: -20,
|
|
right: 20,
|
|
child: Container(
|
|
width: 70,
|
|
height: 70,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: AppColor.white.withOpacity(0.05),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 40,
|
|
left: -20,
|
|
child: Container(
|
|
width: 60,
|
|
height: 60,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: AppColor.white.withOpacity(0.04),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Content
|
|
Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Top: Icon + Title + Percentage + Chevron
|
|
Row(
|
|
children: [
|
|
// Icon dengan shadow
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [iconColor.withOpacity(0.9), iconColor],
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
),
|
|
borderRadius: BorderRadius.circular(10),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: iconColor.withOpacity(0.5),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Icon(icon, color: Colors.white, size: 20),
|
|
),
|
|
const SpaceWidth(10),
|
|
Text(
|
|
title,
|
|
style: AppStyle.md.copyWith(
|
|
color: AppColor.white,
|
|
fontWeight: FontWeight.w600,
|
|
shadows: [
|
|
Shadow(
|
|
color: Colors.black.withOpacity(0.2),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, 1),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Spacer(),
|
|
if (percentage != null) _buildPercentageBadge(),
|
|
const SpaceWidth(6),
|
|
Icon(
|
|
Icons.chevron_right_rounded,
|
|
color: AppColor.white.withOpacity(0.7),
|
|
size: 20,
|
|
),
|
|
],
|
|
),
|
|
|
|
const SpaceHeight(12),
|
|
|
|
// Value
|
|
isValueVisible
|
|
? Text(
|
|
value.currencyFormatRp,
|
|
style: AppStyle.h1.copyWith(
|
|
color: AppColor.white,
|
|
fontWeight: FontWeight.w900,
|
|
fontSize: 26,
|
|
shadows: [
|
|
Shadow(
|
|
color: Colors.black.withOpacity(0.25),
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: Text(
|
|
'Rp ••••••',
|
|
style: AppStyle.h1.copyWith(
|
|
color: AppColor.white,
|
|
fontWeight: FontWeight.w900,
|
|
fontSize: 26,
|
|
letterSpacing: 2,
|
|
),
|
|
),
|
|
|
|
const SpaceHeight(4),
|
|
|
|
// Subtitle
|
|
Text(
|
|
subtitle,
|
|
style: AppStyle.xs.copyWith(
|
|
color: AppColor.white.withOpacity(0.7),
|
|
fontWeight: FontWeight.w400,
|
|
fontStyle: FontStyle.italic,
|
|
),
|
|
),
|
|
|
|
const Spacer(),
|
|
|
|
// Mini bar chart
|
|
_buildMiniBarChart(),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPercentageBadge() {
|
|
final isPositive = (percentage ?? 0) >= 0;
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: isPositive
|
|
? const Color(0xFF4CAF50).withOpacity(0.25)
|
|
: const Color(0xFFE53E3E).withOpacity(0.25),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: isPositive
|
|
? const Color(0xFF4CAF50).withOpacity(0.4)
|
|
: const Color(0xFFE53E3E).withOpacity(0.4),
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
isPositive
|
|
? Icons.trending_up_rounded
|
|
: Icons.trending_down_rounded,
|
|
color: isPositive
|
|
? const Color(0xFF4CAF50)
|
|
: const Color(0xFFE53E3E),
|
|
size: 12,
|
|
),
|
|
const SizedBox(width: 3),
|
|
Text(
|
|
'${percentage!.toStringAsFixed(1)}%',
|
|
style: AppStyle.xs.copyWith(
|
|
color: isPositive
|
|
? const Color(0xFF4CAF50)
|
|
: const Color(0xFFE53E3E),
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMiniBarChart() {
|
|
if (dailyData.isEmpty) return const SizedBox.shrink();
|
|
|
|
final maxVal = dailyData
|
|
.map((d) => d.totalCost)
|
|
.fold<int>(0, (a, b) => a > b ? a : b);
|
|
|
|
return SizedBox(
|
|
height: 28,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: dailyData.map((d) {
|
|
final ratio = maxVal > 0 ? d.totalCost / maxVal : 0.0;
|
|
final isMax = maxVal > 0 && d.totalCost == maxVal;
|
|
return Expanded(
|
|
child: Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 1.5),
|
|
height: 6 + (22 * ratio),
|
|
decoration: BoxDecoration(
|
|
// Bar tertinggi lebih terang
|
|
color: isMax
|
|
? AppColor.white.withOpacity(0.75)
|
|
: AppColor.white.withOpacity(0.35),
|
|
borderRadius: BorderRadius.circular(3),
|
|
boxShadow: isMax
|
|
? [
|
|
BoxShadow(
|
|
color: AppColor.white.withOpacity(0.3),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, -2),
|
|
),
|
|
]
|
|
: null,
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}
|
|
}
|