Schedule Detail + Calendar — Wireframes v2

WF3: 4 tab elaborated (clickable) · WF4: week + month view, conflict UX options, NO drag-reschedule (ganti explicit — cegah accidental drag) · light mode · Indonesian · WIB

Wireframe 3 / 10 · v2

Detail Sesi — 4 Tab Elaborated

Route: /schedule/:id · klik tab buat liat tiap isian · Role: ADMIN, OPS

Jadwal/Semua Sesi/Sesi #1042

Sesi #1042 — Bahasa Mandarin · HSK 2

APPROVED

Budi Santoso → Andi Rahman · 28 Mei 2026, 19:00 WIB · Rumah siswa

Aksi (status Disetujui):

Detail

Materi

Pembatalan

Riwayat

Peserta

Budi Santoso Tutor · GOL_2

+62 812-3456-7890 · 12.4 km

Andi Rahman Siswa · SMP 8

Ortu: Ibu Sinta · +62 813-xxxx · Reguler+

Jadwal & Lokasi

Tanggal & jam28 Mei 2026, 19:00 WIB

Durasi90 menit

ModeOffline — rumah siswa

AlamatJl. Cikini Raya 5 · 📍 peta

Harga (snapshot) 🔒 dikunci saat disetujui

Tagihan siswaRp 200.000

Honor tutor (khusus admin)Rp 140.000

TransportRp 10.000

MarginRp 50.000

Kebijakan pembatalan (snapshot)

Config v3 dikunci saat sesi disetujui. Denda berjenjang 100/50/25% sesuai sisa waktu ke sesi. Rincian di tab Pembatalan.

Kehadiran

✓ Siswa hadir✓ Tutor hadir

Jika salah satu tidak hadir, alur no-show berlaku (no-show siswa: tagih penuh / no-show tutor: eskalasi ke pembatalan).

Materi pembelajaran diisi tutor (admin dapat mengubah)

Topik utama

Sub-topik

Halaman buku

PR / Tugas

Target sesi berikutnya

Foto laporan (R2)

📷 buku.jpg

📷 papan.jpg

+ Tambah foto

Diunggah oleh Budi Santoso (tutor) · 28 Mei 2026, 20:35 WIB · upload via presigned URL R2

⚠ Simulasi: jika dibatalkan sekarang

Sisa waktu ke sesi3 jam 12 menit sebelum mulai

Jenjang denda berlaku≤ 4 jam → 25%

Tagihan siswa (25% × Rp 200.000)Rp 50.000

Honor tutor (25% × Rp 140.000)Rp 35.000

TransportRp 0 (tutor tidak berangkat)

Penanggung denda ditentukan inisiatorSiswa / Tutor / Admin / Force majeure

Jenjang denda (snapshot) — pembatalan oleh siswa

Sisa waktu	Tagihan siswa	Honor tutor
< 1 jam	100%	100%
< 2 jam	50%	50%
< 4 jam ← berlaku	25%	25%
≥ 4 jam	0	0

Override (khusus admin) wajib disertai alasan dan tercatat di audit. Tombol Batalkan sesi di action bar atas membuka wizard pembatalan (sheet): inisiator → sisa waktu otomatis → pratinjau denda → override → alasan.

Riwayat sesi (audit — hanya tambah)

28 Mei 2026, 14:02

Disetujui — slot dikunci, harga + kebijakan di-snapshot. oleh Fahrul A. · IP 103.xx

28 Mei 2026, 13:48

Menunggu — sesi dibuat (langsung oleh admin). oleh Fahrul A.

28 Mei 2026, 13:48

Snapshot harga: tagihan Rp 200.000, honor Rp 140.000, transport Rp 10.000 (matrix v2026/2027). sistem

Setiap perubahan status dan edit tercatat. Retensi 7 tahun. Buka audit log lengkap (A1) untuk penanganan sengketa.

Isian per Tab (elaborated)

Tab Detail

Peserta (tutor+siswa, kontak, jarak, WA) · Jadwal & lokasi (datetime, durasi, mode, alamat+peta) · Harga snapshot (tagihan/honor/transport/margin, 🔒) · Kebijakan pembatalan snapshot.

Tab Materi

Kehadiran (siswa/tutor checkbox → no-show flow) · Materi (topik utama, sub-topik, halaman buku, PR/tugas, target sesi berikutnya) · Foto report (R2 presigned) · meta "diisi tutor kapan". Admin bisa edit kalo tutor lupa.

Tab Pembatalan (cancel calc preview)

Simulasi "jika dibatalkan sekarang" — lead-time live + bracket berlaku + charge siswa/honor tutor/transport. Bracket config snapshot table. Operator liat impact SEBELUM commit. Override ADMIN + alasan.

Tab Riwayat (audit)

Timeline insert-only semua transisi state + edit (who/when/IP/before-after). Lazy-load. Retensi 7thn. Drill ke A1 full audit buat dispute.

Open Knobs

Tab Materi edit-by-admin: full edit atau view + "minta tutor lengkapi" nudge? Strawman = admin full edit (proxy iter-1).
Tab Pembatalan: simulasi real-time (recompute lead-time tiap buka) — confirm.
Foto report: max berapa foto/sesi? Strawman = 5, masing-masing max 5MB.

Wireframe 4 / 10 · v2

Kalender — Week + Month, Conflict UX, NO Drag

Route: /schedule/calendar · klik toggle Minggu/Bulan · reschedule = explicit (klik event → detail → tombol), BUKAN drag

Jadwal/Kalender

⚠Jadwal bentrok — perlu diselesaikan· semua konflik mendatang (lintas-minggu)2

Budi Santoso terjadwal ganda Rab 28 Mei · 19:00 · minggu ini

Sesi #1042Budi → Andi · Mandarin HSK2 Disetujui ⚡
BENTROK Sesi #1051Budi → Rina · Mandarin Menunggu

Sari Maharani terjadwal ganda Sel 10 Jun · 16:00 · 2 minggu lagi

Sesi #1098Sari → Putri · Piano G3 Disetujui ⚡
BENTROK Sesi #1103Sari → Dimas · Piano Menunggu

26 – 31 Mei 2026

Cakupan: Global ▾Tutor: Semua ▾

Sen 26

Sel 27

Rab 28

Kam 29

Jum 30

Sab 31

15:00

Sari → Putri
Piano · SD 5

16:00

Sari → Putri
Piano · menunggu

17:00

Dedi → Reza
CPNS · selesai

18:00

19:00

⚠ 2 sesi bentrok

Budi → Andi
Mandarin

Budi → Rina
Mandarin

20:00

Maya → Tono
Bio · berlangsung

Klik slot kosong untuk buat sesi cepat. Klik event untuk buka detail (tombol Jadwal ulang / Batalkan ada di sana). Tidak ada drag — mencegah jadwal ulang tidak sengaja.

MenungguDisetujuiBerlangsungSelesai⚠ konflik

Conflict Detection — Current Approach + UX Options (elaborated)

Konflik = double-book (tutor sama, slot overlap). Akar: legacy gak ada DB constraint → race condition. v2 = GIST exclusion (DB-level prevention) + visual layer. Berikut opsi visual layer:

REKOMENDASI #1Prevention-first: block di create/approve time

Cegah konflik SEBELUM kejadian. Saat create/approve sesi → live check (debounced) → kalo overlap, inline error "Budi sudah ada sesi 19:00-20:30" + block submit. GIST constraint DB-level sebagai backstop (race-safe).

✓ Konflik gak pernah masuk. Best UX (Nielsen #5 error prevention). Race-safe.

✗ Perlu live-check di form (debounce query). Gak bantu konflik yang udah terlanjur ada (legacy import).

REKOMENDASI #2Conflict banner + jump (top of calendar)

Banner merah di atas kalender: "1 konflik minggu ini — [Lihat →]". Klik → scroll/highlight ke konflik. Agregat, gak ke-miss walau scroll. (Lihat banner di mockup atas.)

✓ Visible walau event ke-scroll. Aggregate count. Actionable jump.

✗ Butuh scan konflik per load. Reactive (udah terlanjur).

CURRENTInline red border + ⚠ pada event card

Event card yang overlap = border merah + ⚠ (lihat Rab 28 19:00 di mockup). Immediate context di lokasi konflik.

✓ Konteks tepat di lokasi. Langsung keliatan pas mandang slot itu.

✗ Ke-miss kalo slot ke-scroll keluar viewport. Gak ada aggregate count.

ALTConflict badge di day header

Hari yang ada konflik → badge ⚠ di header kolom hari (week) / pojok day cell (month — lihat 28 + 13 di month view). Glanceable per-hari.

✓ Glanceable per-hari. Bagus di month view (density tinggi).

✗ Gak nunjuk slot persis. Perlu drill.

ALTDedicated conflict panel / "Resolusi Konflik"

Panel/tab terpisah list semua konflik + aksi resolve (reschedule salah satu / cari pengganti / cancel). Buat ops yang sering handle konflik.

✓ Satu tempat resolve semua. Workflow-oriented.

✗ Over-engineered iter-1 kalo konflik jarang. Extra surface.

Rekomendasi REVISI iter-1 (per feedback: konflik harus UNMISSABLE): Subtle in-grid border kurang ke-notice — jadi ELEVATE konflik ke high-salience:

#1 Prevention (block di create/approve + GIST) — konflik BARU gak pernah lolos. PRIMARY defense.
Conflict Resolver card (prominent, atas kalender) — buat konflik EXISTING: merah, listed, pasangan sesi + aksi resolve 1-klik (reschedule/cari pengganti/tolak). Ini element unmissable utama (revisi: gue tadinya bilang panel over-engineered — feedback lu bener, ini WAJIB buat noticeability).
Toolbar conflict pill "⚠ 1 Konflik" (merah, selalu visible) — persistent reminder walau resolver di-dismiss.
Strong cell + day treatment — slot bentrok = bg merah + label "⚠ Bentrok 2 sesi". Month day = bg merah + day-number merah.

4 layer reinforcing: prevention (gak lolos) + resolver (actionable) + pill (persistent) + grid (kontekstual). Gak mungkin ke-miss.

Scope resolver = GLOBAL future conflicts (lintas-minggu), bukan cuma view aktif. Konflik 2 minggu lagi tetap muncul walau lu lagi liat minggu ini — gak ilang pas navigate. Past conflict (sesi udah lewat) → gak di resolver (gak bisa fix), flag di audit/report. Toolbar pill = global count. Banyak konflik (rare, prevention block mayoritas) → card list top + "lihat semua" kalo >N.

Komponen Kunci

NO drag-reschedule (founder concern)

Buang drag — cegah accidental reschedule (mis-schedule = sesi salah jadwal = fatal). Reschedule = explicit: klik event → detail sheet → tombol "Reschedule" → wizard pick datetime + confirm. Deliberate, gak accidental.

Conflict = prevention-first

GIST exclusion DB + live-check di create/approve. Block sebelum kejadian. Visual (banner+border+badge) buat existing.

Week + Month view

Week = time-grid detail (slot-level). Month = density overview (pill count per hari + status warna + konflik badge). Klik hari month → drill week.

Quick-create on slot

Klik slot kosong (week) / hari (month) → quick-create sheet pre-fill datetime + smart-default tutor.

Components

Custom grid (Tailwind). ToggleGroup (week/month). Sheet (event detail + reschedule wizard). Popover (hover preview). Alert (conflict banner). NO drag lib.

Status color + text (a11y)

Warna status BUKAN satu-satunya signal — ada label teks ("req"/"done"/"IN PROG"). Color-blind safe. WCAG.

Open Knobs

Conflict approach final: rekomendasi #1+#2+inline. Confirm? Atau tambah panel (#5)?
Month pill: count-only ("3 sesi") atau show nama? Strawman = count + warna dominan (hemat space), hover/klik detail.
Week jam range: dynamic collapse jam kosong atau fixed 15:00-21:00? Strawman = dynamic.
Quick-create on empty slot: confirm include iter-1 (smart-default tutor).

4 / 10 wireframes (v2 schedule) — tabs elaborated · month view · conflict UX options · no-drag.
Sisa: Audit Log · Tutup Periode Wizard · Pembatalan Sheet · Cron Jobs · Dashboard · ⌘K Palette.