ihompadmin/tasq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

UI Phase 2 (L7): tighten Reports chart grid layout

Browse Source 
Reduce dead whitespace and align the Reports charts to the cyber card language.
Layout only — charts, data and PDF export untouched.

- report_card_wrapper.dart: flat tonal fill + hairline outline + token radius
  (was surfaceContainerLow + hard 16 radius, no border); uppercase telemetry
  card title to match section headers.
- status_charts.dart / request_distribution_charts.dart: donut charts now use a
  fixed 150px donut with an Expanded legend beside it (was an Expanded donut +
  cramped right legend, leaving a large central gap); card height 220 -> 180.

Verified: flutter analyze lib clean; flutter build web green; visual QA (Reports)
in dark.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Marc Rejohn Castillano
2026-09-26 16:06:32 +08:00
parent 9f764150a2
commit ab5d385325
3 changed files with 105 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/reports/widgets/report_card_wrapper.dart
+21 -5
View File
@@ -1,6 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:skeletonizer/skeletonizer.dart'; import 'package:skeletonizer/skeletonizer.dart';
import '../../../theme/app_surfaces.dart';
/// Wraps each report chart widget in a themed Card with a title, loading /// Wraps each report chart widget in a themed Card with a title, loading
/// skeleton and error state handling. Exposes a [GlobalKey] on the inner /// skeleton and error state handling. Exposes a [GlobalKey] on the inner
/// [RepaintBoundary] so the PDF exporter can capture the rendered chart /// [RepaintBoundary] so the PDF exporter can capture the rendered chart
@@ -74,15 +76,25 @@ class ReportCardWrapper extends StatelessWidget {
body = child; body = child;
} }
final radius = AppSurfaces.of(context).cardRadius;
final isDark = colors.brightness == Brightness.dark;
final cardContent = Column( final cardContent = Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 4), padding: const EdgeInsets.fromLTRB(16, 12, 16, 10),
child: Text(title, style: text.titleSmall), child: Text(
title.toUpperCase(),
style: text.labelMedium?.copyWith(
fontWeight: FontWeight.w700,
letterSpacing: 0.6,
color: colors.onSurfaceVariant,
),
),
), ),
const Divider(height: 1), Divider(height: 1, color: colors.outlineVariant),
Padding( Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: height != null ? SizedBox(height: height, child: body) : body, child: height != null ? SizedBox(height: height, child: body) : body,
@@ -93,8 +105,12 @@ class ReportCardWrapper extends StatelessWidget {
final card = Card( final card = Card(
elevation: 0, elevation: 0,
shadowColor: Colors.transparent, shadowColor: Colors.transparent,
color: colors.surfaceContainerLow, surfaceTintColor: Colors.transparent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), color: isDark ? colors.surfaceContainer : colors.surfaceContainerLowest,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius),
side: BorderSide(color: colors.outlineVariant),
),
child: cardContent, child: cardContent,
); );
lib/screens/reports/widgets/request_distribution_charts.dart
+42 -36
View File
@@ -77,10 +77,11 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
return ReportCardWrapper( return ReportCardWrapper(
title: 'Request Type Distribution', title: 'Request Type Distribution',
repaintBoundaryKey: widget.repaintKey, repaintBoundaryKey: widget.repaintKey,
height: 220, height: 180,
child: Row( child: Row(
children: [ children: [
Expanded( SizedBox(
width: 150,
child: PieChart( child: PieChart(
PieChartData( PieChartData(
pieTouchData: PieTouchData( pieTouchData: PieTouchData(
@@ -116,22 +117,24 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
), ),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 16),
Column( Expanded(
mainAxisAlignment: MainAxisAlignment.center, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center,
children: data.asMap().entries.map((entry) { crossAxisAlignment: CrossAxisAlignment.start,
final i = entry.key; children: data.asMap().entries.map((entry) {
final e = entry.value; final i = entry.key;
final isTouched = i == _touchedIndex; final e = entry.value;
return _HoverLegendItem( final isTouched = i == _touchedIndex;
color: colorFor(i, e.name), return _HoverLegendItem(
label: e.name, color: colorFor(i, e.name),
value: label: e.name,
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)', value:
isTouched: isTouched, '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
); isTouched: isTouched,
}).toList(), );
}).toList(),
),
), ),
], ],
), ),
@@ -208,10 +211,11 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
return ReportCardWrapper( return ReportCardWrapper(
title: 'Request Category Distribution', title: 'Request Category Distribution',
repaintBoundaryKey: widget.repaintKey, repaintBoundaryKey: widget.repaintKey,
height: 220, height: 180,
child: Row( child: Row(
children: [ children: [
Expanded( SizedBox(
width: 150,
child: PieChart( child: PieChart(
PieChartData( PieChartData(
pieTouchData: PieTouchData( pieTouchData: PieTouchData(
@@ -247,22 +251,24 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
), ),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 16),
Column( Expanded(
mainAxisAlignment: MainAxisAlignment.center, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center,
children: data.asMap().entries.map((entry) { crossAxisAlignment: CrossAxisAlignment.start,
final i = entry.key; children: data.asMap().entries.map((entry) {
final e = entry.value; final i = entry.key;
final isTouched = i == _touchedIndex; final e = entry.value;
return _HoverLegendItem( final isTouched = i == _touchedIndex;
color: colorFor(i, e.name), return _HoverLegendItem(
label: e.name, color: colorFor(i, e.name),
value: label: e.name,
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)', value:
isTouched: isTouched, '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
); isTouched: isTouched,
}).toList(), );
}).toList(),
),
), ),
], ],
), ),
lib/screens/reports/widgets/status_charts.dart
+42 -36
View File
@@ -52,10 +52,11 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
return ReportCardWrapper( return ReportCardWrapper(
title: 'Tickets by Status', title: 'Tickets by Status',
repaintBoundaryKey: widget.repaintKey, repaintBoundaryKey: widget.repaintKey,
height: 220, height: 180,
child: Row( child: Row(
children: [ children: [
Expanded( SizedBox(
width: 150,
child: PieChart( child: PieChart(
PieChartData( PieChartData(
pieTouchData: PieTouchData( pieTouchData: PieTouchData(
@@ -92,22 +93,24 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
), ),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 16),
Column( Expanded(
mainAxisAlignment: MainAxisAlignment.center, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center,
children: data.asMap().entries.map((entry) { crossAxisAlignment: CrossAxisAlignment.start,
final i = entry.key; children: data.asMap().entries.map((entry) {
final e = entry.value; final i = entry.key;
final isTouched = i == _touchedIndex; final e = entry.value;
return _LegendItem( final isTouched = i == _touchedIndex;
color: _ticketStatusColor(context, e.status), return _LegendItem(
label: _capitalize(e.status), color: _ticketStatusColor(context, e.status),
value: label: _capitalize(e.status),
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)', value:
isTouched: isTouched, '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
); isTouched: isTouched,
}).toList(), );
}).toList(),
),
), ),
], ],
), ),
@@ -178,10 +181,11 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
return ReportCardWrapper( return ReportCardWrapper(
title: 'Tasks by Status', title: 'Tasks by Status',
repaintBoundaryKey: widget.repaintKey, repaintBoundaryKey: widget.repaintKey,
height: 220, height: 180,
child: Row( child: Row(
children: [ children: [
Expanded( SizedBox(
width: 150,
child: PieChart( child: PieChart(
PieChartData( PieChartData(
pieTouchData: PieTouchData( pieTouchData: PieTouchData(
@@ -218,22 +222,24 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
), ),
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 16),
Column( Expanded(
mainAxisAlignment: MainAxisAlignment.center, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center,
children: data.asMap().entries.map((entry) { crossAxisAlignment: CrossAxisAlignment.start,
final i = entry.key; children: data.asMap().entries.map((entry) {
final e = entry.value; final i = entry.key;
final isTouched = i == _touchedIndex; final e = entry.value;
return _LegendItem( final isTouched = i == _touchedIndex;
color: _taskStatusColor(context, e.status), return _LegendItem(
label: _formatTaskStatus(e.status), color: _taskStatusColor(context, e.status),
value: label: _formatTaskStatus(e.status),
'${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)', value:
isTouched: isTouched, '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
); isTouched: isTouched,
}).toList(), );
}).toList(),
),
), ),
], ],
), ),