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

105
client_app/lib/features/chat_tab/providers/pending_payments_provider.dart Normal file
View File

@@ -0,0 +1,105 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/api/api_client_provider.dart';
import '../../../core/auth/auth_notifier.dart';
/// One row in the Chat Tab > Pembayaran sub-tab.
///
/// Mirrors the response of `GET /api/client/payment-sessions/pending`. A row
/// is either an initial-session payment (`isExtension == false`) — for which
/// mitra info is only present in the targeted "Curhat lagi" flow — or an
/// extension payment (`isExtension == true`) — mitra info resolved by the
/// backend via session_extensions → chat_sessions.
class PendingPaymentItem {
final String id;
final bool isExtension;
final int amount;
final int durationMinutes;
final String mode;
final DateTime createdAt;
final DateTime expiresAt;
final String? mitraId;
final String? mitraDisplayName;
const PendingPaymentItem({
required this.id,
required this.isExtension,
required this.amount,
required this.durationMinutes,
required this.mode,
required this.createdAt,
required this.expiresAt,
required this.mitraId,
required this.mitraDisplayName,
});
factory PendingPaymentItem.fromJson(Map<String, dynamic> json) {
return PendingPaymentItem(
id: json['id'] as String,
isExtension: json['is_extension'] as bool? ?? false,
amount: switch (json['amount']) {
num n => n.toInt(),
String s => int.tryParse(s) ?? 0,
_ => 0,
},
durationMinutes: switch (json['duration_minutes']) {
num n => n.toInt(),
String s => int.tryParse(s) ?? 0,
_ => 0,
},
mode: json['mode'] as String? ?? 'chat',
createdAt: DateTime.parse(json['created_at'] as String).toLocal(),
expiresAt: DateTime.parse(json['expires_at'] as String).toLocal(),
mitraId: json['mitra_id'] as String?,
mitraDisplayName: json['mitra_display_name'] as String?,
);
}
}
class PendingPaymentsData {
final List<PendingPaymentItem> items;
final int total;
const PendingPaymentsData({required this.items, required this.total});
static const empty = PendingPaymentsData(items: [], total: 0);
}
/// Customer-scoped pending payment sessions. Returns `empty` when the caller
/// has no auth identity — keeps SHome1st + the chat tab from issuing a 401.
///
/// Drives both the Pembayaran sub-tab list and the bottom-nav red dot via the
/// `pendingPaymentsCountProvider` derivative below.
final pendingPaymentsProvider =
FutureProvider<PendingPaymentsData>((ref) async {
final customerId = ref.watch(authProvider.select((s) {
final data = s.valueOrNull;
return switch (data) {
AuthAuthenticatedData d => d.profile['id'] as String?,
AuthAnonymousData d => d.customerId,
_ => null,
};
}));
if (customerId == null) return PendingPaymentsData.empty;
final api = ref.read(apiClientProvider);
final response =
await api.get('/api/client/payment-sessions/pending');
final data = response['data'] as Map<String, dynamic>? ?? const {};
final items = (data['items'] as List<dynamic>? ?? [])
.cast<Map<String, dynamic>>()
.map(PendingPaymentItem.fromJson)
.toList();
return PendingPaymentsData(
items: items,
total: switch (data['total']) {
num n => n.toInt(),
String s => int.tryParse(s) ?? items.length,
_ => items.length,
},
);
});
/// Lightweight derived count — feeds the bottom-nav red dot + the Pembayaran
/// sub-tab pill badge. Returns 0 while the underlying provider is loading or
/// has errored, so the badge never flickers from a transient state.
final pendingPaymentsCountProvider = Provider<int>((ref) {
final async = ref.watch(pendingPaymentsProvider);
return async.valueOrNull?.total ?? 0;
});

172
client_app/lib/features/chat_tab/providers/selesai_history_provider.dart Normal file
View File

@@ -0,0 +1,172 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/api/api_client_provider.dart';
import '../../../core/auth/auth_notifier.dart';
/// One row in the Chat Tab > Selesai sub-tab.
///
/// Closed-session details that survive into history: who, when, how long,
/// what closing message was left. The factory tolerates the same number /
/// string ambiguity bestieHistoryProvider already handles (postgres.js
/// stringifies bigint counts).
class SelesaiHistoryItem {
final String sessionId;
final String? mitraId;
final String mitraName;
final DateTime? endedAt;
final int? durationMinutes;
final String mode;
final String? mitraClosureMessage;
final String? customerClosureMessage;
final int sessionsCount;
final bool mitraIsOnline;
const SelesaiHistoryItem({
required this.sessionId,
required this.mitraId,
required this.mitraName,
required this.endedAt,
required this.durationMinutes,
required this.mode,
required this.mitraClosureMessage,
required this.customerClosureMessage,
required this.sessionsCount,
required this.mitraIsOnline,
});
factory SelesaiHistoryItem.fromJson(Map<String, dynamic> json) {
final endedAtRaw = json['ended_at'];
final createdAtRaw = json['created_at'];
return SelesaiHistoryItem(
sessionId: json['id'] as String,
mitraId: json['mitra_id'] as String?,
mitraName: json['mitra_display_name'] as String? ?? 'Bestie',
endedAt: endedAtRaw is String
? DateTime.tryParse(endedAtRaw)?.toLocal()
: (createdAtRaw is String
? DateTime.tryParse(createdAtRaw)?.toLocal()
: null),
durationMinutes: switch (json['duration_minutes']) {
num n => n.toInt(),
String s => int.tryParse(s),
_ => null,
},
mode: json['mode'] as String? ?? 'chat',
mitraClosureMessage: json['mitra_closure_message'] as String?,
customerClosureMessage: json['customer_closure_message'] as String?,
sessionsCount: switch (json['sessions_count']) {
num n => n.toInt(),
String s => int.tryParse(s) ?? 1,
_ => 1,
},
mitraIsOnline: json['mitra_is_online'] as bool? ?? false,
);
}
/// Preview shown in the row: prefer the mitra's closing message (closer to
/// the partner's voice), fall back to the customer's, then to a generic
/// "selesai" placeholder so empty rows still render.
String get previewText =>
(mitraClosureMessage?.trim().isNotEmpty == true
? mitraClosureMessage
: (customerClosureMessage?.trim().isNotEmpty == true
? customerClosureMessage
: 'sesi selesai'))!;
}
/// Persistent paginated state — accumulated items + cursor + flags.
class SelesaiHistoryState {
final List<SelesaiHistoryItem> items;
final String? nextCursor;
final bool hasMore;
final bool loadingMore;
const SelesaiHistoryState({
this.items = const [],
this.nextCursor,
this.hasMore = false,
this.loadingMore = false,
});
SelesaiHistoryState copyWith({
List<SelesaiHistoryItem>? items,
String? nextCursor,
bool? hasMore,
bool? loadingMore,
bool clearCursor = false,
}) =>
SelesaiHistoryState(
items: items ?? this.items,
nextCursor: clearCursor ? null : (nextCursor ?? this.nextCursor),
hasMore: hasMore ?? this.hasMore,
loadingMore: loadingMore ?? this.loadingMore,
);
}
/// Cursor-paginated Selesai history. First fetch returns the freshest 20 rows;
/// `loadMore` appends the next page. Customer-scoped — switching account
/// resets the list automatically because the build re-runs.
class SelesaiHistoryNotifier
extends AsyncNotifier<SelesaiHistoryState> {
static const _pageLimit = 20;
@override
Future<SelesaiHistoryState> build() async {
final customerId = ref.watch(authProvider.select((s) {
final data = s.valueOrNull;
return switch (data) {
AuthAuthenticatedData d => d.profile['id'] as String?,
AuthAnonymousData d => d.customerId,
_ => null,
};
}));
if (customerId == null) return const SelesaiHistoryState();
return await _fetchPage(cursor: null);
}
Future<SelesaiHistoryState> _fetchPage({String? cursor}) async {
final api = ref.read(apiClientProvider);
final url = cursor == null
? '/api/client/chat/history?limit=$_pageLimit'
: '/api/client/chat/history?limit=$_pageLimit&cursor=${Uri.encodeQueryComponent(cursor)}';
final response = await api.get(url);
final data = response['data'] as Map<String, dynamic>? ?? const {};
final items = (data['items'] as List<dynamic>? ?? [])
.cast<Map<String, dynamic>>()
.map(SelesaiHistoryItem.fromJson)
.toList();
final existing = cursor == null ? <SelesaiHistoryItem>[] : (state.valueOrNull?.items ?? const []);
return SelesaiHistoryState(
items: [...existing, ...items],
nextCursor: data['next_cursor'] as String?,
hasMore: data['has_more'] as bool? ?? false,
);
}
/// Append the next page if any. No-op when already loading or no cursor.
Future<void> loadMore() async {
final current = state.valueOrNull;
if (current == null || !current.hasMore || current.loadingMore) return;
state = AsyncData(current.copyWith(loadingMore: true));
try {
final next = await _fetchPage(cursor: current.nextCursor);
state = AsyncData(next);
} catch (e, st) {
state = AsyncError(e, st);
}
}
/// Pull-to-refresh: drop the cursor and re-fetch from the top.
Future<void> refresh() async {
state = const AsyncLoading();
try {
state = AsyncData(await _fetchPage(cursor: null));
} catch (e, st) {
state = AsyncError(e, st);
}
}
}
final selesaiHistoryProvider =
AsyncNotifierProvider<SelesaiHistoryNotifier, SelesaiHistoryState>(
SelesaiHistoryNotifier.new,
);

111
client_app/lib/features/chat_tab/screens/aktif_view.dart Normal file
View File

@@ -0,0 +1,111 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/active_session_notifier.dart';
import '../../../core/theme/halo_tokens.dart';
import '../widgets/chat_row.dart';
/// Chat-Tab > aktif sub-tab.
///
/// Always renders 0 or 1 row — backend caps the customer to one active
/// session. Row stays visible while the user is inside the live chat room
/// (per §10.6 decision 1: aktif represents state, not navigation).
class AktifView extends ConsumerWidget {
const AktifView({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final async = ref.watch(activeSessionProvider);
return RefreshIndicator(
onRefresh: () => ref.read(activeSessionProvider.notifier).refresh(),
color: HaloTokens.brand,
child: async.when(
loading: () => const _Loading(),
error: (e, _) => _Error(message: e.toString()),
data: (data) {
if (!data.hasSession) return const _Empty();
final session = data.session!;
final mitraName =
(session['mitra_display_name'] as String?) ?? 'Bestie';
return ListView(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s20,
vertical: HaloSpacing.s12,
),
children: [
ChatRow(
seed: mitraName.codeUnits.fold<int>(0, (a, b) => a + b),
name: mitraName,
preview: _previewFor(data.unreadCount),
isLive: true,
isCall: (session['mode'] as String?) == 'call',
onTap: () {
final sessionId = session['id'] as String?;
if (sessionId == null) return;
context.push('/chat/session/$sessionId',
extra: {'mitraName': mitraName});
},
),
],
);
},
),
);
}
String _previewFor(int unread) =>
unread > 0 ? '$unread pesan baru' : 'lagi ngobrol nih';
}
class _Empty extends StatelessWidget {
const _Empty();
@override
Widget build(BuildContext context) => const _CenteredMessage(
text: 'belum ada chat di sini',
);
}
class _Loading extends StatelessWidget {
const _Loading();
@override
Widget build(BuildContext context) => const Center(
child: CircularProgressIndicator(color: HaloTokens.brand),
);
}
class _Error extends StatelessWidget {
final String message;
const _Error({required this.message});
@override
Widget build(BuildContext context) =>
_CenteredMessage(text: 'gagal memuat: $message');
}
class _CenteredMessage extends StatelessWidget {
final String text;
const _CenteredMessage({required this.text});
@override
Widget build(BuildContext context) {
// Wrap in a scroll view so RefreshIndicator works even on empty state.
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,
),
),
),
],
);
}
}

139
client_app/lib/features/chat_tab/screens/chat_tab_shell.dart Normal file
View File

@@ -0,0 +1,139 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/active_session_notifier.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../home/widgets/halo_tab_bar.dart';
import '../providers/pending_payments_provider.dart';
import '../widgets/sub_tab_pill.dart';
/// Phase 4 Stage 10 — host scaffold for the Chat tab.
///
/// Wraps the three sub-tab views (`/chat/aktif`, `/chat/pembayaran`,
/// `/chat/selesai`) via `ShellRoute`. The header + sub-tab pills + bottom
/// `HaloTabBar` stay constant while only the body swaps.
class ChatTabShell extends ConsumerWidget {
final Widget child;
final ChatSubTab active;
const ChatTabShell({
super.key,
required this.child,
required this.active,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final activeSession = ref.watch(activeSessionProvider).valueOrNull;
final unreadCount =
activeSession?.hasSession == true ? activeSession!.unreadCount : 0;
final pendingCount = ref.watch(pendingPaymentsCountProvider);
return Scaffold(
backgroundColor: HaloTokens.bg,
body: SafeArea(
bottom: false,
child: Column(
children: [
const _Heading(),
_SubTabBar(
active: active,
aktifBadge: unreadCount,
pembayaranBadge: pendingCount,
),
Expanded(child: child),
const HaloTabBar(active: 'chat'),
],
),
),
);
}
}
enum ChatSubTab {
aktif('/chat/aktif', 'aktif'),
pembayaran('/chat/pembayaran', 'pembayaran'),
selesai('/chat/selesai', 'selesai');
final String path;
final String label;
const ChatSubTab(this.path, this.label);
}
class _Heading extends StatelessWidget {
const _Heading();
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s20,
HaloSpacing.s24,
HaloSpacing.s12,
),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'chat',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 26,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: -0.52,
),
),
),
);
}
}
class _SubTabBar extends StatelessWidget {
final ChatSubTab active;
final int aktifBadge;
final int pembayaranBadge;
const _SubTabBar({
required this.active,
required this.aktifBadge,
required this.pembayaranBadge,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: HaloSpacing.s16),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: HaloTokens.border)),
),
child: Row(
children: [
SubTabPill(
label: 'aktif',
active: active == ChatSubTab.aktif,
badgeCount: aktifBadge,
onTap: () => _navigate(context, ChatSubTab.aktif),
),
SubTabPill(
label: 'pembayaran',
active: active == ChatSubTab.pembayaran,
badgeCount: pembayaranBadge,
onTap: () => _navigate(context, ChatSubTab.pembayaran),
),
SubTabPill(
label: 'selesai',
active: active == ChatSubTab.selesai,
badgeCount: null,
onTap: () => _navigate(context, ChatSubTab.selesai),
),
],
),
);
}
void _navigate(BuildContext context, ChatSubTab target) {
if (target == active) return;
context.go(target.path);
}
}

103
client_app/lib/features/chat_tab/screens/pembayaran_view.dart Normal file
View File

@@ -0,0 +1,103 @@
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/pending_payments_provider.dart';
import '../widgets/chat_row.dart';
/// Chat-Tab > pembayaran sub-tab.
///
/// Lists pending initial + extension payments. Row tap resumes the
/// waiting-payment screen for that payment session.
class PembayaranView extends ConsumerWidget {
const PembayaranView({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final async = ref.watch(pendingPaymentsProvider);
return RefreshIndicator(
onRefresh: () => ref.refresh(pendingPaymentsProvider.future),
color: HaloTokens.brand,
child: async.when(
loading: () => const _Loading(),
error: (e, _) => _CenteredMessage(text: 'gagal memuat: $e'),
data: (data) {
if (data.items.isEmpty) {
return const _CenteredMessage(
text: 'belum ada pembayaran tertunda',
);
}
return ListView.builder(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s20,
vertical: HaloSpacing.s12,
),
itemCount: data.items.length,
itemBuilder: (_, i) {
final item = data.items[i];
final name = item.mitraDisplayName ?? 'Bestie';
return ChatRow(
seed: name.codeUnits.fold<int>(0, (a, b) => a + b),
name: name,
preview: item.isExtension
? 'menunggu pembayaran perpanjangan'
: 'menunggu pembayaran sesi',
trailing: _relativeTime(item.createdAt),
chips: [PaymentAmountChip(amount: item.amount)],
isCall: item.mode == 'call',
onTap: () => context.push('/payment/waiting/${item.id}'),
);
},
);
},
),
);
}
}
/// Loose "2 mnt lalu" formatter — enough for the row trailing label without
/// dragging in `intl`. Mirrors the Figma copy style.
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,
),
),
),
],
);
}
}

148
client_app/lib/features/chat_tab/screens/selesai_view.dart Normal file
View File

@@ -0,0 +1,148 @@
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,
),
),
),
],
);
}
}

266
client_app/lib/features/chat_tab/widgets/chat_row.dart Normal file
View File

@@ -0,0 +1,266 @@
import 'package:flutter/material.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/widgets.dart';
/// Generic row used by all three Chat-Tab sub-tabs (aktif / pembayaran /
/// selesai). The owning sub-tab supplies the right-side trailing widget and
/// any chips below the preview so this widget stays presentation-only.
///
/// Visual reference: `requirement/Figma/screens/extras.jsx::SChatList` rows.
class ChatRow extends StatelessWidget {
final int seed;
final String name;
final String preview;
final bool isLive;
final String? trailing;
final List<Widget> chips;
final bool isCall;
final VoidCallback? onTap;
const ChatRow({
super.key,
required this.seed,
required this.name,
required this.preview,
this.isLive = false,
this.trailing,
this.chips = const [],
this.isCall = false,
this.onTap,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Material(
color: HaloTokens.surface,
borderRadius: BorderRadius.circular(14),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(14),
child: Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
border: Border.all(color: HaloTokens.border),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_Avatar(seed: seed, isLive: isLive),
const SizedBox(width: 12),
Expanded(child: _Body(
name: name,
preview: preview,
trailing: trailing,
isLive: isLive,
isCall: isCall,
chips: chips,
)),
],
),
),
),
),
);
}
}
class _Avatar extends StatelessWidget {
final int seed;
final bool isLive;
const _Avatar({required this.seed, required this.isLive});
@override
Widget build(BuildContext context) {
return SizedBox(
width: 44,
height: 44,
child: Stack(
clipBehavior: Clip.none,
children: [
HaloOrb(seed: seed, size: 44),
if (isLive)
Positioned(
right: -2,
bottom: -2,
child: Container(
width: 14,
height: 14,
decoration: BoxDecoration(
color: HaloTokens.success,
shape: BoxShape.circle,
border: Border.all(color: HaloTokens.surface, width: 2.5),
),
),
),
],
),
);
}
}
class _Body extends StatelessWidget {
final String name;
final String preview;
final String? trailing;
final bool isLive;
final bool isCall;
final List<Widget> chips;
const _Body({
required this.name,
required this.preview,
required this.trailing,
required this.isLive,
required this.isCall,
required this.chips,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text(
name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 14,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
),
if (trailing != null || isLive)
Text(
isLive ? '● live' : (trailing ?? ''),
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 10.5,
fontWeight: isLive ? FontWeight.w600 : FontWeight.w400,
color: isLive ? HaloTokens.success : HaloTokens.inkMuted,
),
),
],
),
const SizedBox(height: 2),
Text(
preview,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 12,
color: HaloTokens.inkSoft,
height: 1.4,
),
),
if (isCall || chips.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 6),
child: Wrap(
spacing: 6,
runSpacing: 4,
children: [
if (isCall) const _CallChip(),
...chips,
],
),
),
],
);
}
}
/// Voice-call indicator. Stage 6.0 introduced the header pill for the in-call
/// screen; this is its row-level companion in the Chat tab.
class _CallChip extends StatelessWidget {
const _CallChip();
@override
Widget build(BuildContext context) => const _Chip(
text: '📞 Call',
textColor: HaloTokens.brandDark,
background: HaloTokens.brandSoft,
);
}
/// Amber chip used on Pembayaran rows: `bayar Rp X.XXX`.
class PaymentAmountChip extends StatelessWidget {
final int amount;
const PaymentAmountChip({super.key, required this.amount});
@override
Widget build(BuildContext context) => _Chip(
text: 'bayar ${_formatRupiah(amount)}',
textColor: const Color(0xFFA8410E),
background: const Color(0xFFFFF0E5),
);
}
/// Subtle duration suffix on Selesai rows: `X menit`.
class DurationChip extends StatelessWidget {
final int minutes;
const DurationChip({super.key, required this.minutes});
@override
Widget build(BuildContext context) => Text(
'$minutes menit',
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 10.5,
color: HaloTokens.inkMuted,
),
);
}
class _Chip extends StatelessWidget {
final String text;
final Color textColor;
final Color background;
const _Chip({
required this.text,
required this.textColor,
required this.background,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.circular(6),
),
child: Text(
text,
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 10.5,
fontWeight: FontWeight.w600,
color: textColor,
),
),
);
}
}
String _formatRupiah(int amount) {
// Locale-agnostic, no intl dep. Render with `.` group separators per id_ID.
final s = amount.toString();
final buf = StringBuffer();
for (int i = 0; i < s.length; i++) {
if (i != 0 && (s.length - i) % 3 == 0) buf.write('.');
buf.write(s[i]);
}
return 'Rp${buf.toString()}';
}

92
client_app/lib/features/chat_tab/widgets/sub_tab_pill.dart Normal file
View File

@@ -0,0 +1,92 @@
import 'package:flutter/material.dart';
import '../../../core/theme/halo_tokens.dart';
/// One of the three sub-tab buttons across the top of the Chat tab.
///
/// Active state uses the brand color for the label + an underline; an
/// optional `badgeCount` renders the numeric pill next to the label.
/// `null` or `0` hides the pill (per Selesai's no-badge rule).
class SubTabPill extends StatelessWidget {
final String label;
final bool active;
final int? badgeCount;
final VoidCallback onTap;
const SubTabPill({
super.key,
required this.label,
required this.active,
required this.onTap,
this.badgeCount,
});
@override
Widget build(BuildContext context) {
final color = active ? HaloTokens.brandDark : HaloTokens.inkSoft;
final showBadge = badgeCount != null && badgeCount! > 0;
return Expanded(
child: InkWell(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 4),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: active ? HaloTokens.brand : Colors.transparent,
width: 2,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
fontWeight: active ? FontWeight.w700 : FontWeight.w500,
color: color,
),
),
if (showBadge) ...[
const SizedBox(width: 6),
_CountBadge(count: badgeCount!, active: active),
],
],
),
),
),
);
}
}
class _CountBadge extends StatelessWidget {
final int count;
final bool active;
const _CountBadge({required this.count, required this.active});
@override
Widget build(BuildContext context) {
return Container(
constraints: const BoxConstraints(minWidth: 18),
height: 18,
padding: const EdgeInsets.symmetric(horizontal: 6),
alignment: Alignment.center,
decoration: BoxDecoration(
color: active ? HaloTokens.brand : HaloTokens.brandSoft,
borderRadius: BorderRadius.circular(9),
),
child: Text(
'$count',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 10,
fontWeight: FontWeight.w700,
color: active ? Colors.white : HaloTokens.brandDark,
),
),
);
}
}