From 0ff22689592e206e43e2355fea68c95543cacac7 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Mon, 23 Feb 2026 13:30:23 -0500 Subject: [PATCH] style: Refine reports page UI by updating metric card styling, grid padding, and overall spacing. --- .../src/presentation/pages/reports_page.dart | 5 +- .../widgets/reports_page/metric_card.dart | 30 +++++------ .../widgets/reports_page/metrics_grid.dart | 53 +++++++++---------- .../reports_page/quick_reports_section.dart | 9 ++-- 4 files changed, 45 insertions(+), 52 deletions(-) diff --git a/apps/mobile/packages/features/client/reports/lib/src/presentation/pages/reports_page.dart b/apps/mobile/packages/features/client/reports/lib/src/presentation/pages/reports_page.dart index 91723531..10a6c620 100644 --- a/apps/mobile/packages/features/client/reports/lib/src/presentation/pages/reports_page.dart +++ b/apps/mobile/packages/features/client/reports/lib/src/presentation/pages/reports_page.dart @@ -102,12 +102,12 @@ class _ReportsPageState extends State // Key Metrics Grid MetricsGrid(), - SizedBox(height: 24), + SizedBox(height: 16), // Quick Reports Section QuickReportsSection(), - SizedBox(height: 40), + SizedBox(height: 88), ], ), ), @@ -118,4 +118,3 @@ class _ReportsPageState extends State ); } } - diff --git a/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metric_card.dart b/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metric_card.dart index 04546a03..3040f6ed 100644 --- a/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metric_card.dart +++ b/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metric_card.dart @@ -6,7 +6,6 @@ import 'package:flutter/material.dart'; /// Shows a metric with an icon, label, value, and a badge with contextual /// information. Used in the metrics grid of the reports page. class MetricCard extends StatelessWidget { - const MetricCard({ super.key, required this.icon, @@ -17,6 +16,7 @@ class MetricCard extends StatelessWidget { required this.badgeTextColor, required this.iconColor, }); + /// The icon to display for this metric. final IconData icon; @@ -44,14 +44,11 @@ class MetricCard extends StatelessWidget { padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: UiColors.white, - borderRadius: BorderRadius.circular(12), - boxShadow: [ - BoxShadow( - color: UiColors.black.withOpacity(0.06), - blurRadius: 4, - offset: const Offset(0, 2), - ), - ], + borderRadius: UiConstants.radiusLg, + border: Border.all( + color: UiColors.border, + width: 0.5, + ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -65,10 +62,7 @@ class MetricCard extends StatelessWidget { Expanded( child: Text( label, - style: const TextStyle( - fontSize: 12, - color: UiColors.textSecondary, - ), + style: UiTypography.body2r, maxLines: 1, overflow: TextOverflow.ellipsis, ), @@ -92,13 +86,15 @@ class MetricCard extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), decoration: BoxDecoration( color: badgeColor, - borderRadius: BorderRadius.circular(10), + borderRadius: UiConstants.radiusMd, + border: Border.all( + color: badgeTextColor, + width: 0.25, + ), ), child: Text( badgeText, - style: TextStyle( - fontSize: 10, - fontWeight: FontWeight.w500, + style: UiTypography.footnote2m.copyWith( color: badgeTextColor, ), ), diff --git a/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metrics_grid.dart b/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metrics_grid.dart index e8774e01..e90d081a 100644 --- a/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metrics_grid.dart +++ b/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metrics_grid.dart @@ -5,7 +5,7 @@ import 'package:design_system/design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:intl/intl.dart'; -import 'package:krow_domain/src/entities/reports/reports_summary.dart'; +import 'package:krow_domain/krow_domain.dart'; import 'metric_card.dart'; @@ -37,46 +37,44 @@ class MetricsGrid extends StatelessWidget { // Error State if (state is ReportsSummaryError) { - return Padding( - padding: const EdgeInsets.symmetric(vertical: 16), - child: Container( - padding: const EdgeInsets.all(16), - decoration: BoxDecoration( - color: UiColors.tagError, - borderRadius: BorderRadius.circular(12), - ), - child: Row( - children: [ - const Icon(UiIcons.warning, - color: UiColors.error, size: 16), - const SizedBox(width: 8), - Expanded( - child: Text( - state.message, - style: const TextStyle( - color: UiColors.error, fontSize: 12), - ), + return Container( + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + color: UiColors.tagError, + borderRadius: BorderRadius.circular(12), + ), + child: Row( + children: [ + const Icon(UiIcons.warning, color: UiColors.error, size: 16), + const SizedBox(width: 8), + Expanded( + child: Text( + state.message, + style: const TextStyle(color: UiColors.error, fontSize: 12), ), - ], - ), + ), + ], ), ); } // Loaded State final ReportsSummary summary = (state as ReportsSummaryLoaded).summary; - final NumberFormat currencyFmt = NumberFormat.currency( - symbol: '\$', decimalDigits: 0); + final NumberFormat currencyFmt = + NumberFormat.currency(symbol: '\$', decimalDigits: 0); return GridView.count( + padding: const EdgeInsets.symmetric( + vertical: UiConstants.space6, + ), crossAxisCount: 2, shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), mainAxisSpacing: 12, crossAxisSpacing: 12, - childAspectRatio: 1.2, + childAspectRatio: 1.32, children: [ - // Total Hours + // Total Hour MetricCard( icon: UiIcons.clock, label: context.t.client_reports.metrics.total_hrs.label, @@ -125,8 +123,7 @@ class MetricsGrid extends StatelessWidget { icon: UiIcons.clock, label: context.t.client_reports.metrics.avg_fill_time.label, value: '${summary.avgFillTimeHours.toStringAsFixed(1)} hrs', - badgeText: - context.t.client_reports.metrics.avg_fill_time.badge, + badgeText: context.t.client_reports.metrics.avg_fill_time.badge, badgeColor: UiColors.tagInProgress, badgeTextColor: UiColors.textLink, iconColor: UiColors.iconActive, diff --git a/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/quick_reports_section.dart b/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/quick_reports_section.dart index dc716437..5ca80eb6 100644 --- a/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/quick_reports_section.dart +++ b/apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/quick_reports_section.dart @@ -25,9 +25,12 @@ class QuickReportsSection extends StatelessWidget { context.t.client_reports.quick_reports.title, style: UiTypography.headline2m.textPrimary, ), - + // Quick Reports Grid GridView.count( + padding: const EdgeInsets.symmetric( + vertical: UiConstants.space6, + ), crossAxisCount: 2, shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), @@ -78,8 +81,7 @@ class QuickReportsSection extends StatelessWidget { // Performance Reports ReportCard( icon: UiIcons.chart, - name: - context.t.client_reports.quick_reports.cards.performance, + name: context.t.client_reports.quick_reports.cards.performance, iconBgColor: UiColors.tagInProgress, iconColor: UiColors.primary, route: './performance', @@ -90,4 +92,3 @@ class QuickReportsSection extends StatelessWidget { ); } } -