283 lines
16 KiB
PHP
283 lines
16 KiB
PHP
|
@extends('public.layout')
|
|||
|
|
@section('title', 'Panduan Penggunaan')
|
|||
|
|
@section('content')
|
|||
|
|
|
|||
|
|
<div class="max-w-4xl mx-auto px-6 py-24">
|
|||
|
|
|
|||
|
|
<div class="mb-12">
|
|||
|
|
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
|
|||
|
|
<span class="w-4 h-px bg-gray-400 inline-block"></span> Panduan
|
|||
|
|
</p>
|
|||
|
|
<h1 class="text-5xl font-bold leading-tight mb-4">Panduan<br>Penggunaan</h1>
|
|||
|
|
<p class="text-gray-500">Panduan lengkap penggunaan sistem manajemen internal Persegi.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid md:grid-cols-4 gap-8">
|
|||
|
|
|
|||
|
|
{{-- Sidebar navigasi --}}
|
|||
|
|
<aside class="md:col-span-1">
|
|||
|
|
<nav class="sticky top-8 space-y-1 text-sm">
|
|||
|
|
@foreach([
|
|||
|
|
'#login' => 'Login & Akses',
|
|||
|
|
'#dashboard' => 'Dashboard',
|
|||
|
|
'#anggota' => 'Anggota',
|
|||
|
|
'#divisi' => 'Divisi',
|
|||
|
|
'#kegiatan' => 'Kegiatan',
|
|||
|
|
'#kas' => 'Keuangan',
|
|||
|
|
'#iuran' => 'Iuran',
|
|||
|
|
'#voting' => 'Voting',
|
|||
|
|
'#approval' => 'Approval',
|
|||
|
|
'#audit' => 'Audit',
|
|||
|
|
'#konten' => 'Konten & Blog',
|
|||
|
|
'#poin' => 'Poin',
|
|||
|
|
'#notifikasi' => 'Notifikasi',
|
|||
|
|
'#role' => 'Hak Akses',
|
|||
|
|
] as $href => $label)
|
|||
|
|
<a href="{{ $href }}" class="block text-gray-500 hover:text-gray-900 py-1 transition">{{ $label }}</a>
|
|||
|
|
@endforeach
|
|||
|
|
</nav>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
{{-- Konten --}}
|
|||
|
|
<main class="md:col-span-3 space-y-16 text-gray-700 leading-relaxed">
|
|||
|
|
|
|||
|
|
{{-- Login --}}
|
|||
|
|
<section id="login">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">1. Login & Akses Panel</h2>
|
|||
|
|
<ol class="list-decimal list-inside space-y-2 text-sm">
|
|||
|
|
<li>Buka <a href="{{ config('app.url') }}/admin" class="underline text-gray-900" target="_blank">{{ config('app.url') }}/admin</a></li>
|
|||
|
|
<li>Masukkan email dan password yang diberikan pengurus</li>
|
|||
|
|
<li>Klik <strong>Masuk</strong></li>
|
|||
|
|
</ol>
|
|||
|
|
<p class="mt-3 text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
|
|||
|
|
Hanya anggota dengan status <strong>aktif</strong> yang bisa login. Jika tidak bisa masuk, hubungi pengurus.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Dashboard --}}
|
|||
|
|
<section id="dashboard">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">2. Dashboard</h2>
|
|||
|
|
<p class="text-sm mb-3">Setelah login, halaman utama menampilkan:</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li><strong>Statistik</strong> — jumlah anggota aktif, kegiatan, kas masuk/keluar</li>
|
|||
|
|
<li><strong>Log Aktivitas</strong> — perubahan terbaru di sistem</li>
|
|||
|
|
<li><strong>Leaderboard Poin</strong> — 10 anggota dengan poin tertinggi</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Anggota --}}
|
|||
|
|
<section id="anggota">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">3. Manajemen Anggota</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Anggota</p>
|
|||
|
|
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-2">Tambah Anggota Baru</h3>
|
|||
|
|
<ol class="list-decimal list-inside space-y-1 text-sm mb-6">
|
|||
|
|
<li>Klik tombol <strong>Tambah Anggota</strong></li>
|
|||
|
|
<li>Isi nama, email, nomor telepon, alamat, dan divisi</li>
|
|||
|
|
<li>Atur status: <strong>Aktif</strong> atau <strong>Nonaktif</strong></li>
|
|||
|
|
<li>Klik <strong>Simpan</strong></li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-2">Nonaktifkan Anggota</h3>
|
|||
|
|
<ol class="list-decimal list-inside space-y-1 text-sm mb-4">
|
|||
|
|
<li>Buka halaman edit anggota</li>
|
|||
|
|
<li>Ubah status ke <strong>Nonaktif</strong> dan isi alasan</li>
|
|||
|
|
<li>Klik <strong>Simpan</strong></li>
|
|||
|
|
</ol>
|
|||
|
|
<p class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
|
|||
|
|
Anggota nonaktif tidak bisa login ke panel.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Divisi --}}
|
|||
|
|
<section id="divisi">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">4. Divisi</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Divisi</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li>Tambah, edit, atau hapus divisi</li>
|
|||
|
|
<li>Setiap divisi bisa memiliki <strong>Penanggung Jawab</strong> — dipilih dari anggota dengan role pengurus</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Kegiatan --}}
|
|||
|
|
<section id="kegiatan">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">5. Kegiatan</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Kegiatan → Kegiatan</p>
|
|||
|
|
|
|||
|
|
<div class="flex items-center gap-2 text-sm mb-6">
|
|||
|
|
<span class="bg-gray-100 px-3 py-1 rounded-full">Draft</span>
|
|||
|
|
<span class="text-gray-400">→</span>
|
|||
|
|
<span class="bg-gray-100 px-3 py-1 rounded-full">Pending</span>
|
|||
|
|
<span class="text-gray-400">→</span>
|
|||
|
|
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full">Approved</span>
|
|||
|
|
<span class="text-gray-400">/</span>
|
|||
|
|
<span class="bg-red-100 text-red-700 px-3 py-1 rounded-full">Rejected</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-2">Buat Kegiatan Baru</h3>
|
|||
|
|
<ol class="list-decimal list-inside space-y-1 text-sm mb-6">
|
|||
|
|
<li>Klik <strong>Tambah Kegiatan</strong></li>
|
|||
|
|
<li>Isi judul, deskripsi, tanggal, dan estimasi budget (opsional)</li>
|
|||
|
|
<li>Klik <strong>Simpan</strong> — tersimpan sebagai <strong>Draft</strong></li>
|
|||
|
|
<li>Ubah status ke <strong>Pending</strong> untuk mengajukan ke ketua</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<p class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 mb-6">
|
|||
|
|
Budget ≥ Rp500.000 → approval ketua otomatis dibuat.<br>
|
|||
|
|
Budget > Rp2.000.000 → voting otomatis dibuat.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-2">Catat Kehadiran Peserta</h3>
|
|||
|
|
<ol class="list-decimal list-inside space-y-1 text-sm">
|
|||
|
|
<li>Buka kegiatan yang sudah <strong>Approved</strong></li>
|
|||
|
|
<li>Buka tab <strong>Kehadiran Peserta</strong></li>
|
|||
|
|
<li>Tambah peserta dan atur status kehadiran</li>
|
|||
|
|
<li>Anggota yang hadir otomatis mendapat <strong>+10 poin</strong></li>
|
|||
|
|
</ol>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Kas --}}
|
|||
|
|
<section id="kas">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">6. Keuangan (Kas)</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Keuangan → Transaksi</p>
|
|||
|
|
|
|||
|
|
<h3 class="font-semibold text-gray-900 mb-2">Catat Transaksi</h3>
|
|||
|
|
<ol class="list-decimal list-inside space-y-1 text-sm mb-6">
|
|||
|
|
<li>Klik <strong>Tambah Transaksi</strong></li>
|
|||
|
|
<li>Pilih kategori, isi jumlah, keterangan, dan tanggal</li>
|
|||
|
|
<li>Pilih kegiatan terkait jika ada (opsional)</li>
|
|||
|
|
<li>Klik <strong>Simpan</strong></li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<div class="overflow-x-auto">
|
|||
|
|
<table class="w-full text-sm border border-gray-200 rounded-xl overflow-hidden">
|
|||
|
|
<thead class="bg-gray-50">
|
|||
|
|
<tr>
|
|||
|
|
<th class="text-left px-4 py-3 font-medium text-gray-500">Jumlah</th>
|
|||
|
|
<th class="text-left px-4 py-3 font-medium text-gray-500">Alur</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody class="divide-y divide-gray-100">
|
|||
|
|
<tr><td class="px-4 py-3">< Rp500.000</td><td class="px-4 py-3">Langsung diverifikasi</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3">Rp500.000 – Rp2.000.000</td><td class="px-4 py-3">Perlu approval ketua</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3">> Rp2.000.000</td><td class="px-4 py-3">Perlu voting anggota</td></tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Iuran --}}
|
|||
|
|
<section id="iuran">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">7. Iuran Anggota</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Iuran Anggota</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li>Catat iuran per anggota per periode (format: <code class="bg-gray-100 px-1 rounded">YYYY-MM</code>, contoh: <code class="bg-gray-100 px-1 rounded">2026-04</code>)</li>
|
|||
|
|
<li>Status: <strong>Lunas</strong> atau <strong>Belum Lunas</strong></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Voting --}}
|
|||
|
|
<section id="voting">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">8. Voting</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Keputusan → Voting</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li>Voting dibuat otomatis saat transaksi atau budget kegiatan > Rp2.000.000</li>
|
|||
|
|
<li>Anggota bisa memilih suara di halaman detail voting</li>
|
|||
|
|
<li>Voting tertutup otomatis setelah deadline</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Approval --}}
|
|||
|
|
<section id="approval">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">9. Approval</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Keputusan → Approval</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li>Approval dibuat otomatis untuk transaksi atau budget Rp500.000–Rp2.000.000</li>
|
|||
|
|
<li>Ketua bisa menyetujui atau menolak di halaman detail approval</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Audit --}}
|
|||
|
|
<section id="audit">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">10. Audit Internal</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Audit → Temuan Audit</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li>Auditor bisa membuat temuan audit</li>
|
|||
|
|
<li>Pengurus terkait bisa memberikan respons terhadap temuan</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Konten --}}
|
|||
|
|
<section id="konten">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">11. Konten & Blog</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Konten → Post</p>
|
|||
|
|
<ol class="list-decimal list-inside space-y-1 text-sm mb-4">
|
|||
|
|
<li>Klik <strong>Tambah Post</strong></li>
|
|||
|
|
<li>Isi judul, konten, dan slug</li>
|
|||
|
|
<li>Simpan sebagai <strong>Draft</strong> atau langsung <strong>Publish</strong></li>
|
|||
|
|
</ol>
|
|||
|
|
<p class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3">
|
|||
|
|
Artikel yang dipublish otomatis memberikan <strong>+5 poin</strong> ke penulis.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Poin --}}
|
|||
|
|
<section id="poin">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">12. Poin Anggota</h2>
|
|||
|
|
<p class="text-xs text-gray-400 uppercase tracking-widest mb-4">Menu: Organisasi → Poin Anggota</p>
|
|||
|
|
<table class="w-full text-sm border border-gray-200 rounded-xl overflow-hidden">
|
|||
|
|
<thead class="bg-gray-50">
|
|||
|
|
<tr>
|
|||
|
|
<th class="text-left px-4 py-3 font-medium text-gray-500">Aktivitas</th>
|
|||
|
|
<th class="text-left px-4 py-3 font-medium text-gray-500">Poin</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody class="divide-y divide-gray-100">
|
|||
|
|
<tr><td class="px-4 py-3">Hadir di kegiatan</td><td class="px-4 py-3 font-semibold text-green-600">+10</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3">Artikel dipublish</td><td class="px-4 py-3 font-semibold text-green-600">+5</td></tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Notifikasi --}}
|
|||
|
|
<section id="notifikasi">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">13. Notifikasi</h2>
|
|||
|
|
<p class="text-sm mb-3">Ikon lonceng di pojok kanan atas menampilkan notifikasi masuk:</p>
|
|||
|
|
<ul class="list-disc list-inside space-y-1 text-sm">
|
|||
|
|
<li>Kegiatan menunggu persetujuan</li>
|
|||
|
|
<li>Status kegiatan diubah</li>
|
|||
|
|
<li>Transaksi butuh approval atau voting</li>
|
|||
|
|
<li>Status keanggotaan diubah</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{{-- Role --}}
|
|||
|
|
<section id="role">
|
|||
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">14. Hak Akses per Role</h2>
|
|||
|
|
<div class="overflow-x-auto">
|
|||
|
|
<table class="w-full text-sm border border-gray-200 rounded-xl overflow-hidden">
|
|||
|
|
<thead class="bg-gray-50">
|
|||
|
|
<tr>
|
|||
|
|
<th class="text-left px-4 py-3 font-medium text-gray-500">Role</th>
|
|||
|
|
<th class="text-left px-4 py-3 font-medium text-gray-500">Yang Bisa Dilakukan</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody class="divide-y divide-gray-100 text-sm">
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">ketua</td><td class="px-4 py-3">Approve kegiatan, verifikasi kas, lihat semua data</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">bendahara</td><td class="px-4 py-3">Input kas & iuran</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">pengurus</td><td class="px-4 py-3">Buat & ajukan kegiatan, lihat anggota & divisi</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">koordinator</td><td class="px-4 py-3">Buat & kelola kegiatan milik sendiri (sebelum disetujui)</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">anggota</td><td class="px-4 py-3">Lihat kegiatan, voting, poin, buat artikel</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">auditor</td><td class="px-4 py-3">Lihat semua data + buat temuan audit</td></tr>
|
|||
|
|
<tr><td class="px-4 py-3 font-mono text-xs">editor</td><td class="px-4 py-3">Review & publish artikel</td></tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
@endsection
|