feat(programmer): admin monitor tab + drill-down
- Add isStrictAdminProvider (role == 'admin' only) - Add programmer_tasks_tabs.dart with ProgrammerTasksTab enum, programmerTasksTabsFor, parseProgrammerTasksTab, programmerTasksTabLabel - Make ProgrammerTasksListScreen role-aware via initialTab param and programmerTasksTabsFor; admin sees Monitor/Mine/All tabs - Add MonitorTab with AppStatusSummaryRow + responsive programmer grid (1/2/3 cols) + HelpPanel side/bottom - Add ProgrammerMonitorCard with state pills (Working/Paused/Idle/On leave/Pass slip) - Add HelpPanel ConsumerStatefulWidget with day stepper and help-edge rows - Add ProgrammerDrillDownScreen (/programmer-tasks/programmers/:userId); non-admins see lock empty view - Router: pass tab query param; add programmers/:userId before :id route - Tests: 7/7 pass; analyze: 0 new issues Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import '../../../providers/programmer_day_data_provider.dart';
|
||||
import '../../../providers/programmer_tasks_provider.dart';
|
||||
import '../../../widgets/app_section_header.dart';
|
||||
import 'monitor_model.dart';
|
||||
|
||||
final _dateFmt = DateFormat('EEE, MMM d');
|
||||
|
||||
/// Side panel that shows "who's helping whom" for a selected day, with a
|
||||
/// ← / → stepper that cannot advance past today.
|
||||
///
|
||||
/// Uses a [ValueNotifier<DateTime>] initialized to [todayKeyProvider] so the
|
||||
/// displayed day is independent of the parent; the family provider is
|
||||
/// re-watched whenever the day changes.
|
||||
class HelpPanel extends ConsumerStatefulWidget {
|
||||
const HelpPanel({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<HelpPanel> createState() => _HelpPanelState();
|
||||
}
|
||||
|
||||
class _HelpPanelState extends ConsumerState<HelpPanel> {
|
||||
late final ValueNotifier<DateTime> _day;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
final today = ref.read(todayKeyProvider);
|
||||
_day = ValueNotifier(today);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_day.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _stepDay(int delta) {
|
||||
final today = ref.read(todayKeyProvider);
|
||||
final next = _day.value.add(Duration(days: delta));
|
||||
if (delta > 0 && !next.isBefore(today) && next != today) return;
|
||||
if (delta > 0 && next.isAfter(today)) return;
|
||||
setState(() {
|
||||
_day.value = next;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final tt = Theme.of(context).textTheme;
|
||||
final today = ref.watch(todayKeyProvider);
|
||||
final tasksAsync = ref.watch(programmerTasksProvider);
|
||||
final dayDataAsync = ref.watch(programmerDayDataProvider(_day.value));
|
||||
|
||||
final isAtToday = !_day.value.isBefore(today);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const AppSectionHeader("Who's helping whom"),
|
||||
// Day stepper
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.chevron_left),
|
||||
onPressed: () => _stepDay(-1),
|
||||
tooltip: 'Previous day',
|
||||
),
|
||||
Text(
|
||||
_dateFmt.format(_day.value),
|
||||
style: tt.labelMedium?.copyWith(color: cs.onSurface),
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.chevron_right,
|
||||
color: isAtToday ? cs.onSurface.withValues(alpha: 0.3) : null,
|
||||
),
|
||||
onPressed: isAtToday ? null : () => _stepDay(1),
|
||||
tooltip: 'Next day',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
// Help edges
|
||||
Expanded(
|
||||
child: Builder(
|
||||
builder: (context) {
|
||||
if (dayDataAsync.isLoading && !dayDataAsync.hasValue) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
|
||||
final dayData = dayDataAsync.valueOrNull;
|
||||
if (dayData == null) {
|
||||
return _emptyText(
|
||||
'No data for this day.',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
);
|
||||
}
|
||||
|
||||
final tasks = tasksAsync.valueOrNull ?? [];
|
||||
final taskById = {for (final t in tasks) t.id: t};
|
||||
|
||||
final edges = buildHelpEdges(
|
||||
workLogs: dayData.workLogs,
|
||||
taskById: taskById,
|
||||
day: _day.value,
|
||||
);
|
||||
|
||||
if (edges.isEmpty) {
|
||||
return _emptyText(
|
||||
'No help logged this day.',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.separated(
|
||||
itemCount: edges.length,
|
||||
separatorBuilder: (_, _) => const Divider(height: 1),
|
||||
itemBuilder: (context, i) {
|
||||
final e = edges[i];
|
||||
final helperName = e.helperId;
|
||||
final assigneeName = e.assigneeId;
|
||||
final timeStr = TimeOfDay.fromDateTime(e.at).format(context);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 6),
|
||||
child: Text(
|
||||
'$helperName → $assigneeName · ${e.taskTitle} · ${e.minutes}m · $timeStr',
|
||||
style: tt.bodySmall?.copyWith(color: cs.onSurface),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _emptyText(
|
||||
String msg, {
|
||||
required ColorScheme cs,
|
||||
required TextTheme tt,
|
||||
}) {
|
||||
return Center(
|
||||
child: Text(
|
||||
msg,
|
||||
style: tt.bodySmall?.copyWith(color: cs.onSurfaceVariant),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../../providers/leave_provider.dart';
|
||||
import '../../../providers/pass_slip_provider.dart';
|
||||
import '../../../providers/profile_provider.dart';
|
||||
import '../../../providers/programmer_day_data_provider.dart';
|
||||
import '../../../utils/app_time.dart';
|
||||
import '../../../utils/staff_presence.dart';
|
||||
import '../../../widgets/app_status_summary.dart';
|
||||
import '../../../theme/app_status_colors.dart';
|
||||
import 'help_panel.dart';
|
||||
import 'monitor_model.dart';
|
||||
import 'programmer_monitor_card.dart';
|
||||
|
||||
/// Summary row + programmer grid + help panel for the Monitor tab.
|
||||
class MonitorTab extends ConsumerWidget {
|
||||
const MonitorTab({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
// Tick every 30 s to keep durations fresh.
|
||||
final now = ref.watch(clockTickerProvider).valueOrNull ?? AppTime.now();
|
||||
final todayKey = ref.watch(todayKeyProvider);
|
||||
final profilesAsync = ref.watch(profilesProvider);
|
||||
final dayDataAsync = ref.watch(programmerDayDataProvider(todayKey));
|
||||
final runStates = ref.watch(programmerRunStatesProvider);
|
||||
final leavesAsync = ref.watch(leavesProvider);
|
||||
final passSlipsAsync = ref.watch(passSlipsProvider);
|
||||
|
||||
final profiles = profilesAsync.valueOrNull ?? [];
|
||||
final programmerProfiles =
|
||||
profiles.where((p) => p.role == 'programmer').toList();
|
||||
final profileNames = <String, String>{
|
||||
for (final p in profiles) p.id: p.fullName,
|
||||
};
|
||||
|
||||
final leaves = leavesAsync.valueOrNull ?? [];
|
||||
final passSlips = passSlipsAsync.valueOrNull ?? [];
|
||||
final activeLeaves = activeLeaveByUser(leaves, now);
|
||||
final activePassSlips = activePassSlipByUser(passSlips);
|
||||
|
||||
if (dayDataAsync.isLoading && !dayDataAsync.hasValue) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
|
||||
final dayData = dayDataAsync.valueOrNull;
|
||||
|
||||
List<ProgrammerMonitorEntry> entries = [];
|
||||
if (dayData != null) {
|
||||
entries = buildMonitorEntries(
|
||||
programmers: programmerProfiles,
|
||||
today: dayData,
|
||||
runStates: runStates,
|
||||
leaves: activeLeaves,
|
||||
passSlips: activePassSlips,
|
||||
sheetStatusByUser: const {},
|
||||
projectNames: const {},
|
||||
profileNames: profileNames,
|
||||
now: now,
|
||||
);
|
||||
}
|
||||
|
||||
// Compute summary counts.
|
||||
var working = 0;
|
||||
var paused = 0;
|
||||
var idle = 0;
|
||||
var away = 0;
|
||||
for (final e in entries) {
|
||||
switch (e.state) {
|
||||
case MonitorState.working:
|
||||
working++;
|
||||
case MonitorState.paused:
|
||||
paused++;
|
||||
case MonitorState.idle:
|
||||
idle++;
|
||||
case MonitorState.onLeave:
|
||||
case MonitorState.passSlip:
|
||||
away++;
|
||||
}
|
||||
}
|
||||
|
||||
final summaryItems = [
|
||||
AppStatusSummaryItem(
|
||||
label: 'Working',
|
||||
count: working,
|
||||
kind: StatusKind.success,
|
||||
),
|
||||
AppStatusSummaryItem(
|
||||
label: 'Paused',
|
||||
count: paused,
|
||||
kind: StatusKind.warning,
|
||||
),
|
||||
AppStatusSummaryItem(
|
||||
label: 'Idle',
|
||||
count: idle,
|
||||
kind: StatusKind.neutral,
|
||||
),
|
||||
AppStatusSummaryItem(
|
||||
label: 'Away',
|
||||
count: away,
|
||||
kind: StatusKind.info,
|
||||
),
|
||||
];
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final width = constraints.maxWidth;
|
||||
// Help panel breakpoint: show side-by-side at >= 900.
|
||||
final sideBySide = width >= 900;
|
||||
|
||||
final grid = _ProgrammerGrid(
|
||||
entries: entries,
|
||||
width: sideBySide ? width - 320 : width,
|
||||
);
|
||||
|
||||
final body = sideBySide
|
||||
? Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(child: grid),
|
||||
const SizedBox(width: 12),
|
||||
SizedBox(
|
||||
width: 300,
|
||||
child: const HelpPanel(),
|
||||
),
|
||||
],
|
||||
)
|
||||
: Column(
|
||||
children: [
|
||||
grid,
|
||||
const SizedBox(height: 16),
|
||||
SizedBox(
|
||||
height: 340,
|
||||
child: const HelpPanel(),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
AppStatusSummaryRow(
|
||||
items: summaryItems,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: body,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ProgrammerGrid extends StatelessWidget {
|
||||
const _ProgrammerGrid({
|
||||
required this.entries,
|
||||
required this.width,
|
||||
});
|
||||
|
||||
final List<ProgrammerMonitorEntry> entries;
|
||||
final double width;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final crossAxisCount = width < 700
|
||||
? 1
|
||||
: width < 1100
|
||||
? 2
|
||||
: 3;
|
||||
|
||||
if (entries.isEmpty) {
|
||||
return const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(24),
|
||||
child: Text('No programmers found.'),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return GridView.builder(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: crossAxisCount,
|
||||
mainAxisSpacing: 10,
|
||||
crossAxisSpacing: 10,
|
||||
childAspectRatio: 2.4,
|
||||
),
|
||||
itemCount: entries.length,
|
||||
itemBuilder: (context, i) {
|
||||
final entry = entries[i];
|
||||
return ProgrammerMonitorCard(
|
||||
entry: entry,
|
||||
onTap: () =>
|
||||
context.go('/programmer-tasks/programmers/${entry.programmer.id}'),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../theme/app_status_colors.dart';
|
||||
import '../../../theme/app_surfaces.dart';
|
||||
import '../../../widgets/tech_chip.dart';
|
||||
import 'monitor_model.dart';
|
||||
|
||||
/// State pill label and colour for a [MonitorState].
|
||||
({String label, StatusKind kind}) _statePill(MonitorState state) {
|
||||
switch (state) {
|
||||
case MonitorState.working:
|
||||
return (label: 'Working', kind: StatusKind.success);
|
||||
case MonitorState.paused:
|
||||
return (label: 'Paused', kind: StatusKind.warning);
|
||||
case MonitorState.idle:
|
||||
return (label: 'Idle', kind: StatusKind.neutral);
|
||||
case MonitorState.onLeave:
|
||||
return (label: 'On leave', kind: StatusKind.info);
|
||||
case MonitorState.passSlip:
|
||||
return (label: 'Pass slip', kind: StatusKind.info);
|
||||
}
|
||||
}
|
||||
|
||||
String _fmtDuration(Duration d) {
|
||||
final h = d.inHours;
|
||||
final m = d.inMinutes.remainder(60);
|
||||
if (h > 0) return '${h}h ${m}m';
|
||||
return '${m}m';
|
||||
}
|
||||
|
||||
/// Card displayed in the Monitor tab for a single programmer.
|
||||
///
|
||||
/// Shows:
|
||||
/// - programmer name + state pill
|
||||
/// - current task title (if working)
|
||||
/// - running time on current task + total today
|
||||
/// - task counts (in-progress / paused / not-started)
|
||||
/// - help edges (Helped → / Helped by ←)
|
||||
class ProgrammerMonitorCard extends StatelessWidget {
|
||||
const ProgrammerMonitorCard({
|
||||
super.key,
|
||||
required this.entry,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final ProgrammerMonitorEntry entry;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final tt = Theme.of(context).textTheme;
|
||||
final surfaces = AppSurfaces.of(context);
|
||||
final pill = _statePill(entry.state);
|
||||
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(surfaces.cardRadius),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: cs.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(surfaces.cardRadius),
|
||||
border: Border.all(color: cs.outlineVariant),
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header: name + state pill
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
entry.programmer.fullName,
|
||||
style: tt.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: cs.onSurface,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
TechChip(
|
||||
pill.label,
|
||||
status: pill.kind,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Current task
|
||||
if (entry.currentTask != null) ...[
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
entry.currentTask!.title,
|
||||
style: tt.bodySmall?.copyWith(color: cs.onSurfaceVariant),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
|
||||
const SizedBox(height: 8),
|
||||
|
||||
// Time row
|
||||
Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
if (entry.state == MonitorState.working &&
|
||||
entry.currentTaskToday > Duration.zero)
|
||||
_InfoChip(
|
||||
label:
|
||||
'running ${_fmtDuration(entry.currentTaskToday)} today',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
_InfoChip(
|
||||
label: 'Today ${_fmtDuration(entry.todayTotal)}',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Task counts
|
||||
const SizedBox(height: 6),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
if (entry.inProgress > 0)
|
||||
_InfoChip(
|
||||
label: '${entry.inProgress} in-progress',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
if (entry.paused > 0)
|
||||
_InfoChip(
|
||||
label: '${entry.paused} paused',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
if (entry.notStarted > 0)
|
||||
_InfoChip(
|
||||
label: '${entry.notStarted} not started',
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Help edges
|
||||
if (entry.helped.isNotEmpty || entry.helpedBy.isNotEmpty) ...[
|
||||
const SizedBox(height: 8),
|
||||
for (final e in entry.helped)
|
||||
_HelpRow(
|
||||
prefix: 'Helped →',
|
||||
name: e.assigneeId,
|
||||
task: e.taskTitle,
|
||||
minutes: e.minutes,
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
for (final e in entry.helpedBy)
|
||||
_HelpRow(
|
||||
prefix: 'Helped by ←',
|
||||
name: e.helperId,
|
||||
task: e.taskTitle,
|
||||
minutes: e.minutes,
|
||||
cs: cs,
|
||||
tt: tt,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoChip extends StatelessWidget {
|
||||
const _InfoChip({
|
||||
required this.label,
|
||||
required this.cs,
|
||||
required this.tt,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final ColorScheme cs;
|
||||
final TextTheme tt;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
label,
|
||||
style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _HelpRow extends StatelessWidget {
|
||||
const _HelpRow({
|
||||
required this.prefix,
|
||||
required this.name,
|
||||
required this.task,
|
||||
required this.minutes,
|
||||
required this.cs,
|
||||
required this.tt,
|
||||
});
|
||||
|
||||
final String prefix;
|
||||
final String name;
|
||||
final String task;
|
||||
final int minutes;
|
||||
final ColorScheme cs;
|
||||
final TextTheme tt;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 2),
|
||||
child: Text(
|
||||
'$prefix $name · $task · ${minutes}m',
|
||||
style: tt.labelSmall?.copyWith(color: cs.onSurfaceVariant),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user