Langkah 1 · Ambil 1 field (tombol ?)

final topic = await api.fetchFieldHelp(
  app: 'reservasi',
  form: 'form_reservasi',
  field: 'nama_tamu', // key tombol/field
);
// topic.displayTitle — judul
// topic.description — keterangan singkat
// topic.content — isi lengkap
// topic.audienceList — dipakai oleh siapa
// topic.exampleValue — contoh benar
// topic.faqs — List, topic.related — List

Langkah 2 · Tampilkan bottom sheet

if (!context.mounted) return;
showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (_) => Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(topic.displayTitle,
          style: const TextStyle(
            fontWeight: FontWeight.bold, fontSize: 17)),
        const SizedBox(height: 8),
        Text(topic.description),
        if (topic.exampleValue != null)
          Text('Contoh: ${topic.exampleValue}'),
      ],
    ),
  ),
);

Langkah 3 · Section & global satu layar

// Satu bagian (mis. panel Booking Details)
final section = await api.fetchFieldHelp(
  app: 'reservasi', form: 'form_reservasi',
  field: 'section:data_tamu',
);
// Seluruh layar (banner penjelasan umum)
final global = await api.fetchFieldHelp(
  app: 'reservasi', form: 'form_reservasi',
  field: '_global',
);

Langkah 4 · Daftar + cari + related

// Semua field 1 form (tampil berkelompok via groupName)
final all = await api.fetchFormHelp(
  app: 'reservasi', form: 'form_reservasi');

// Cari (untuk kolom pencarian)
final found = await api.search('kamar', app: 'reservasi');

// Bantuan terkait → buka detailnya
final rel = await api.fetchRelated(topic.id);
final next = await api.fetchTopic(rel.first.id);

A · Tombol ? di samping label

// di samping tiap label — ganti field per baris
Row(children: [
  const Text('Nama Tamu',
      style: TextStyle(fontWeight: FontWeight.w600)),
  const SizedBox(width: 4),
  HelpButton(
    api: api, // HelpApi(baseUrl: 'https://help.emerald-system.id')
    app: 'reservasi', form: 'form_reservasi',
    field: 'nama_tamu',
  ),
]);

// HelpButton: lingkaran hijau ? → showHelpSheet
class HelpButton extends StatelessWidget {
  const HelpButton({super.key, required this.api,
    required this.app, required this.form,
    required this.field});
  final HelpApi api;
  final String app, form, field;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => showHelpSheet(context, api,
          app: app, form: form, field: field),
      customBorder: const CircleBorder(),
      child: Container(width: 22, height: 22,
        alignment: Alignment.center,
        decoration: const BoxDecoration(
            color: Color(0xFF059669), shape: BoxShape.circle),
        child: const Text('?',
            style: TextStyle(color: Colors.white,
                fontSize: 13, fontWeight: FontWeight.bold)),
      ),
    );
  }
}

B · Bottom sheet isi bantuan

Future<void> showHelpSheet(BuildContext context,
    HelpApi api,
    {required String app,
    required String form,
    required String field}) async {
  // tampilkan loading dulu
  showModalBottomSheet(
      context: context,
      showDragHandle: true,
      builder: (_) => const Padding(
          padding: EdgeInsets.all(32),
          child: Center(
              child: CircularProgressIndicator())));
  HelpTopic topic;
  try {
    topic = await api.fetchFieldHelp(
        app: app, form: form, field: field);
  } catch (e) {
    if (!context.mounted) return;
    Navigator.of(context).pop(); // tutup loading
    ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Gagal: $e')));
    return;
  }
  if (!context.mounted) return;
  Navigator.of(context).pop(); // tutup loading
  showModalBottomSheet(
      context: context,
      showDragHandle: true,
      isScrollControlled: true,
      builder: (_) => SingleChildScrollView(
          padding: const EdgeInsets.all(20),
          child: Column(
              crossAxisAlignment:
                  CrossAxisAlignment.start,
              children: [
                Text(topic.displayTitle,
                    style: Theme.of(context)
                        .textTheme
                        .titleLarge),
                if (topic.audienceList.isNotEmpty)
                  Wrap(spacing: 6, children: [
                    for (final a
                        in topic.audienceList)
                      Chip(label: Text(a)),
                  ]),
                const SizedBox(height: 8),
                Text(topic.description),
                for (final f in topic.faqs) ...[
                  const Divider(),
                  Text('Q: ${f.question}',
                      style: const TextStyle(
                          fontWeight:
                              FontWeight.bold)),
                  Text('A: ${f.answer}'),
                ],
                for (final r in topic.related)
                  ActionChip(
                      label:
                          Text(r.displayTitle),
                      onPressed: () => showHelpSheet(
                          context, api,
                          app: r.appName,
                          form: r.formSegment,
                          field: r.fieldName)),
              ])));
}

C · 1 layar sekaligus (group + banner global)

// preload 1 form → kelompokkan via groupName
final items = await api.fetchFormHelp(
    app: 'reservasi', form: 'form_reservasi');
final byGroup = <String, List<HelpSummary>>{};
for (final h in items) {
  byGroup.putIfAbsent(
      h.groupName ?? '(tanpa group)', () => []).add(h);
}
// banner penjelasan umum 1 layar
final global = await api.fetchGlobal(
    app: 'reservasi', form: 'form_reservasi');
// satu bagian (panel Booking Details)
final section = await api.fetchSection(
    app: 'reservasi', form: 'form_reservasi',
    section: 'data_tamu');

D · Gambar +Render isi HTML

// image_url relatif → gabung baseUrl
String resolveUrl(String src) => src.startsWith('http')
    ? src
    : 'https://help.emerald-system.id$src';
if (topic.imageUrl != null &&
    topic.imageUrl!.isNotEmpty)
  Image.network(resolveUrl(topic.imageUrl!));

// content = HTML editor (b/i/ul/a/img).
// cepat: buang tag → teks polos
String stripHtml(String? s) => (s ?? '')
    .replaceAll(RegExp(r'<[^>]*>'), '').trim();
Text(stripHtml(topic.content));
// kaya (bold/list): tambah package flutter_html,
// lalu Html(data: topic.content ?? '')

1 · Dependensi + init

# pubspec.yaml
flutter pub add http

// main.dart — production
import 'help_api.dart';
final api = HelpApi(baseUrl: 'https://help.emerald-system.id');
// lokal: emulator http://10.0.2.2:8750, iOS http://localhost:8750

2 · Tombol ? ambil detail + related

Future<void> showHelp(BuildContext context) async {
  final topic = await api.fetchFieldHelp(
    app: 'reservasi', form: 'form_reservasi',
    field: 'nama_tamu', // group ikut terkirim
  );
  // topic.displayTitle, topic.groupName, topic.scope,
  // topic.description, topic.content,
  // topic.audienceList, topic.exampleValue,
  // topic.faqs, topic.related
}