feat: update home ui

2026-06-23 21:27:27 +07:00
parent e236d811ce
commit 83f4e065ed
34 changed files with 2128 additions and 1597 deletions
@@ -0,0 +1,184 @@
+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(
+        padding: const EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          color: AppColor.white.withOpacity(0.15),
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(color: AppColor.white.withOpacity(0.2)),
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Top: Icon + Title + Percentage + Chevron
+            Row(
+              children: [
+                Container(
+                  padding: const EdgeInsets.all(8),
+                  decoration: BoxDecoration(
+                    color: iconColor,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: Icon(icon, color: Colors.white, size: 20),
+                ),
+                const SpaceWidth(10),
+                Text(
+                  title,
+                  style: AppStyle.md.copyWith(
+                    color: AppColor.white,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                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 (hidden or visible)
+            isValueVisible
+                ? Text(
+                    value.currencyFormatRp,
+                    style: AppStyle.h1.copyWith(
+                      color: AppColor.white,
+                      fontWeight: FontWeight.w900,
+                      fontSize: 26,
+                    ),
+                  )
+                : 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),
+      ),
+      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: 24,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: dailyData.map((d) {
+          final ratio = maxVal > 0 ? d.totalCost / maxVal : 0.0;
+          return Expanded(
+            child: Container(
+              margin: const EdgeInsets.symmetric(horizontal: 1.5),
+              height: 6 + (18 * ratio),
+              decoration: BoxDecoration(
+                color: AppColor.white.withOpacity(0.4),
+                borderRadius: BorderRadius.circular(3),
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}