rama/halobestie-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 4 Stage 10 client_app: Chat tab UI (3 sub-tabs + retire bestie_history)

Browse Source 
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>
This commit is contained in:
ramadhan sjamsani
2026-05-12 20:14:22 +08:00
parent 350b92f1f3
commit e3ea1d793e
13 changed files with 1943 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
client_app/lib/features/chat/screens/chat_history_screen.dart
View File

@@ -1,327 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/api/api_client_provider.dart';
import '../../../core/constants.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/widgets.dart';
import '../../home/providers/bestie_history_provider.dart';
/// Phase 4 Stage 8 — `BestieHistoryList`.
///
/// Renders past sessions with the v4 visual: orb + name + last-session date
/// + topic chips + sessions count + ONLINE pill (per-row, sourced from the
/// `mitra_is_online` field on the history payload).
///
/// Tapping a row routes to the targeted "Curhat lagi" payment flow when the
/// row references a known mitra; closing-state rows still drop into the
/// session screen so the user can finish the goodbye composer. Otherwise we
/// fall back to the transcript view.
class ChatHistoryScreen extends ConsumerWidget {
const ChatHistoryScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final historyAsync = ref.watch(bestieHistoryProvider);
final fullSessionsAsync = ref.watch(_rawHistoryProvider);
return Scaffold(
backgroundColor: HaloTokens.bg,
appBar: AppBar(
backgroundColor: HaloTokens.bg,
foregroundColor: HaloTokens.ink,
elevation: 0,
title: const Text(
'Riwayat Chat',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontWeight: FontWeight.w700,
),
),
),
body: historyAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (_, __) => const Center(
child: Text(
'gagal memuat riwayat. tarik untuk muat ulang.',
style: TextStyle(fontFamily: HaloTokens.fontBody),
),
),
data: (items) {
if (items.isEmpty) {
return const Center(
child: Text(
'Belum ada riwayat chat',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
color: HaloTokens.inkSoft,
),
),
);
}
return RefreshIndicator(
onRefresh: () async {
ref.invalidate(bestieHistoryProvider);
ref.invalidate(_rawHistoryProvider);
await ref.read(bestieHistoryProvider.future);
},
child: ListView.separated(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s16,
vertical: HaloSpacing.s12,
),
itemCount: items.length,
separatorBuilder: (_, __) => const SizedBox(height: HaloSpacing.s12),
itemBuilder: (context, index) {
final item = items[index];
final raw = fullSessionsAsync.valueOrNull?[index];
final isClosing = raw?['status'] == SessionStatus.closing;
return _BestieRow(
item: item,
isClosing: isClosing,
onTap: () {
if (isClosing && raw != null) {
context.push(
'/chat/session/${item.sessionId}',
extra: item.mitraName,
);
return;
}
context.push('/chat/history/${item.sessionId}');
},
onCurhatLagi: item.mitraId == null || isClosing
? null
: () => context.push('/payment', extra: <String, dynamic>{
'targetedMitraId': item.mitraId,
'mitraName': item.mitraName,
'topicSensitivity': TopicSensitivity.regular,
}),
);
},
),
);
},
),
);
}
}
/// Raw history payload — used to read fields the v4 `BestieHistoryItem`
/// model doesn't surface (currently `status`, for the closing-row branch).
final _rawHistoryProvider = FutureProvider<List<Map<String, dynamic>>>((ref) async {
final api = ref.read(apiClientProvider);
final response = await api.get('/api/client/chat/history');
return ((response['data']['items'] as List?) ?? const []).cast<Map<String, dynamic>>();
});
class _BestieRow extends StatelessWidget {
final BestieHistoryItem item;
final bool isClosing;
final VoidCallback onTap;
final VoidCallback? onCurhatLagi;
const _BestieRow({
required this.item,
required this.isClosing,
required this.onTap,
required this.onCurhatLagi,
});
@override
Widget build(BuildContext context) {
return Material(
color: HaloTokens.surface,
borderRadius: HaloRadius.lg,
child: InkWell(
onTap: onTap,
borderRadius: HaloRadius.lg,
child: Padding(
padding: const EdgeInsets.all(HaloSpacing.s16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
HaloOrb(
size: 56,
seed: (item.mitraId ?? item.mitraName).hashCode,
label: item.mitraName,
),
const SizedBox(width: HaloSpacing.s12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Flexible(
child: Text(
item.mitraName,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 16,
fontWeight: FontWeight.w700,
color: HaloTokens.ink,
),
),
),
if (item.mitraIsOnline) ...[
const SizedBox(width: HaloSpacing.s8),
const _OnlinePill(),
],
if (isClosing) ...[
const SizedBox(width: HaloSpacing.s8),
const _ClosingBadge(),
],
],
),
const SizedBox(height: 2),
Text(
[
if (item.endedAt != null) _formatDate(item.endedAt!),
'${item.sessionsCount} sesi',
].join(' · '),
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 12.5,
color: HaloTokens.inkSoft,
),
),
],
),
),
],
),
if (item.topics.isNotEmpty) ...[
const SizedBox(height: HaloSpacing.s12),
Wrap(
spacing: HaloSpacing.s8,
runSpacing: HaloSpacing.s8,
children: item.topics
.take(3)
.map((t) => _TopicPill(label: t))
.toList(),
),
],
if (onCurhatLagi != null) ...[
const SizedBox(height: HaloSpacing.s12),
Align(
alignment: Alignment.centerRight,
child: HaloButton(
label: 'curhat lagi',
size: HaloButtonSize.sm,
variant: HaloButtonVariant.secondary,
onPressed: onCurhatLagi,
),
),
],
],
),
),
),
);
}
String _formatDate(DateTime d) =>
'${d.day.toString().padLeft(2, '0')}/${d.month.toString().padLeft(2, '0')}/${d.year}';
}
class _OnlinePill extends StatelessWidget {
const _OnlinePill();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: HaloTokens.success.withAlpha(36),
borderRadius: BorderRadius.circular(999),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
_Dot(color: HaloTokens.success),
SizedBox(width: 4),
Text(
'ONLINE',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 10,
fontWeight: FontWeight.w700,
letterSpacing: 0.6,
color: HaloTokens.success,
),
),
],
),
);
}
}
class _Dot extends StatelessWidget {
final Color color;
const _Dot({required this.color});
@override
Widget build(BuildContext context) {
return Container(
width: 6,
height: 6,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
);
}
}
class _TopicPill extends StatelessWidget {
final String label;
const _TopicPill({required this.label});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s12,
vertical: 4,
),
decoration: BoxDecoration(
color: HaloTokens.brandSofter,
borderRadius: BorderRadius.circular(999),
),
child: Text(
label,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 11.5,
fontWeight: FontWeight.w600,
color: HaloTokens.brandDark,
),
),
);
}
}
class _ClosingBadge extends StatelessWidget {
const _ClosingBadge();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: HaloTokens.accentSoft,
borderRadius: BorderRadius.circular(999),
),
child: const Text(
'Belum ditutup',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 10,
fontWeight: FontWeight.w600,
color: HaloTokens.brandDark,
),
),
);
}
}