Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Refine reports page UI by updating metric card styling, grid padding, and overall spacing.

Browse Source
This commit is contained in:
Achintha Isuru
2026-02-23 13:30:23 -05:00
parent f453f8aadd
commit 0ff2268959
4 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/mobile/packages/features/client/reports/lib/src/presentation/pages/reports_page.dart
View File

@@ -102,12 +102,12 @@ class _ReportsPageState extends State<ReportsPage>
// Key Metrics Grid // Key Metrics Grid
MetricsGrid(), MetricsGrid(),
SizedBox(height: 24), SizedBox(height: 16),
// Quick Reports Section // Quick Reports Section
QuickReportsSection(), QuickReportsSection(),
SizedBox(height: 40), SizedBox(height: 88),
], ],
), ),
), ),
@@ -118,4 +118,3 @@ class _ReportsPageState extends State<ReportsPage>
); );
} }
} }

30
apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metric_card.dart
View File

@@ -6,7 +6,6 @@ import 'package:flutter/material.dart';
/// Shows a metric with an icon, label, value, and a badge with contextual /// Shows a metric with an icon, label, value, and a badge with contextual
/// information. Used in the metrics grid of the reports page. /// information. Used in the metrics grid of the reports page.
class MetricCard extends StatelessWidget { class MetricCard extends StatelessWidget {
const MetricCard({ const MetricCard({
super.key, super.key,
required this.icon, required this.icon,
@@ -17,6 +16,7 @@ class MetricCard extends StatelessWidget {
required this.badgeTextColor, required this.badgeTextColor,
required this.iconColor, required this.iconColor,
}); });
/// The icon to display for this metric. /// The icon to display for this metric.
final IconData icon; final IconData icon;
@@ -44,14 +44,11 @@ class MetricCard extends StatelessWidget {
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
decoration: BoxDecoration( decoration: BoxDecoration(
color: UiColors.white, color: UiColors.white,
borderRadius: BorderRadius.circular(12), borderRadius: UiConstants.radiusLg,
boxShadow: <BoxShadow>[ border: Border.all(
BoxShadow( color: UiColors.border,
color: UiColors.black.withOpacity(0.06), width: 0.5,
blurRadius: 4, ),
offset: const Offset(0, 2),
),
],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -65,10 +62,7 @@ class MetricCard extends StatelessWidget {
Expanded( Expanded(
child: Text( child: Text(
label, label,
style: const TextStyle( style: UiTypography.body2r,
fontSize: 12,
color: UiColors.textSecondary,
),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
@@ -92,13 +86,15 @@ class MetricCard extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration( decoration: BoxDecoration(
color: badgeColor, color: badgeColor,
borderRadius: BorderRadius.circular(10), borderRadius: UiConstants.radiusMd,
border: Border.all(
color: badgeTextColor,
width: 0.25,
),
), ),
child: Text( child: Text(
badgeText, badgeText,
style: TextStyle( style: UiTypography.footnote2m.copyWith(
fontSize: 10,
fontWeight: FontWeight.w500,
color: badgeTextColor, color: badgeTextColor,
), ),
), ),

53
apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/metrics_grid.dart
View File

@@ -5,7 +5,7 @@ import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.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'; import 'metric_card.dart';
@@ -37,46 +37,44 @@ class MetricsGrid extends StatelessWidget {
// Error State // Error State
if (state is ReportsSummaryError) { if (state is ReportsSummaryError) {
return Padding( return Container(
padding: const EdgeInsets.symmetric(vertical: 16), padding: const EdgeInsets.all(16),
child: Container( decoration: BoxDecoration(
padding: const EdgeInsets.all(16), color: UiColors.tagError,
decoration: BoxDecoration( borderRadius: BorderRadius.circular(12),
color: UiColors.tagError, ),
borderRadius: BorderRadius.circular(12), child: Row(
), children: <Widget>[
child: Row( const Icon(UiIcons.warning, color: UiColors.error, size: 16),
children: <Widget>[ const SizedBox(width: 8),
const Icon(UiIcons.warning, Expanded(
color: UiColors.error, size: 16), child: Text(
const SizedBox(width: 8), state.message,
Expanded( style: const TextStyle(color: UiColors.error, fontSize: 12),
child: Text(
state.message,
style: const TextStyle(
color: UiColors.error, fontSize: 12),
),
), ),
], ),
), ],
), ),
); );
} }
// Loaded State // Loaded State
final ReportsSummary summary = (state as ReportsSummaryLoaded).summary; final ReportsSummary summary = (state as ReportsSummaryLoaded).summary;
final NumberFormat currencyFmt = NumberFormat.currency( final NumberFormat currencyFmt =
symbol: '\$', decimalDigits: 0); NumberFormat.currency(symbol: '\$', decimalDigits: 0);
return GridView.count( return GridView.count(
padding: const EdgeInsets.symmetric(
vertical: UiConstants.space6,
),
crossAxisCount: 2, crossAxisCount: 2,
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
mainAxisSpacing: 12, mainAxisSpacing: 12,
crossAxisSpacing: 12, crossAxisSpacing: 12,
childAspectRatio: 1.2, childAspectRatio: 1.32,
children: <Widget>[ children: <Widget>[
// Total Hours // Total Hour
MetricCard( MetricCard(
icon: UiIcons.clock, icon: UiIcons.clock,
label: context.t.client_reports.metrics.total_hrs.label, label: context.t.client_reports.metrics.total_hrs.label,
@@ -125,8 +123,7 @@ class MetricsGrid extends StatelessWidget {
icon: UiIcons.clock, icon: UiIcons.clock,
label: context.t.client_reports.metrics.avg_fill_time.label, label: context.t.client_reports.metrics.avg_fill_time.label,
value: '${summary.avgFillTimeHours.toStringAsFixed(1)} hrs', value: '${summary.avgFillTimeHours.toStringAsFixed(1)} hrs',
badgeText: badgeText: context.t.client_reports.metrics.avg_fill_time.badge,
context.t.client_reports.metrics.avg_fill_time.badge,
badgeColor: UiColors.tagInProgress, badgeColor: UiColors.tagInProgress,
badgeTextColor: UiColors.textLink, badgeTextColor: UiColors.textLink,
iconColor: UiColors.iconActive, iconColor: UiColors.iconActive,

7
apps/mobile/packages/features/client/reports/lib/src/presentation/widgets/reports_page/quick_reports_section.dart
View File

@@ -28,6 +28,9 @@ class QuickReportsSection extends StatelessWidget {
// Quick Reports Grid // Quick Reports Grid
GridView.count( GridView.count(
padding: const EdgeInsets.symmetric(
vertical: UiConstants.space6,
),
crossAxisCount: 2, crossAxisCount: 2,
shrinkWrap: true, shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(), physics: const NeverScrollableScrollPhysics(),
@@ -78,8 +81,7 @@ class QuickReportsSection extends StatelessWidget {
// Performance Reports // Performance Reports
ReportCard( ReportCard(
icon: UiIcons.chart, icon: UiIcons.chart,
name: name: context.t.client_reports.quick_reports.cards.performance,
context.t.client_reports.quick_reports.cards.performance,
iconBgColor: UiColors.tagInProgress, iconBgColor: UiColors.tagInProgress,
iconColor: UiColors.primary, iconColor: UiColors.primary,
route: './performance', route: './performance',
@@ -90,4 +92,3 @@ class QuickReportsSection extends StatelessWidget {
); );
} }
} }