Repository navigation
Expand file tree
/
Copy pathpanduan-pengguna.html
More file actions
367 lines (334 loc) · 40.4 KB
/
Copy pathpanduan-pengguna.html
File metadata and controls
367 lines (334 loc) · 40.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panduan Pengguna Safar — Alur Transaksi & RBAC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--cream:#efe8da; --card:#fffdf8; --panel:#faf7f0; --thead:#f6f1e6;
--line:#e9e0cd; --line2:#e6ddca; --line3:#eee5d3;
--ink:#2c281f; --ink2:#26221b; --mut:#6f6858; --mut2:#8c8371; --mut3:#9a917d; --mut4:#a89e88;
--forest:#16211b; --forest2:#1b2a20;
--primary:oklch(0.5 0.09 165); --gold:oklch(0.56 0.11 78); --goldb:oklch(0.62 0.11 78);
--ok:oklch(0.46 0.07 158); --okbg:oklch(0.95 0.03 158); --danger:oklch(0.55 0.15 28);
--r-mkt:oklch(0.5 0.1 322); --r-ops:oklch(0.56 0.11 45); --r-keu:oklch(0.46 0.07 158);
--r-pim:oklch(0.46 0.02 265); --r-jam:oklch(0.52 0.09 245); --r-adm:oklch(0.56 0.11 78);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:13px; line-height:1.55;}
.wrap{max-width:940px; margin:0 auto; padding:32px 24px 64px;}
.mono{font-family:'JetBrains Mono',monospace;}
/* Header */
.hero{background:linear-gradient(160deg,var(--forest),var(--forest2)); color:#e8e0cf; border-radius:16px; padding:28px 30px; display:flex; gap:16px; align-items:center; box-shadow:0 10px 30px -18px rgba(60,50,20,.5);}
.logo{width:46px; height:46px; border-radius:12px; background:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Marcellus',serif; font-size:24px; color:#20180a; flex:0 0 auto;}
.hero h1{font-family:'Marcellus',serif; font-weight:400; font-size:26px; margin:0; line-height:1.2;}
.hero p{margin:4px 0 0; font-size:12px; color:#9fb0a4;}
.printbtn{margin-left:auto; background:var(--goldb); color:#20180a; border:none; border-radius:9px; padding:10px 16px; font:600 12.5px 'Plus Jakarta Sans'; cursor:pointer;}
h2{font-family:'Marcellus',serif; font-weight:400; font-size:21px; color:var(--ink2); margin:38px 0 4px; padding-bottom:6px; border-bottom:2px solid var(--ok);}
.sub{font-size:12px; color:var(--mut3); margin:0 0 14px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:0 4px 16px -10px rgba(60,50,20,.3); overflow:hidden; break-inside:avoid;}
table{width:100%; border-collapse:collapse; font-size:12px;}
thead th{background:var(--thead); color:var(--mut3); font-size:10px; text-transform:uppercase; letter-spacing:.4px; text-align:left; padding:10px 12px; font-weight:600;}
tbody td{padding:9px 12px; border-top:1px solid var(--line3); vertical-align:top;}
tbody tr:nth-child(even){background:#fcfaf4;}
.chip{display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; color:#fff; white-space:nowrap;}
.c-mkt{background:var(--r-mkt);} .c-ops{background:var(--r-ops);} .c-keu{background:var(--r-keu);}
.c-pim{background:var(--r-pim);} .c-jam{background:var(--r-jam);} .c-adm{background:var(--r-adm); color:#20180a;}
/* Alur */
.flow{display:flex; flex-direction:column; gap:0; margin-top:14px;}
.fstep{display:flex; gap:14px; break-inside:avoid;}
.fnum{display:flex; flex-direction:column; align-items:center; flex:0 0 34px;}
.fdot{width:30px; height:30px; border-radius:50%; background:var(--forest); color:var(--goldb); font:700 13px 'JetBrains Mono'; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.fline{width:2px; flex:1; background:var(--line2); min-height:14px;}
.fbody{flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:12px; box-shadow:0 4px 16px -10px rgba(60,50,20,.3);}
.fbody b.t{font-size:13.5px;}
.fmeta{font-size:11px; color:var(--mut2); margin-top:2px;}
.fauto{margin-top:7px; background:var(--panel); border-left:3px solid var(--goldb); border-radius:0 8px 8px 0; padding:7px 11px; font-size:11px; color:#5a5445;}
.fauto .mono{font-size:10px; color:var(--ok);}
.mark{font-size:14px;} .see{opacity:.85;}
.legend{font-size:11px; color:var(--mut2); margin:8px 2px 0;}
.jr{font-size:10.5px;}
.scen{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.scen .card{padding:14px 16px;}
.scen b{font-size:12.5px;}
.scen p{margin:6px 0 0; font-size:11.5px; color:#5a5445;}
.note{background:var(--okbg); border:1px solid oklch(0.9 0.03 158); border-radius:11px; padding:12px 16px; font-size:11.5px; color:#4a4436; margin-top:14px; break-inside:avoid;}
footer{margin-top:40px; text-align:center; font-size:10px; color:var(--mut4); font-family:'JetBrains Mono',monospace;}
@media print{
@page{size:A4; margin:1.4cm;}
body{background:#fff; font-size:11.5px;}
.wrap{max-width:none; padding:0;}
.printbtn{display:none;}
.hero{border-radius:10px; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
*{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
h2{break-after:avoid;}
.card,.fstep,.note{break-inside:avoid;}
}
@media (max-width:720px){ .scen{grid-template-columns:1fr;} .tscroll{overflow-x:auto;} }
</style>
</head>
<body>
<div class="wrap">
<div class="hero">
<div class="logo">S</div>
<div>
<h1>Panduan Pengguna Safar</h1>
<p>Alur Transaksi & Hak Akses (RBAC) — Sistem Informasi Manajemen Travel Haji & Umrah · PT Safar Barokah Wisata</p>
</div>
<button class="printbtn" onclick="window.print()">Cetak / Simpan PDF</button>
</div>
<p style="margin-top:14px; font-size:12px; color:var(--mut2);">
Manual ini menjelaskan <b>siapa melakukan apa, di halaman mana, dan apa yang terjadi otomatis di belakang layar</b>.
Akun demo (password <span class="mono">safar123</span>): admin@ · keuangan@ · ops@ · marketing@ · pimpinan@ — semua <span class="mono">safar.co.id</span>.
</p>
<p style="margin-top:8px; font-size:12px; color:var(--mut2);">
<b>Header setiap halaman:</b> <b>Pencarian global</b> (ketik ≥2 huruf → jamaah/paket/invoice, klik untuk membuka) dan <b>Lonceng notifikasi</b> (dokumen & pembayaran yang menunggu verifikasi; titik merah menyala hanya bila ada antrean).
</p>
<p style="margin-top:8px; font-size:12px; color:var(--mut2);">
<b>Sesi login bertahan saat halaman dimuat ulang:</b> menekan refresh (F5) atau membuka Safar di beberapa tab <b>tidak lagi</b> memaksa Anda masuk kembali — sesi dipulihkan otomatis dan aman. Untuk mengakhiri sesi, gunakan tombol <b>Keluar</b> di kiri bawah.
</p>
<!-- ====== 1. Peran ====== -->
<h2>1 · Enam Peran dan Tanggung Jawabnya</h2>
<p class="sub">Admin selalu lolos semua pemeriksaan role. Pimpinan bisa membuka halaman namun tombol aksi ditolak server (403).</p>
<div class="card"><table>
<thead><tr><th style="width:120px">Peran</th><th style="width:150px">Siapa</th><th>Tanggung jawab utama</th></tr></thead>
<tbody>
<tr><td><span class="chip c-adm">Admin</span></td><td>Pengelola sistem</td><td>Semua akses + kelola pengguna, role, audit log</td></tr>
<tr><td><span class="chip c-mkt">Marketing</span></td><td>Tim penjualan</td><td>Paket & jadwal, agen & referral, leads (komisi disetujui Keuangan)</td></tr>
<tr><td><span class="chip c-ops">Operasional</span></td><td>Tim ops/dokumen</td><td>Verifikasi dokumen, manifest, visa, tiket, rombongan, checklist</td></tr>
<tr><td><span class="chip c-keu">Keuangan</span></td><td>Kasir & akuntan</td><td>Pembayaran, kwitansi, 4 transaksi akuntansi, jurnal, rekonsiliasi, laporan keuangan</td></tr>
<tr><td><span class="chip c-pim">Pimpinan</span></td><td>Direksi</td><td><b>Hanya melihat</b>: dashboard & seluruh laporan</td></tr>
<tr><td><span class="chip c-jam">Jamaah</span></td><td>Pelanggan</td><td>Portal mandiri: status, bayar (VA), unggah dokumen, itinerary</td></tr>
</tbody>
</table></div>
<!-- ====== 2. Alur ====== -->
<h2>2 · Alur Transaksi End-to-End</h2>
<p class="sub">Ikuti dari atas ke bawah — kotak kuning adalah proses yang berjalan <b>otomatis</b> tanpa input pengguna.</p>
<div class="flow">
<div class="fstep"><div class="fnum"><div class="fdot">0</div><div class="fline"></div></div><div class="fbody">
<b class="t">Siapkan master data</b> <span class="chip c-mkt">Marketing</span> <span class="chip c-keu">Keuangan</span>
<div class="fmeta">Sekali di awal / saat ada mitra baru. <span class="mono">/paket/master</span>: kategori paket, hotel, maskapai (Marketing) · <span class="mono">/keuangan-master</span>: vendor & rekening bank (Keuangan). Pilihan langsung muncul di form Tambah Paket, wizard, dan Input Transaksi.</div>
<div class="fauto">⚙ Dijaga sistem: master yang masih dipakai paket/tagihan/jurnal/pembayaran <b>tidak bisa dihapus</b> · kode akun rekening wajib sudah ada di COA kelas 1 · <b>saldo rekening tidak bisa diedit</b> — hanya bergerak lewat jurnal.</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">1</div><div class="fline"></div></div><div class="fbody">
<b class="t">Pendaftaran jamaah</b> <span class="chip c-jam">Jamaah</span> <span class="chip c-mkt">Marketing</span>
<div class="fmeta">Halaman publik <span class="mono">/daftar</span> — wizard 6 langkah: paket → data diri → dokumen → kamar → skema bayar → konfirmasi akad wakalah. Opsional: kode referral agen.</div>
<div class="fauto">⚙ Otomatis: nomor registrasi <span class="mono">UMR/HAJ-tahun-seri</span> · kuota kursi berkurang · <b>invoice + jadwal termin terbit</b> (cicilan = DP 5 jt + 5 termin) · bila ada kode agen → lead terkonversi + komisi <i>pending</i>. Validasi: paspor ≥ 7 bulan, perempuan < 45 th wajib mahram, kuota real-time.</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">2</div><div class="fline"></div></div><div class="fbody">
<b class="t">Verifikasi dokumen & koreksi data jamaah</b> <span class="chip c-ops">Operasional</span>
<div class="fmeta"><span class="mono">/jamaah</span> → klik nama → ✓ Verifikasi / Tolak per dokumen (KTP, KK, Paspor, Pas Foto, Vaksin; Buku Nikah opsional). Tombol <b>Edit</b> untuk koreksi data (nama, HP, gender, alamat, kontak darurat, mahram). Berkas dokumen (paspor/KTP = data pribadi) dibuka lewat tombol <b>Lihat file</b> — hanya setelah login.</div>
<div class="fauto">⚙ Otomatis: saat 5 dokumen wajib terverifikasi → status registrasi menjadi <b>Aktif</b>. Setiap koreksi data tercatat di audit log.</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">3</div><div class="fline"></div></div><div class="fbody">
<b class="t">Terima & verifikasi pembayaran jamaah</b> <span class="chip c-keu">Keuangan</span>
<div class="fmeta"><span class="mono">/pembayaran</span> → Kelola, atau <span class="mono">/keuangan/input</span> → Terima Pembayaran. Jamaah membayar via VA BSI dari portal.</div>
<div class="fauto">⚙ Otomatis saat verifikasi: termin lunas · <b>kwitansi bernomor + terbilang</b> · invoice <span class="mono">INV/YYYY/MM/NNNN</span> · jurnal <span class="mono">Dr Bank/Kas · Cr 2-1100 Uang Muka Jamaah</span> — dana jamaah = <b>liabilitas</b>, bukan pendapatan. Pengaman: <b>wajib rekening IDR</b> · nominal <b>tidak melebihi sisa tagihan</b> · satu termin tak bisa dilunasi dua kali.</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">4</div><div class="fline"></div></div><div class="fbody">
<b class="t">Operasional pra-keberangkatan</b> <span class="chip c-ops">Operasional</span> · <b class="t" style="font-size:12px">Bayar vendor</b> <span class="chip c-keu">Keuangan</span>
<div class="fmeta"><span class="mono">/operasional</span>: perbarui visa (Proses/Biometrik/Terbit), PNR tiket, rombongan & muthawwif — manifest siap. <span class="mono">/keuangan/input</span> → Pembayaran Biaya utk hotel/tiket/visa (bisa valas SAR/USD).</div>
<div class="fauto">⚙ Otomatis: paspor < 7 bulan ditandai merah di manifest · jurnal biaya IDR × kurs per cost center · selisih kurs pelunasan hutang valas → akun <span class="mono">7-1000</span>.</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">5</div><div class="fline"></div></div><div class="fbody">
<b class="t">Keberangkatan — pengakuan pendapatan (PSAK 72)</b> <span class="chip c-keu">Keuangan</span>
<div class="fmeta"><span class="mono">/keuangan/input</span> → Pengakuan Pendapatan, pada tanggal keberangkatan grup.</div>
<div class="fauto">⚙ Otomatis: jurnal reclass <span class="mono">Dr 2-1100 · Cr 4-1000/4-2000</span> + HPP <span class="mono">Dr 5-xxxx · Cr 1-1400</span>. Sejak ini laba per paket muncul di dashboard & laporan. Pengaman: <b>tak bisa diakui dua kali</b> per keberangkatan & <b>tak melebihi dana jamaah yang diterima</b> (2-1100 tak negatif).</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">6</div><div class="fline"></div></div><div class="fbody">
<b class="t">Siklus komisi agen</b> <span class="chip c-keu">Keuangan</span>
<div class="fmeta"><span class="mono">/marketing</span> → <b>Setujui</b> (hanya bila registrasi aktif & agen aktif) → <b>Bayar</b> → opsional <b>Batalkan</b> (storno). Pemisahan tugas: Marketing membuat agen, Keuangan menyetujui/membayar.</div>
<div class="fauto">⚙ Otomatis: setujui <span class="mono">Dr 6-2000 · Cr 2-1400</span> · bayar <span class="mono">Dr 2-1400 · Cr Bank</span> · batalkan = jurnal balik. KPI "Komisi Terhutang" = saldo riil 2-1400. Kode referral divalidasi live di wizard.</div>
</div></div>
<div class="fstep"><div class="fnum"><div class="fdot">7</div></div><div class="fbody">
<b class="t">Tutup buku: jurnal manual, rekonsiliasi, laporan</b> <span class="chip c-keu">Keuangan</span> <span class="chip c-pim">Pimpinan</span>
<div class="fmeta"><span class="mono">/keuangan/jurnal</span> (rekonsiliasi bank, jurnal manual) → <span class="mono">/laporan-keuangan</span> & <span class="mono">/laporan-operasional</span> + ekspor Excel/PDF.</div>
<div class="fauto">⚙ Dijaga sistem: setiap jurnal wajib <b>balance</b> (Σdebit = Σkredit) · neraca selalu seimbang · semua mutasi terekam <b>audit log</b>.</div>
</div></div>
</div>
<!-- ====== 3. RBAC ====== -->
<h2>3 · Matriks Hak Akses (RBAC)</h2>
<p class="sub">Disusun dari pemeriksaan role yang terpasang di API. <span class="chip c-adm">Admin</span> = kelola di semua baris.</p>
<div class="card tscroll"><table>
<thead><tr>
<th>Modul / Halaman</th>
<th style="text-align:center">Marketing</th><th style="text-align:center">Operasional</th>
<th style="text-align:center">Keuangan</th><th style="text-align:center">Pimpinan</th><th style="text-align:center">Jamaah</th>
</tr></thead>
<tbody>
<tr><td>Dashboard eksekutif <span class="mono">/</span></td><td align="center" class="see">👁</td><td align="center" class="see">👁</td><td align="center" class="see">👁</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Paket & jadwal <span class="mono">/paket</span></td><td align="center" class="mark">✅</td><td align="center">—</td><td align="center" class="see">👁 HPP</td><td align="center" class="see">👁</td><td align="center" class="see">👁 wizard</td></tr>
<tr><td>Master data paket: kategori, hotel, maskapai <span class="mono">/paket/master</span></td><td align="center" class="mark">✅</td><td align="center">—</td><td align="center">—</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Jamaah & dokumen <span class="mono">/jamaah</span></td><td align="center" class="see">👁</td><td align="center" class="mark">✅ verifikasi + edit</td><td align="center" class="see">👁</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Pendaftaran <span class="mono">/daftar</span></td><td align="center" class="mark">✅ dampingi</td><td align="center">—</td><td align="center">—</td><td align="center">—</td><td align="center" class="mark">✅ publik</td></tr>
<tr><td>Pembayaran & kwitansi <span class="mono">/pembayaran</span></td><td align="center" class="see">👁 piutang</td><td align="center">—</td><td align="center" class="mark">✅ catat+verifikasi</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Manifest, visa, tiket <span class="mono">/operasional</span></td><td align="center">—</td><td align="center" class="mark">✅</td><td align="center">—</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Laporan operasional (aging/dokumen/kesiapan)</td><td align="center">—</td><td align="center" class="mark">✅ + ekspor</td><td align="center" class="see">👁 + ekspor</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Input Transaksi 4 tipe <span class="mono">/keuangan/input</span></td><td align="center">—</td><td align="center">—</td><td align="center" class="mark">✅</td><td align="center">—</td><td align="center">—</td></tr>
<tr><td>Jurnal, buku besar, COA, rekonsiliasi</td><td align="center">—</td><td align="center">—</td><td align="center" class="mark">✅</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Master data keuangan: vendor, rekening bank <span class="mono">/keuangan-master</span></td><td align="center">—</td><td align="center">—</td><td align="center" class="mark">✅</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Laporan keuangan (LR/Neraca/per Paket)</td><td align="center" class="see">👁 per paket</td><td align="center">—</td><td align="center" class="mark">✅ + ekspor</td><td align="center" class="see">👁 + ekspor</td><td align="center">—</td></tr>
<tr><td>Agen & leads <span class="mono">/marketing</span></td><td align="center" class="mark">✅</td><td align="center">—</td><td align="center" class="see">👁</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Komisi: setujui / bayar / batalkan</td><td align="center" class="see">👁</td><td align="center">—</td><td align="center" class="mark">✅</td><td align="center" class="see">👁</td><td align="center">—</td></tr>
<tr><td>Pengguna, role, audit log <span class="mono">/admin</span></td><td align="center">—</td><td align="center">—</td><td align="center">—</td><td align="center">—</td><td align="center">—</td></tr>
<tr><td>Portal jamaah <span class="mono">/portal</span></td><td align="center">—</td><td align="center">—</td><td align="center">—</td><td align="center">—</td><td align="center" class="mark">✅</td></tr>
</tbody>
</table></div>
<div class="legend">✅ = kelola (buat/ubah) · 👁 = hanya lihat · — = tidak ada akses</div>
<!-- ====== 4. Jurnal ====== -->
<h2>4 · Peta Jurnal Otomatis — siapa memicu, jurnal apa terbentuk</h2>
<p class="sub">Semua jurnal dibuat mesin melalui satu pintu (journal engine) dan wajib balance. Referensi: dokumen Chart of Accounts (alur A–F).</p>
<div class="card"><table>
<thead><tr><th style="width:44px">Kode</th><th>Pemicu</th><th style="width:110px">Oleh</th><th>Ayat jurnal</th></tr></thead>
<tbody>
<tr><td class="mono">A/B</td><td>Verifikasi pembayaran jamaah</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 1-1100/1-12xx Bank/Kas · Cr 2-1100 Uang Muka Jamaah</td></tr>
<tr><td class="mono">C</td><td>Pembayaran biaya / DP vendor (opsional valas)</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 1-1400 / 5-xxxx (IDR × kurs) · Cr Bank — selisih kurs → 7-1000</td></tr>
<tr><td class="mono">D</td><td>Pengakuan pendapatan saat keberangkatan</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 2-1100 · Cr 4-1000 / 4-2000</td></tr>
<tr><td class="mono">E</td><td>Pengakuan HPP saat keberangkatan</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 5-1000…5-7000 per komponen · Cr 1-1400</td></tr>
<tr><td class="mono">F</td><td>Persetujuan komisi agen</td><td><span class="chip c-keu">Keu</span></td><td class="mono jr">Dr 6-2000 · Cr 2-1400</td></tr>
<tr><td class="mono">F2</td><td>Pembayaran komisi agen</td><td><span class="chip c-keu">Keu</span></td><td class="mono jr">Dr 2-1400 · Cr Bank/Kas</td></tr>
<tr><td class="mono">—</td><td>Jurnal manual (adm bank, penyesuaian)</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Bebas — wajib balance</td></tr>
</tbody>
</table></div>
<div class="note"><b>Prinsip yang dijaga sistem</b> (tidak bisa dilanggar pengguna): dana jamaah adalah <b>liabilitas</b> sampai keberangkatan (akad wakalah/ijarah, PSAK 72) · setiap keberangkatan = <b>cost center</b> · setiap jurnal balance · setiap mutasi terekam audit log.</div>
<h3 style="font-family:'Marcellus',serif; font-weight:400; font-size:15px; margin:20px 0 6px;">Pengaman yang mungkin Anda temui</h3>
<p class="sub">Sistem menolak aksi berikut demi menjaga data tetap benar — bila muncul pesan penolakan, itu bekerja sebagaimana mestinya.</p>
<div class="card" style="font-size:12px; line-height:1.9;">
• Pembayaran jamaah via rekening <b>non-IDR</b> (invoice & liabilitas dalam Rupiah; biaya vendor valas tetap lewat <i>Pembayaran Biaya</i>)<br>
• Nominal pembayaran <b>melebihi sisa tagihan</b>, atau melunasi/memverifikasi termin yang sudah lunas dua kali<br>
• <b>Mengakui pendapatan dua kali</b> untuk keberangkatan yang sama, atau <b>melebihi dana jamaah yang sudah diterima</b> (agar 2-1100 tak negatif)<br>
• <b>Menghapus master</b> (kategori/hotel/maskapai/vendor/rekening) yang masih dipakai paket, tagihan, jurnal, atau pembayaran<br>
• <b>Jurnal manual tidak balance</b> (Σdebit ≠ Σkredit) — ditolak, tidak tersimpan pincang<br>
• <b>Menyelesaikan rekonsiliasi</b> saat selisih belum terjelaskan / masih ada mutasi bank belum dibukukan — ditolak; periode yang sudah <b>Selesai</b> terkunci (pencocokan & penyesuaian tak bisa diubah)<br>
• <b>Membuka berkas dokumen tanpa login</b> — paspor/KTP hanya untuk staf berwenang
</div>
<!-- Rekonsiliasi bank: alur ringkas -->
<h2>Rekonsiliasi Bank — Alur Ringkas</h2>
<p class="sub">Tab <b>Rekonsiliasi</b> di <span class="mono">/keuangan/jurnal</span> — mencocokkan buku besar dengan lembar rekening koran bank.</p>
<div class="card" style="font-size:12px; line-height:1.9;">
<b>1.</b> Pilih rekening & bulan → <b>Mulai Rekonsiliasi</b>: isi tanggal cut-off + <b>saldo akhir dari lembar koran</b> (angka riil bank).<br>
<b>2.</b> Sistem menampilkan <b>selisih nyata</b> (koran − buku) dan <b>selisih tak terjelaskan</b> — 0 berarti seluruh selisih sudah dijelaskan; ≠0 berarti ada yang perlu ditelusuri.<br>
<b>3.</b> <b>Cocokkan</b> mutasi koran ke baris jurnal (nominal harus sama); <b>Posting</b> item bank yang belum dibukukan (jasa giro → 4-9000, biaya adm → 7-2000) agar buku menyusul; setoran/penarikan dalam perjalanan cukup jadi item pendamai.<br>
<b>4.</b> <b>Selesaikan Rekonsiliasi</b> → periode terkunci, tercatat siapa & kapan. Mutasi bisa dientri manual atau <b>impor CSV</b> (anti-duplikat via referensi).
</div>
<p class="sub" style="margin-top:14px;">Status rekonsiliasi — <b>tiap rekening bank punya status sendiri per bulan</b>:</p>
<div class="card" style="font-size:12px; line-height:1.9;">
• <b>Belum dimulai</b> — belum ada sesi; muncul form <i>Mulai Rekonsiliasi</i>.<br>
• <b>Draft</b> — sedang dikerjakan; saldo koran, mutasi, dan pencocokan masih bisa diubah/ditambah. Badge <span class="chip" style="background:oklch(0.96 0.04 78); color:oklch(0.5 0.1 78)">● Draft</span>.<br>
• <b>Selesai & terkunci</b> — sudah difinalisasi; pencocokan & penyesuaian <b>tidak bisa diubah lagi</b>, tercatat pereview + tanggal + sisa selisih timing. Badge <span class="chip" style="background:oklch(0.95 0.03 158); color:oklch(0.42 0.07 158)">● Selesai & terkunci</span>.<br>
<span style="color:var(--mut2)">Rekening tanpa mutasi bulan itu langsung seimbang (selisih 0) dan bisa langsung diselesaikan. Rekening ber-aktivitas perlu mutasi koran dimasukkan & dicocokkan dulu sebelum bisa diselesaikan.</span>
</div>
<!-- ====== 5. Skenario ====== -->
<h2>5 · Skenario Cepat per Peran</h2>
<div class="scen">
<div class="card"><b><span class="chip c-mkt">Marketing</span> — hari kerja biasa</b>
<p><span class="mono">/paket</span> tambah paket/jadwal (butuh kategori/hotel/maskapai baru? tambahkan dulu di <span class="mono">/paket/master</span>) → <span class="mono">/marketing</span> registrasi agen, cek leads & konversi, setujui komisi → dampingi calon jamaah di <span class="mono">/daftar</span> dengan kode referral agen.</p></div>
<div class="card"><b><span class="chip c-ops">Operasional</span> — menjelang keberangkatan</b>
<p><span class="mono">/jamaah</span> tab <i>Dokumen Belum Lengkap</i> → verifikasi/tolak → <span class="mono">/operasional</span> perbarui visa & PNR → <span class="mono">/laporan-operasional</span> tab <i>Kesiapan</i>: kejar metrik merah.</p></div>
<div class="card"><b><span class="chip c-keu">Keuangan</span> — siklus harian & bulanan</b>
<p><span class="mono">/pembayaran</span> verifikasi setoran (kwitansi & jurnal otomatis) → <span class="mono">/keuangan/input</span> bayar vendor & posting PSAK 72 saat keberangkatan → akhir bulan: rekonsiliasi bank → <span class="mono">/laporan-keuangan</span> + ekspor. Vendor / rekening bank baru: daftarkan dulu di <span class="mono">/keuangan-master</span> (rekening terikat COA kelas 1, lahir bersaldo 0).</p></div>
<div class="card"><b><span class="chip c-pim">Pimpinan</span> & <span class="chip c-jam">Jamaah</span></b>
<p>Pimpinan: cukup dashboard <span class="mono">/</span> + kedua laporan — angka live dari jurnal, tanpa risiko mengubah data. Jamaah: daftar di <span class="mono">/daftar</span>, simpan nomor registrasi, pantau semuanya di <span class="mono">/portal</span> (login No. Registrasi + NIK).</p></div>
</div>
<!-- ====== 6. Skenario lengkap ====== -->
<h2>6 · Skenario Lengkap: Satu Jamaah dari Pendaftaran sampai Laporan Keuangan</h2>
<p class="sub">
<b>Bpk. Hasan Basri</b> · paket <b>Umrah Plus Turki Rp 39.900.000</b> (Quad) · skema <b>Cicilan</b> · lewat agen <b>Barokah Tour (BRKH-07, komisi 3%)</b>.
Porsi biaya vendor jamaah ini Rp 29.500.000 (hotel 13,5 jt · tiket 11 jt · visa 3 jt · katering 2 jt).
</p>
<div class="card tscroll"><table>
<thead><tr><th style="width:26px">#</th><th>Kejadian</th><th style="width:96px">Siapa</th><th>Jurnal otomatis</th><th>Efek di laporan</th></tr></thead>
<tbody>
<tr><td>1</td><td>Hasan mengisi wizard <span class="mono">/daftar</span> + kode <span class="mono">BRKH-07</span></td><td><span class="chip c-jam">Jamaah</span></td><td class="jr"><i>(belum ada jurnal)</i> — invoice 39,9 jt + 6 termin terbit; komisi 1.197.000 <i>pending</i></td><td>Belum ada — belum ada uang berpindah</td></tr>
<tr><td>2</td><td>Verifikasi 5 dokumen → registrasi <b>Aktif</b></td><td><span class="chip c-ops">Ops</span></td><td class="jr">—</td><td>Laporan kepatuhan dokumen: hijau</td></tr>
<tr><td>3</td><td>Bayar DP 5 jt via VA → diverifikasi</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 1-1200 Bank 5.000.000<br>Cr 2-1100 UM Jamaah 5.000.000</td><td><b>Neraca</b> bergerak; <b>Laba Rugi TIDAK</b> — uang jamaah bukan pendapatan</td></tr>
<tr><td>4</td><td>Seluruh termin lunas (39,9 jt) + kwitansi per pembayaran</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Σ Dr Bank 39,9 jt · Cr 2-1100 39,9 jt</td><td>Kartu piutang: <b>Lunas</b></td></tr>
<tr><td>5</td><td>Bayar DP vendor porsi Hasan 29,5 jt</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 1-1400 UM Vendor 29,5 jt<br>Cr 1-1200 Bank 29,5 jt</td><td>Komposisi aset berubah — total tetap; LR masih nol</td></tr>
<tr><td>6</td><td><b>Tanggal keberangkatan</b> — PSAK 72</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 2-1100 39,9 · Cr 4-1000 39,9<br>Dr 5-2000 13,5 + 5-1000 11 + 5-3000 3 + 5-4000 2 · Cr 1-1400 29,5</td><td><b>Baru sekarang LR terisi</b>: laba kotor <b>10,4 jt</b>; liabilitas 2-1100 kembali 0</td></tr>
<tr><td>7</td><td>Komisi disetujui</td><td><span class="chip c-mkt">Mkt</span></td><td class="mono jr">Dr 6-2000 1.197.000<br>Cr 2-1400 1.197.000</td><td>Laba bersih → <b>9.203.000</b></td></tr>
<tr><td>8</td><td>Komisi dibayar ke agen (jurnal manual)</td><td><span class="chip c-keu">Keuangan</span></td><td class="mono jr">Dr 2-1400 1.197.000<br>Cr 1-1200 Bank 1.197.000</td><td>Hutang lunas; kas akhir = laba bersih</td></tr>
</tbody>
</table></div>
<h3 style="font-family:'Marcellus',serif; font-weight:400; font-size:15px; margin:20px 0 6px;">Saldo berjalan — bukti neraca selalu seimbang <span style="font-size:11px; color:var(--mut3)">(ribuan Rp)</span></h3>
<div class="card tscroll"><table>
<thead><tr><th>Setelah langkah…</th><th style="text-align:right">1-1200 Bank</th><th style="text-align:right">1-1400 UM Vendor</th><th style="text-align:right">2-1100 UM Jamaah</th><th style="text-align:right">2-1400 Ht. Komisi</th><th style="text-align:right">Laba (ekuitas)</th><th style="text-align:center">Seimbang?</th></tr></thead>
<tbody class="mono" style="font-size:11px">
<tr><td style="font-family:'Plus Jakarta Sans'">4 · semua termin lunas</td><td align="right">39.900</td><td align="right">0</td><td align="right">39.900</td><td align="right">0</td><td align="right">0</td><td align="center">✅ 39.900 = 39.900</td></tr>
<tr><td style="font-family:'Plus Jakarta Sans'">5 · DP vendor</td><td align="right">10.400</td><td align="right">29.500</td><td align="right">39.900</td><td align="right">0</td><td align="right">0</td><td align="center">✅ 39.900 = 39.900</td></tr>
<tr><td style="font-family:'Plus Jakarta Sans'">6 · keberangkatan (PSAK 72)</td><td align="right">10.400</td><td align="right">0</td><td align="right">0</td><td align="right">0</td><td align="right">10.400</td><td align="center">✅ 10.400 = 10.400</td></tr>
<tr><td style="font-family:'Plus Jakarta Sans'">7 · komisi diakui</td><td align="right">10.400</td><td align="right">0</td><td align="right">0</td><td align="right">1.197</td><td align="right">9.203</td><td align="center">✅ 10.400 = 10.400</td></tr>
<tr><td style="font-family:'Plus Jakarta Sans'">8 · komisi dibayar</td><td align="right">9.203</td><td align="right">0</td><td align="right">0</td><td align="right">0</td><td align="right">9.203</td><td align="center">✅ 9.203 = 9.203</td></tr>
</tbody>
</table></div>
<h3 style="font-family:'Marcellus',serif; font-weight:400; font-size:15px; margin:20px 0 6px;">Tampilannya di <span class="mono" style="font-size:12px">/laporan-keuangan</span> — kontribusi Hasan saja</h3>
<div style="display:grid; grid-template-columns:1.2fr 1fr; gap:12px;" class="scen">
<div class="card" style="padding:16px 18px;">
<div style="text-align:center; font-family:'Marcellus',serif; font-size:15px;">Laporan Laba Rugi</div>
<div style="text-align:center; font-size:10px; color:var(--mut3); margin-bottom:8px;">terisi hanya setelah langkah 6</div>
<table style="font-size:11px;">
<tbody>
<tr><td style="border:0; padding:4px 0; color:var(--ok); font-weight:700; font-size:10px; text-transform:uppercase; border-bottom:2px solid var(--ok);" colspan="2">Pendapatan Usaha</td></tr>
<tr><td style="border:0; padding:3px 0 3px 12px;"><span class="mono" style="font-size:10px; color:var(--mut4)">4-1000</span> Pendapatan Jasa Umrah</td><td class="mono" style="border:0; text-align:right;">39.900.000</td></tr>
<tr><td style="border:0; padding:4px 0; color:var(--ok); font-weight:700; font-size:10px; text-transform:uppercase; border-bottom:2px solid var(--ok);" colspan="2">Beban Pokok Jasa (HPP)</td></tr>
<tr><td style="border:0; padding:3px 0 3px 12px;"><span class="mono" style="font-size:10px; color:var(--mut4)">5-1000</span> Beban Tiket Maskapai</td><td class="mono" style="border:0; text-align:right;">11.000.000</td></tr>
<tr><td style="border:0; padding:3px 0 3px 12px;"><span class="mono" style="font-size:10px; color:var(--mut4)">5-2000</span> Beban Hotel & Akomodasi</td><td class="mono" style="border:0; text-align:right;">13.500.000</td></tr>
<tr><td style="border:0; padding:3px 0 3px 12px;"><span class="mono" style="font-size:10px; color:var(--mut4)">5-3000</span> Beban Visa</td><td class="mono" style="border:0; text-align:right;">3.000.000</td></tr>
<tr><td style="border:0; padding:3px 0 3px 12px;"><span class="mono" style="font-size:10px; color:var(--mut4)">5-4000</span> Beban Katering</td><td class="mono" style="border:0; text-align:right;">2.000.000</td></tr>
<tr><td style="border:0; padding:4px 0; font-weight:700; border-top:1px solid var(--line2);">LABA KOTOR <span style="font-weight:400; font-size:10px; color:var(--mut3)">(margin 26%)</span></td><td class="mono" style="border:0; text-align:right; font-weight:700; border-top:1px solid var(--line2);">10.400.000</td></tr>
<tr><td style="border:0; padding:3px 0 3px 12px;"><span class="mono" style="font-size:10px; color:var(--mut4)">6-2000</span> Beban Komisi Agen</td><td class="mono" style="border:0; text-align:right;">1.197.000</td></tr>
<tr><td style="border:0; padding:6px 8px; font-weight:800; background:var(--okbg); border-radius:7px;">LABA BERSIH</td><td class="mono" style="border:0; text-align:right; font-weight:800; background:var(--okbg); border-radius:7px;">9.203.000</td></tr>
</tbody>
</table>
</div>
<div class="card" style="padding:16px 18px;">
<div style="text-align:center; font-family:'Marcellus',serif; font-size:15px;">Neraca <span style="font-size:10px; color:var(--mut3)">(setelah langkah 8)</span></div>
<table style="font-size:11px; margin-top:8px;">
<tbody>
<tr><td style="border:0; padding:3px 0;">Bank — IDR (1-1200)</td><td class="mono" style="border:0; text-align:right;">9.203.000</td></tr>
<tr><td style="border:0; padding:3px 0; font-weight:700; border-top:1px solid var(--line2);">Total Aset</td><td class="mono" style="border:0; text-align:right; font-weight:700; border-top:1px solid var(--line2);">9.203.000</td></tr>
<tr><td style="border:0; padding:3px 0;">Total Liabilitas</td><td class="mono" style="border:0; text-align:right;">0</td></tr>
<tr><td style="border:0; padding:3px 0;">Laba Tahun Berjalan (3-3000)</td><td class="mono" style="border:0; text-align:right;">9.203.000</td></tr>
<tr><td style="border:0; padding:3px 0; font-weight:700; border-top:1px solid var(--line2);">Total Liabilitas + Ekuitas</td><td class="mono" style="border:0; text-align:right; font-weight:700; border-top:1px solid var(--line2);">9.203.000</td></tr>
</tbody>
</table>
<div style="margin-top:10px; background:var(--okbg); border-radius:8px; padding:8px 10px; font-size:11px; text-align:center; color:#3a5a45; font-weight:600;">✓ Neraca seimbang — kas tersisa = laba bersih</div>
<p style="font-size:10.5px; color:var(--mut2); margin:10px 0 0;">Jejak yang sama terlihat di <b>Laba Rugi per Paket</b> (baris Plus Turki: jamaah +1, laba kotor +10,4 jt), <b>dashboard</b>, <b>buku besar</b> tiap akun, dan <b>audit log</b>.</p>
</div>
</div>
<div class="note"><b>Pelajaran kunci</b>: selama uang jamaah masuk (langkah 3–4) laporan laba rugi <i>sengaja tidak bergerak</i> — itulah inti PSAK 72/akad wakalah yang dijaga sistem. Pendapatan & laba baru muncul saat jasa ditunaikan (keberangkatan, langkah 6).</div>
<!-- ====== 7. Alur lapangan (Mabrur) ====== -->
<h2>7 · Alur Lapangan — Integrasi Aplikasi Mabrur</h2>
<p class="sub">Menjelang & selama keberangkatan, Safar terhubung dengan aplikasi mobile <b style="color:#8B2E2E">Mabrur</b> (panduan ibadah, geofence miqat, penghitung tawaf/sa'i, SOS).</p>
<div class="card"><table>
<thead><tr><th style="width:26px">#</th><th>Langkah</th><th style="width:120px">Siapa</th><th>Di mana</th></tr></thead>
<tbody>
<tr><td>1</td><td>Lengkapi rombongan: <b>nomor HP muthawwif/TL wajib</b> (penerima SOS), tetapkan jamaah + kamar</td><td><span class="chip c-ops">Operasional</span></td><td><span class="mono">/operasional</span> → Kelola Rombongan</td></tr>
<tr><td>2</td><td><b>Sinkron ke Mabrur</b> — akun (login = No. HP), rombongan & jadwal tercipta otomatis; idempoten, akun lama tidak di-reset</td><td><span class="chip c-ops">Operasional</span></td><td>Kelola Rombongan → Sinkron</td></tr>
<tr><td>3</td><td>Bagikan <b>kredensial awal</b> (6 digit, hanya akun baru) — tabel ops + kartu maroon di portal jamaah</td><td><span class="chip c-ops">Ops</span> <span class="chip c-jam">Jamaah</span></td><td>Kelola Rombongan · <span class="mono">/portal</span></td></tr>
<tr><td>4</td><td>Login aplikasi Mabrur — <b>wajib ganti password</b> (dipaksa saat login pertama)</td><td><span class="chip c-jam">Jamaah</span></td><td>Aplikasi Mabrur (mabrur.sosmartpro.com)</td></tr>
<tr><td>5</td><td>Pantau tab <b>Lapangan</b>: status anggota (aman/perhatian, ihram, jarak miqat, sinyal lokasi) + <b>banner SOS live</b> dgn tombol Maps/WhatsApp/Telepon (refresh 30 dtk)</td><td><span class="chip c-ops">Ops</span> <span class="chip c-pim">Pimpinan</span></td><td><span class="mono">/operasional</span> → Lapangan</td></tr>
</tbody>
</table></div>
<div class="note"><b>Pembagian data</b>: Safar = sumber data induk (jamaah, rombongan, jadwal) · Mabrur = sumber data lapangan (lokasi, ihram, SOS, counter ibadah). SOS ditangani pertama oleh muthawwif di aplikasi Mabrur; tab Lapangan Safar adalah lapis pemantauan kantor.</div>
<!-- ====== 8. Portal Agen ====== -->
<h2>8 · Portal Agen — Self-service Mitra</h2>
<p class="sub">Agen/mitra referral punya portal sendiri di <span class="mono">/portal-agen</span> (mobile, terpisah dari sistem staf & portal jamaah) untuk memantau kinerjanya tanpa menghubungi kantor.</p>
<div class="card"><table>
<thead><tr><th style="width:28px">#</th><th>Langkah</th><th style="width:120px">Siapa</th><th style="width:160px">Di mana</th></tr></thead>
<tbody>
<tr><td>1</td><td><b>Aktifkan Portal</b> untuk agen → sistem terbitkan <b>password awal</b> (No. HP = username), tampil <b>sekali</b>. Tombol <b>Reset Password</b> menerbitkan ulang</td><td><span class="chip c-mkt">Marketing</span></td><td><span class="mono">/marketing</span> → kolom Portal</td></tr>
<tr><td>2</td><td>Agen login (HP + password), <b>wajib ganti password</b> saat login pertama</td><td><span class="chip c-mkt">Agen</span></td><td><span class="mono">/portal-agen</span></td></tr>
<tr><td>3</td><td>Pantau: <b>Ringkasan</b> (KPI komisi didapat/terutang/pending) · <b>Jamaah Saya</b> (nama, paket, status, % bayar) · <b>Komisi</b> · <b>Leads</b> · <b>Notifikasi</b> · <b>Profil</b></td><td><span class="chip c-mkt">Agen</span></td><td><span class="mono">/portal-agen</span></td></tr>
<tr><td>3a</td><td><b>Notifikasi otomatis</b> (tab Notifikasi + badge merah; buka → tertandai terbaca): <b>jamaah baru</b> dari referral · <b>dokumen lengkap</b> (registrasi aktif) · <b>komisi disetujui</b> · <b>komisi cair</b></td><td>otomatis</td><td><span class="mono">/portal-agen</span> → Notifikasi</td></tr>
<tr><td>4</td><td>Tambah <b>prospek/lead</b> → masuk daftar leads Marketing</td><td><span class="chip c-mkt">Agen</span></td><td><span class="mono">/portal-agen</span> → Leads</td></tr>
</tbody>
</table></div>
<div class="note"><b>Isolasi & privasi</b>: agen hanya melihat data miliknya (dipaksa server dari token). Data jamaah <b>terbatas</b> — nama, paket, status, % bayar; <b>tanpa NIK/paspor/dokumen</b>. Token portal agen tak berlaku untuk endpoint staf/portal jamaah. Persetujuan & pembayaran komisi tetap di Keuangan — agen hanya <i>melihat</i> status komisinya.</div>
<footer>Panduan Pengguna Safar · PT Safar Barokah Wisata · dokumen internal — versi Markdown: docs/PANDUAN-PENGGUNA.md</footer>
</div>
</body>
</html>