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

UI Phase 2 (L0): shared layout primitives + chrome standardization

Browse Source 
Extract four shared layout widgets from the best existing implementations and
adopt them across list/overview screens, deleting duplicated inline code.
Layout/consistency only — no behavior change.

New primitives (lib/widgets/):
- app_section_header.dart  — AppSectionHeader (azure accent bar + uppercase
  telemetry label; promoted from the dashboard's _sectionTitle).
- app_metric_card.dart     — AppMetricCard (uppercase label + mono value on a
  flat hairline surface; unifies KPI/stat tiles).
- app_status_summary.dart  — AppStatusSummaryRow/Item/Chip (dot + count + label,
  selectable; semantic AppStatusColors).
- app_filter_bar.dart      — AppFilterBar (responsive filter-row chrome).

Adopted / de-duplicated:
- Dashboard: _MetricCard now wraps AppMetricCard; section titles use
  AppSectionHeader (removed local _sectionTitle).
- Tickets / Tasks / ISR: three separate summary-chip implementations
  (_StatusSummaryCard x2, _SummaryChip) collapsed into AppStatusSummaryRow.
- Network Map overview: Sites/Devices tiles -> AppMetricCard (removed local
  _SummaryCard).
- Workforce: "Duty Schedules" header -> AppSectionHeader with trailing chip.

Verified: flutter analyze lib clean; flutter build web green; visual QA (tickets
+ ISR summary chips) in dark.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Marc Rejohn Castillano
2026-09-26 15:42:26 +08:00
parent 57377b1b21
commit 9f764150a2
10 changed files with 428 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/dashboard/dashboard_screen.dart
+8 -78
View File
@@ -40,7 +40,9 @@ import 'package:skeletonizer/skeletonizer.dart';
import '../../theme/app_surfaces.dart';
import '../../theme/app_status_colors.dart';
import '../../widgets/mono_text.dart';
import '../../widgets/app_metric_card.dart';
import '../../widgets/app_page_header.dart';
import '../../widgets/app_section_header.dart';
import '../../utils/app_time.dart';
class DashboardMetrics {
@@ -673,13 +675,13 @@ class _DashboardScreenState extends State<DashboardScreen> {
builder: (context, constraints) {
final sections = <Widget>[
const SizedBox(height: 16),
_sectionTitle(context, 'IT Staff Pulse'),
const AppSectionHeader('IT Staff Pulse'),
const _StaffTable(),
const SizedBox(height: 12),
_sectionTitle(context, 'Team Activity'),
const AppSectionHeader('Team Activity'),
const _StaffActivityChart(),
const SizedBox(height: 20),
_sectionTitle(context, 'Core Daily KPIs'),
const AppSectionHeader('Core Daily KPIs'),
_cardGrid(context, [
_MetricCard(
title: 'New tickets today',
@@ -695,7 +697,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
),
]),
const SizedBox(height: 20),
_sectionTitle(context, 'Task Flow'),
const AppSectionHeader('Task Flow'),
_cardGrid(context, [
_MetricCard(
title: 'Tasks created',
@@ -713,7 +715,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
),
]),
const SizedBox(height: 20),
_sectionTitle(context, 'TAT / Response'),
const AppSectionHeader('TAT / Response'),
_cardGrid(context, [
_MetricCard(
title: 'Avg response',
@@ -776,33 +778,6 @@ class _DashboardScreenState extends State<DashboardScreen> {
);
}
Widget _sectionTitle(BuildContext context, String title) {
final cs = Theme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
children: [
Container(
width: 3,
height: 16,
decoration: BoxDecoration(
color: cs.primary,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(width: 10),
Text(
title.toUpperCase(),
style: Theme.of(context).textTheme.labelLarge?.copyWith(
fontWeight: FontWeight.w700,
letterSpacing: 0.8,
color: cs.onSurface,
),
),
],
),
);
}
Widget _cardGrid(BuildContext context, List<Widget> cards) {
return LayoutBuilder(
@@ -921,7 +896,6 @@ class _MetricCard extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final cs = Theme.of(context).colorScheme;
// Only watch the single string value for this card so unrelated metric
// updates don't rebuild the whole card. This makes updates feel much
// smoother and avoids full-page refreshes.
@@ -934,51 +908,7 @@ class _MetricCard extends ConsumerWidget {
),
),
);
final isDark = cs.brightness == Brightness.dark;
return AnimatedContainer(
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutCubic,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: isDark ? cs.surfaceContainer : cs.surfaceContainerLowest,
borderRadius: BorderRadius.circular(
AppSurfaces.of(context).cardRadius,
),
border: Border.all(color: cs.outlineVariant),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title.toUpperCase(),
style: Theme.of(context).textTheme.labelMedium?.copyWith(
fontWeight: FontWeight.w600,
letterSpacing: 0.6,
color: cs.onSurfaceVariant,
),
),
const SizedBox(height: 12),
// Animate only the metric text (not the whole card) for a
// subtle, smooth update.
AnimatedSwitcher(
duration: const Duration(milliseconds: 400),
switchInCurve: Curves.easeOutCubic,
switchOutCurve: Curves.easeInCubic,
transitionBuilder: (child, anim) =>
FadeTransition(opacity: anim, child: child),
child: MonoText(
value,
key: ValueKey(value),
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700,
color: cs.onSurface,
),
),
),
],
),
);
return AppMetricCard(title: title, value: value);
}
}
lib/screens/it_service_requests/it_service_requests_list_screen.dart
+32 -83
View File
@@ -18,6 +18,7 @@ import '../../theme/m3_motion.dart';
import '../../utils/app_time.dart';
import '../../utils/snackbar.dart';
import '../../theme/app_status_colors.dart';
import '../../widgets/app_status_summary.dart';
import '../../widgets/m3_card.dart';
import '../../widgets/mono_text.dart';
import '../../widgets/reconnect_overlay.dart';
@@ -535,8 +536,6 @@ class _StatusSummaryRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
final status = AppStatusColors.of(context);
final pending = requests
.where((r) => r.status == ItServiceRequestStatus.pendingApproval)
.length;
@@ -554,88 +553,38 @@ class _StatusSummaryRow extends StatelessWidget {
.where((r) => r.status == ItServiceRequestStatus.completed)
.length;
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
_SummaryChip(
label: 'Pending',
count: pending,
color: status.warning.color,
selected: selectedStatus == ItServiceRequestStatus.pendingApproval,
onTap: () => onStatusTap(ItServiceRequestStatus.pendingApproval),
),
const SizedBox(width: 8),
_SummaryChip(
label: 'Scheduled',
count: scheduled,
color: status.info.color,
selected: selectedStatus == ItServiceRequestStatus.scheduled,
onTap: () => onStatusTap(ItServiceRequestStatus.scheduled),
),
const SizedBox(width: 8),
_SummaryChip(
label: 'In Progress',
count: inProgress,
color: cs.secondary,
selected: selectedStatus == ItServiceRequestStatus.inProgress,
onTap: () => onStatusTap(ItServiceRequestStatus.inProgress),
),
const SizedBox(width: 8),
_SummaryChip(
label: 'Completed',
count: completed,
color: status.success.color,
selected: selectedStatus == ItServiceRequestStatus.completed,
onTap: () => onStatusTap(ItServiceRequestStatus.completed),
),
],
),
);
}
}
class _SummaryChip extends StatelessWidget {
const _SummaryChip({
required this.label,
required this.count,
required this.color,
required this.selected,
required this.onTap,
});
final String label;
final int count;
final Color color;
final bool selected;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return M3Card.filled(
onTap: onTap,
color: selected
? color.withValues(alpha: 0.2)
: Theme.of(context).colorScheme.surfaceContainerHighest,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
count.toString(),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
color: color,
),
),
const SizedBox(width: 8),
Text(label, style: Theme.of(context).textTheme.bodySmall),
],
return AppStatusSummaryRow(
padding: const EdgeInsets.symmetric(vertical: 8),
items: [
AppStatusSummaryItem(
label: 'Pending',
count: pending,
kind: StatusKind.warning,
selected: selectedStatus == ItServiceRequestStatus.pendingApproval,
onTap: () => onStatusTap(ItServiceRequestStatus.pendingApproval),
),
),
AppStatusSummaryItem(
label: 'Scheduled',
count: scheduled,
kind: StatusKind.neutral,
selected: selectedStatus == ItServiceRequestStatus.scheduled,
onTap: () => onStatusTap(ItServiceRequestStatus.scheduled),
),
AppStatusSummaryItem(
label: 'In Progress',
count: inProgress,
kind: StatusKind.info,
selected: selectedStatus == ItServiceRequestStatus.inProgress,
onTap: () => onStatusTap(ItServiceRequestStatus.inProgress),
),
AppStatusSummaryItem(
label: 'Completed',
count: completed,
kind: StatusKind.success,
selected: selectedStatus == ItServiceRequestStatus.completed,
onTap: () => onStatusTap(ItServiceRequestStatus.completed),
),
],
);
}
}
lib/screens/network_map/network_map_overview_screen.dart
+18 -34
View File
@@ -7,6 +7,7 @@ import '../../providers/network_map/network_devices_provider.dart';
import '../../providers/network_map/network_sites_provider.dart';
import '../../providers/profile_provider.dart';
import '../../utils/snackbar.dart';
import '../../widgets/app_metric_card.dart';
import '../../widgets/app_page_header.dart';
import '../../widgets/app_state_view.dart';
import '../../widgets/responsive_body.dart';
@@ -167,41 +168,24 @@ class _SummaryRow extends StatelessWidget {
Widget build(BuildContext context) {
return Row(
children: [
Expanded(child: _SummaryCard(label: 'Sites', value: siteCount.toString(), icon: Icons.location_city_outlined)),
const SizedBox(width: 12),
Expanded(child: _SummaryCard(label: 'Devices', value: deviceCount.toString(), icon: Icons.devices_outlined)),
],
);
}
}
class _SummaryCard extends StatelessWidget {
const _SummaryCard({required this.label, required this.value, required this.icon});
final String label;
final String value;
final IconData icon;
@override
Widget build(BuildContext context) {
final tt = Theme.of(context).textTheme;
final cs = Theme.of(context).colorScheme;
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: Row(
children: [
Icon(icon, color: cs.primary),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant)),
Text(value, style: tt.headlineSmall?.copyWith(fontWeight: FontWeight.w700)),
],
),
],
Expanded(
child: AppMetricCard(
title: 'Sites',
value: siteCount.toString(),
icon: Icons.location_city_outlined,
animateValue: false,
),
),
),
const SizedBox(width: 12),
Expanded(
child: AppMetricCard(
title: 'Devices',
value: deviceCount.toString(),
icon: Icons.devices_outlined,
animateValue: false,
),
),
],
);
}
}
lib/screens/tasks/tasks_list_screen.dart
+10 -57
View File
@@ -30,6 +30,7 @@ import '../../widgets/tasq_adaptive_list.dart';
import '../../widgets/typing_dots.dart';
import '../../theme/app_surfaces.dart';
import '../../theme/app_status_colors.dart';
import '../../widgets/app_status_summary.dart';
import '../../utils/snackbar.dart';
import '../../widgets/app_breakpoints.dart';
import '../../widgets/app_page_header.dart';
@@ -1329,63 +1330,15 @@ class _StatusSummaryRow extends StatelessWidget {
final entries = counts.entries.toList()
..sort((a, b) => a.key.compareTo(b.key));
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (int i = 0; i < entries.length; i++) ...[
if (i > 0) const SizedBox(width: 8),
_StatusSummaryCard(
status: entries[i].key,
count: entries[i].value,
),
],
],
),
);
}
}
class _StatusSummaryCard extends StatelessWidget {
const _StatusSummaryCard({required this.status, required this.count});
final String status;
final int count;
@override
Widget build(BuildContext context) {
final swatch = AppStatusColors.of(context).byKind(_taskStatusKind(status));
final background = swatch.container;
final foreground = swatch.onContainer;
final label = status.replaceAll('_', ' ').toUpperCase();
return Material(
color: background,
borderRadius: BorderRadius.circular(AppSurfaces.of(context).chipRadius),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: foreground,
fontWeight: FontWeight.w600,
letterSpacing: 0.4,
),
),
const SizedBox(width: 6),
Text(
count.toString(),
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: foreground,
fontWeight: FontWeight.w700,
),
),
],
),
),
return AppStatusSummaryRow(
items: [
for (final e in entries)
AppStatusSummaryItem(
label: e.key.replaceAll('_', ' '),
count: e.value,
kind: _taskStatusKind(e.key),
),
],
);
}
}
lib/screens/tickets/tickets_list_screen.dart
+10 -57
View File
@@ -28,6 +28,7 @@ import '../../utils/snackbar.dart';
import '../../widgets/app_breakpoints.dart';
import '../../widgets/app_page_header.dart';
import '../../widgets/app_state_view.dart';
import '../../widgets/app_status_summary.dart';
import '../../widgets/sync_pending_badge.dart';
class TicketsListScreen extends ConsumerStatefulWidget {
@@ -715,63 +716,15 @@ class _StatusSummaryRow extends StatelessWidget {
final entries = counts.entries.toList()
..sort((a, b) => a.key.compareTo(b.key));
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (int i = 0; i < entries.length; i++) ...[
if (i > 0) const SizedBox(width: 8),
_StatusSummaryCard(
status: entries[i].key,
count: entries[i].value,
),
],
],
),
);
}
}
class _StatusSummaryCard extends StatelessWidget {
const _StatusSummaryCard({required this.status, required this.count});
final String status;
final int count;
@override
Widget build(BuildContext context) {
final swatch = AppStatusColors.of(context).byKind(_ticketStatusKind(status));
final background = swatch.container;
final foreground = swatch.onContainer;
final label = status.replaceAll('_', ' ').toUpperCase();
return Material(
color: background,
borderRadius: BorderRadius.circular(AppSurfaces.of(context).chipRadius),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: foreground,
fontWeight: FontWeight.w600,
letterSpacing: 0.4,
),
),
const SizedBox(width: 6),
Text(
count.toString(),
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: foreground,
fontWeight: FontWeight.w700,
),
),
],
),
),
return AppStatusSummaryRow(
items: [
for (final e in entries)
AppStatusSummaryItem(
label: e.key.replaceAll('_', ' '),
count: e.value,
kind: _ticketStatusKind(e.key),
),
],
);
}
}
lib/screens/workforce/workforce_screen.dart
+10 -16
View File
@@ -16,6 +16,7 @@ import '../../providers/chat_provider.dart';
import '../../providers/ramadan_provider.dart';
import '../../providers/notifications_provider.dart';
import '../../widgets/app_page_header.dart';
import '../../widgets/app_section_header.dart';
import '../../widgets/app_state_view.dart';
import '../../widgets/responsive_body.dart';
import '../../theme/app_surfaces.dart';
@@ -126,22 +127,15 @@ class _SchedulePanel extends ConsumerWidget {
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: Row(
children: [
Text(
'Duty Schedules',
style: Theme.of(
context,
).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w700),
),
const Spacer(),
FilterChip(
label: const Text('Show past'),
selected: showPast,
onSelected: (v) =>
ref.read(showPastSchedulesProvider.notifier).state = v,
),
],
child: AppSectionHeader(
'Duty Schedules',
padding: EdgeInsets.zero,
trailing: FilterChip(
label: const Text('Show past'),
selected: showPast,
onSelected: (v) =>
ref.read(showPastSchedulesProvider.notifier).state = v,
),
),
),
const SizedBox(height: 4),