Files
halobestie-clone/client_app/lib/features/chat_tab/screens/selesai_view.dart
ramadhan sjamsani e3ea1d793e Phase 4 Stage 10 client_app: Chat tab UI (3 sub-tabs + retire bestie_history)
Flutter half of Stage 10 — the new Chat tab landing in the bottom nav.
The CTA target swaps from /chat/history to /chat, which redirects into
/chat/aktif. Three sibling routes under a single ShellRoute share a
header + sub-tab pills + the existing HaloTabBar footer:

  /chat/aktif        — the current active session (0 or 1 row)
  /chat/pembayaran   — pending initial + extension payments
  /chat/selesai      — past sessions, cursor-paginated infinite scroll

URL is the source of truth for the active sub-tab so deep links, back
stack, and Maestro all agree on state.

New feature dir `lib/features/chat_tab/`:
- providers/pending_payments_provider.dart — FutureProvider against the
  Stage-10 backend endpoint, plus pendingPaymentsCountProvider for the
  red-dot derivative
- providers/selesai_history_provider.dart — AsyncNotifier over
  GET /api/client/chat/history; tracks accumulated items + next_cursor +
  hasMore; loadMore() and refresh()
- widgets/chat_row.dart — generic row used by all 3 sub-tabs, with
  optional PaymentAmountChip / DurationChip / 📞 Call indicator
- widgets/sub_tab_pill.dart — pill with active underline + optional
  numeric badge (null hides; matches Selesai's no-badge rule)
- screens/chat_tab_shell.dart — ShellRoute scaffold + ChatSubTab enum
- screens/{aktif,pembayaran,selesai}_view.dart — the three sub-tab bodies

Router (`router.dart`):
- /chat → redirect → /chat/aktif
- ShellRoute hosts /chat/aktif, /chat/pembayaran, /chat/selesai
- /chat/history retired; /chat/history/:sessionId → /chat/transcript/:sessionId
- ChatHistoryScreen import + file deleted

HaloTabBar (`features/home/widgets/halo_tab_bar.dart` — new in the
working tree from Stage 9 sweep): now a ConsumerWidget. Chat tab goes
to /chat. Red dot renders when pendingPaymentsCountProvider > 0.

Inbound call-site updates:
- bestie_choice_sheet.dart: /chat/history → /chat
- home_screen.dart history-row tap: /chat/history/:id → /chat/transcript/:id

This commit also carries the larger Stage 9 sweep + ESP-removal + USP
gate edits that were already staged in the working tree on
`home_screen.dart` and `router.dart` from the prior session.

flutter analyze: clean except for the pre-existing scaffold
test/widget_test.dart MyApp reference (unrelated, present on master).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-12 20:14:22 +08:00

149 lines
4.6 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../providers/selesai_history_provider.dart';
import '../widgets/chat_row.dart';
/// Chat-Tab > selesai sub-tab.
///
/// Cursor-paginated past sessions. Tap → read-only transcript at
/// `/chat/transcript/:sessionId` (renamed from the retired /chat/history/:id).
class SelesaiView extends ConsumerStatefulWidget {
const SelesaiView({super.key});
@override
ConsumerState<SelesaiView> createState() => _SelesaiViewState();
}
class _SelesaiViewState extends ConsumerState<SelesaiView> {
final _scroll = ScrollController();
@override
void initState() {
super.initState();
_scroll.addListener(_onScroll);
}
@override
void dispose() {
_scroll.removeListener(_onScroll);
_scroll.dispose();
super.dispose();
}
void _onScroll() {
// Trigger load-more when within ~400px of the bottom. The notifier no-ops
// if there's no cursor or another fetch is in flight.
if (!_scroll.hasClients) return;
final remaining = _scroll.position.maxScrollExtent - _scroll.position.pixels;
if (remaining < 400) {
ref.read(selesaiHistoryProvider.notifier).loadMore();
}
}
@override
Widget build(BuildContext context) {
final async = ref.watch(selesaiHistoryProvider);
return RefreshIndicator(
onRefresh: () => ref.read(selesaiHistoryProvider.notifier).refresh(),
color: HaloTokens.brand,
child: async.when(
loading: () => const _Loading(),
error: (e, _) => _CenteredMessage(text: 'gagal memuat: $e'),
data: (state) {
if (state.items.isEmpty) {
return const _CenteredMessage(text: 'belum ada riwayat curhat');
}
return ListView.builder(
controller: _scroll,
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s20,
vertical: HaloSpacing.s12,
),
itemCount: state.items.length + (state.hasMore ? 1 : 0),
itemBuilder: (_, i) {
if (i >= state.items.length) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: HaloSpacing.s16),
child: Center(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: HaloTokens.brand,
),
),
),
);
}
final item = state.items[i];
return ChatRow(
seed: item.mitraName.codeUnits.fold<int>(0, (a, b) => a + b),
name: item.mitraName,
preview: item.previewText,
trailing: item.endedAt == null
? null
: _relativeTime(item.endedAt!),
chips: [
if (item.durationMinutes != null)
DurationChip(minutes: item.durationMinutes!),
],
isCall: item.mode == 'call',
onTap: () =>
context.push('/chat/transcript/${item.sessionId}'),
);
},
);
},
),
);
}
}
String _relativeTime(DateTime when) {
final delta = DateTime.now().difference(when);
if (delta.inSeconds < 60) return 'baru aja';
if (delta.inMinutes < 60) return '${delta.inMinutes} mnt lalu';
if (delta.inHours < 24) return '${delta.inHours} jam lalu';
if (delta.inDays < 7) return '${delta.inDays} hari lalu';
return '${(delta.inDays / 7).floor()} mgg lalu';
}
class _Loading extends StatelessWidget {
const _Loading();
@override
Widget build(BuildContext context) => const Center(
child: CircularProgressIndicator(color: HaloTokens.brand),
);
}
class _CenteredMessage extends StatelessWidget {
final String text;
const _CenteredMessage({required this.text});
@override
Widget build(BuildContext context) {
return ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s20,
vertical: HaloSpacing.s64,
),
child: Text(
text,
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
color: HaloTokens.inkMuted,
),
),
),
],
);
}
}