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
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<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
/// 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>[
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,
),
),

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_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: <Widget>[
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: <Widget>[
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: <Widget>[
// 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,

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

@@ -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 {
);
}
}