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

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,
),
),
);
}
}