XPrivate · admin-MVP-1 · Wireframes — Pembatalan + Tutup Periode ALIGNED aligned 2026-05-31
Index → admin-mvp-1-ia-handover.html · Stack: React 19 + TanStack Start (SPA) · shadcn amber b1MJ9vRwY6 · light-mode iter-1

Pembatalan Sheet + Tutup Periode Wizard

2 financial flow · cancel wizard adaptif per initiator (klik initiator buat liat flow beda) · period-close stepper dengan blocker · light mode · Indonesian · WIB

Wireframe 5 / 10

Pembatalan Sesi (Cancel Sheet)

Trigger: action bar "Batalkan" di Detail Sesi · Sheet (side panel) · adaptif per initiator · Speed: <15s · Role: ADMIN/OPS (override = ADMIN)
← Halaman Detail Sesi #1042 (di belakang sheet)

Klik Inisiator di sheet kanan → flow & perhitungan berubah (Siswa / Tutor / Admin / Force Majeure).
Batalkan sesi #1042
Budi → Andi · Mandarin HSK2 · 28 Mei 2026, 19:00 WIB · Disetujui
1. Inisiator pembatalan
SiswaTutorAdminForce majeure
2. Sisa waktu (otomatis)
Sekarang → sesi mulai3 jam 12 menit
Jenjang denda berlaku≤ 4 jam → 25%
3. Perhitungan denda
4. Override (khusus admin)
Override perhitungan otomatis
5. Alasan pembatalan (wajib)

Flow adaptif per Inisiator

Siswa cancel

Bracket charge: <1h 100% / <2h 50% / <4h 25% / ≥4h 0. Charge siswa + honor tutor proporsional. Transport Rp 0 (tutor gak berangkat).

Tutor cancel (Option b locked)

2 cabang: α self-sub (tutor cari pengganti komunitas → CLEAN, no penalty/strike) atau β escalate (zero pay + denda graduated 100/50/25% + 1 strike, denda = revenue XPrivate). Sheet kasih pilih cabang.

Admin cancel

Ops reason (mis. tutor sakit confirmed, jadwal bentrok). Default no-penalty, ADMIN discretion. Alasan wajib.

Force Majeure

Zero penalty pending. Masuk FM workflow L1 review → L2 banding 14d. Kategori (Sakit/Duka/Darurat/Bencana/Lainnya) + evidence upload.

Override (ADMIN)

Toggle → nominal custom + alasan wajib → audit. OPS gak bisa override (auto-calc only).

Components

Sheet, RadioGroup (initiator), InfoBox computed, Switch (override), Textarea (alasan), AlertDialog (confirm — type-to-confirm kalo denda besar).

Open Knobs

  • Tutor self-sub (α): sheet handle pilih pengganti di sini, atau redirect ke "Cari Pengganti" flow terpisah? Strawman = redirect (reuse substitute matcher).
  • Confirm: type-to-confirm ("BATALKAN") kalo denda > threshold (mis. >Rp 100k)? Strawman = ya, buat denda besar.
  • Sheet vs full-page: cancel = Sheet (cepet, context preserved). Confirm.
Wireframe 6 / 10

Tutup Periode (Period Close Wizard)

Route: /finance/period-close/:periodId · Recipe D (stepper) · blocker-aware · Speed: <2min/step · Role: FINANCE (re-open = ADMIN)
Tutup periode — Mei 2026Belum ditutup
!
Sesi berjalan
!
Tinjau force majeure
3
Rekonsiliasi bayar
4
Penyesuaian
5
Buat tagihan & honor
6
Kunci periode

Komponen Kunci

Blocker-aware steps

Tiap step cek prasyarat. Step 3 "Sesi Berjalan": kalo ada sesi IN_PROGRESS → BLOCK lanjut sampai finalized. Step 4 FM: kalo ada PENDING_L1/L2 → block. Cegah close periode dengan transaksi gantung (gap legacy).

Lock = type-to-confirm

Step 6 final: ketik "TUTUP PERIODE MEI 2026" buat konfirmasi. Setelah lock: no backdated booking, no late mark-paid retroaktif. Audit (who/when).

Re-open (ADMIN)

Periode tertutup bisa di-reopen tapi senior approval (ADMIN) + alasan + audit. FINANCE gak bisa reopen sendiri.

Urutan: pending dulu, generate akhir

1 Sesi Berjalan (ops blocker) → 2 FM review (admin blocker) → 3 Rekonsiliasi (finance) → 4 Adjustment (finance) → 5 Generate Tagihan & Honor (setelah semua settled) → 6 Lock. Generate di akhir biar angka final — kalo generate sebelum FM/adjustment kelar, bill salah.

Components

Stepper (composed Tabs+Progress), checklist items (status icon), Alert (blocker), AlertDialog (lock type-to-confirm), Button nav.

Speed

<2 min/step. Blocker resolve = link langsung ke item (e.g., "3 sesi IN_PROGRESS" → klik → list sesi).

Open Knobs

  • Blocker hard (gak bisa lanjut) vs soft (warn tapi boleh skip dengan alasan)? Strawman = IN_PROGRESS + FM pending = HARD block. Adjustment = soft.
  • Lock confirm: type-to-confirm full string atau checkbox "saya paham konsekuensi"? Strawman = type-to-confirm (fatal action).
  • Partial close (per-segment) atau all-or-nothing? Strawman = all-or-nothing iter-1 (simpler).
6 / 10 wireframes — Pricing · Approval Queue · Schedule Detail · Calendar · Pembatalan Sheet · Tutup Periode.
Sisa: Audit Log · Cron Jobs · Dashboard · ⌘K Palette.