# PAGES STRUCTURE — GOVERNMENT SERVICE PORTAL
# Satu Mimpi City Administration
Version 2.0

---

# OVERVIEW

Two distinct sections:
1. PUBLIC WEBSITE — landing page untuk warga melihat layanan & info pemerintah
2. ADMIN PANEL — back-office untuk staff gov mengelola pengajuan dari LOKET

Auth system: UserGov (bukan Breeze User)
Role: Admin (full access) | Operator (layanan approval only)

---

# PUBLIC WEBSITE

Base route: / (public, no auth)
Layout: PublicLayout (Header + MegaMenu + Content + Footer + FloatingContact)

---

## HOME PAGE

Route: GET /

### Section 1 — Hero Banner
- Full-width hero (min-height: 90vh)
- Background: gradient green-700 → green-500 dengan pattern batik digital overlay (opacity 10%)
- Headline: "Pelayanan Publik Kota Satu Mimpi" (H1, white, Poppins 700)
- Subheadline: deskripsi singkat layanan
- CTA Buttons: "Ajukan Layanan" (primary) + "Cek Status Pengajuan" (outline white)
- Floating card bawah: 4 quick-stat (total pengajuan, disetujui hari ini, pending, layanan tersedia)
- Animation: hero text fadeIn, stat cards slideUp staggered

### Section 2 — Statistik Pelayanan
- Background: white / dark:gray-800
- Layout: 4-column grid
- Stats: Total Penduduk Terdaftar, Pengajuan Bulan Ini, Tingkat Persetujuan (%), Layanan Tersedia
- Counter animation (countUp.js atau vanilla JS) on scroll into view
- Icons: Heroicons, warna gov-primary

### Section 3 — Profil Pemerintahan
- 2 kolom: gambar gedung pemerintahan kiri, teks kanan
- Sambutan singkat Kepala Daerah / Mayor
- Nama, jabatan, foto (dari CMS)
- Tombol "Selengkapnya" → /about

### Section 4 — Visi & Misi
- Background: gov-primary gradient
- Visi: card putih besar centered
- Misi: numbered list atau icon-list
- Text: white, shadow text subtle

### Section 5 — Layanan Kami
- Grid 2×4 (desktop) / 2×4 (tablet) / 1 col (mobile)
- 8 service cards, masing-masing:
  - Icon berwarna (gov-primary)
  - Nama layanan (Bahasa Indonesia)
  - Deskripsi 1 baris
  - Waktu proses estimasi
  - Tombol "Pelajari" → /services/{slug}
- Hover: card lift + border gov-primary

### Section 6 — Jam Operasional
- Background: bg-page
- Layout: card centered + tabel hari/jam
- Badge "Buka Sekarang" / "Tutup" berdasarkan waktu server
- Info kontak cepat (telp, email, lokasi)

### Section 7 — Alur Pengajuan
- Step-by-step horizontal timeline (5 langkah)
- 1. Buat Akun LOKET → 2. Isi Formulir → 3. Kirim Berkas → 4. Tunggu Verifikasi → 5. Terima Dokumen
- Setiap step: icon + judul + deskripsi singkat
- Animated: each step animates in sequence on scroll

### Section 8 — FAQ
- Accordion component (Alpine.js x-show dengan animate-slide-down)
- 6–10 pertanyaan umum (dari CMS)
- Kategori filter (tab): Umum, KTP, KIA, Pernikahan, dll
- Search FAQ inline

### Section 9 — Berita Terbaru
- Grid: 1 featured large + 3 small cards
- Setiap card: foto, kategori badge, judul, tanggal, ringkasan
- Tombol "Lihat Semua Berita" → /news

### Section 10 — Kontak & Lokasi
- 2 kolom: form kontak kiri + info + embed map kanan
- Form: nama, email, pesan, subjek (dari CMS settings)
- Info: alamat, telp, email, jam buka
- Map: embed iframe Google Maps / placeholder peta kota RP

---

## ABOUT PAGE

Route: GET /about
Sections:
1. Page Hero — breadcrumb + judul + tagline
2. Sejarah Pemerintahan — timeline kronologis
3. Visi & Misi — full detail
4. Struktur Organisasi — org chart visual (chart atau diagram)
5. Profil Kepala Daerah — foto besar, biografi, sambutan lengkap
6. Penghargaan & Prestasi (optional dari CMS)

---

## SERVICES PAGE

Route: GET /services
Content: Grid semua 8 layanan (detail card)
Filter: tab kategori (Kependudukan, Pernikahan, Properti, Perizinan)
Each card:
- Icon besar berwarna
- Nama layanan
- Persyaratan singkat (3 poin)
- Estimasi waktu
- Biaya (gratis / berbayar)
- Tombol "Pelajari Lebih Lanjut"

---

## SERVICE DETAIL PAGE

Route: GET /services/{slug}
Params: ktp | kia | marriage | name-change | family-card | event-permit | land-certificate | house-purchase

Content:
1. Page Hero — nama layanan + icon besar + breadcrumb
2. Deskripsi Layanan — apa itu, siapa yang bisa mengajukan
3. Persyaratan Dokumen — checklist (required/optional)
4. Biaya Layanan — tabel biaya jika ada
5. Estimasi Waktu Proses — timeline card
6. Alur Pengajuan Spesifik — step yang relevan untuk layanan ini
7. CTA Box — "Ajukan di Aplikasi LOKET" (link ke client app) + "Cek Status" → /tracking

---

## TRACKING PAGE

Route: GET /tracking
Route (with query): GET /tracking?nomor={submission_number}

Content:
1. Search box — input nomor pengajuan + tombol "Cek Status"
2. Jika ditemukan — tampilkan hasil:
   - Info pengajuan (nomor, jenis layanan, tanggal submit)
   - Info pemohon (nama, NIK hidden sebagian)
   - Status badge besar (Pending / Processing / Approved / Rejected)
   - Timeline tracker vertikal:
     • ✅ Pengajuan Diterima (tanggal)
     • ✅ Verifikasi Berkas (tanggal atau "Menunggu...")
     • ⏳ Diproses (tanggal atau "Menunggu...")
     • ⏳ Keputusan (tanggal atau "Menunggu...")
     • ⏳ Selesai (tanggal atau "Menunggu...")
   - Catatan penolakan (jika rejected, tampilkan alasan)
3. Jika tidak ditemukan — empty state + panduan cara cek

---

## NEWS PAGE

Route: GET /news
Route (detail): GET /news/{slug}

### List Page
- Featured post besar (hero card)
- Grid: 3 kolom artikel
- Sidebar: kategori, tags, berita terbaru
- Pagination (load more button / infinite scroll optional)
- Search bar inline

### Detail Page
- Judul, foto cover, tanggal, penulis, kategori
- Konten artikel (render dari rich text / CMS, styled dengan @tailwindcss/typography)
- Share buttons (copy link, sosial media)
- Related news (3 artikel serupa)

---

## CONTACT PAGE

Route: GET /contact
Content:
1. Page Hero
2. 3-kolom info: Alamat, Telepon, Email
3. Form kontak (nama, email, subjek dropdown, pesan, captcha placeholder)
4. Embed map iframe
5. Jam operasional card

---

# ADMIN PANEL

Base route: /admin (semua protected [auth + role])
Layout: AppShell (Navbar + Sidebar + Content + Toast)

Auth guard: UserGov middleware
Roles:
  - Admin: akses semua menu
  - Operator: hanya Pelayanan Publik + Dashboard read-only

---

## AUTH PAGES (UserGov)

Route: GET /admin/login
Route: POST /admin/login
Route: POST /admin/logout
Route: GET /admin/forgot-password
Route: POST /admin/forgot-password
Route: GET /admin/reset-password/{token}

Design:
- Full-page split layout: kiri green gradient branding, kanan form
- Logo + nama portal + tagline di sisi kiri
- Form login: username/email, password, remember me, tombol login
- Lupa password: email input + kirim reset link
- Reset password: new password + confirm + submit

---

## DASHBOARD

Route: GET /admin/dashboard
Access: Admin + Operator (read-only stats)

### Layout — 3-row grid
Row 1 — Stat Cards (8 cards, 4×2 grid)
  - Setiap card: Icon (warna layanan), Judul layanan, Jumlah pending, trend vs kemarin
  - Color accent setiap layanan berbeda (KTP: blue, KIA: purple, Marriage: pink, dll)
  - Hover: lift + shadow
  - Click: navigasi ke halaman layanan

Row 2 — Charts (2 kolom)
  Left: Grafik Pengajuan per Bulan (Chart.js — Line chart, 12 bulan)
        Data: total pengajuan vs disetujui vs ditolak
        Color: gov-primary, success, danger
  Right: Distribusi Layanan (Chart.js — Doughnut chart)
         Data: persentase tiap jenis layanan dari total bulan ini

Row 3 — 2 kolom
  Left: Tabel Pengajuan Terbaru
    - 5 baris terbaru lintas semua layanan
    - Kolom: No. Pengajuan, Nama, Jenis, Status badge, Waktu, Aksi
    - "Lihat Semua" link per baris
  Right: Activity Feed
    - Timeline aktivitas terbaru (approve/reject/login staff)
    - Avatar + nama staff + aksi + waktu relatif ("2 menit lalu")
    - Auto-refresh setiap 60 detik (AJAX polling)

Row 4 — Quick Actions (admin only)
  - Card "Pengajuan Pending" dengan badge count
  - Shortcut button ke tiap halaman layanan

---

## SERVICE PAGES — GENERAL PATTERN

Setiap dari 8 layanan mengikuti pola yang sama:

### List Page

Route: GET /admin/services/{service}
Access: Admin + Operator

Layout:
1. Page Header — Judul halaman, breadcrumb, badge total pending
2. Filter Bar — Search NIK/nama, filter Status (All/Pending/Approved/Rejected), filter tanggal range
3. DataTable
   Kolom umum: No., No. Pengajuan, Nama Pemohon, NIK, Jenis*, Status, Tanggal Submit, Diproses Oleh, Aksi
   (* kolom spesifik per layanan)
   Per-baris aksi: tombol "Detail" (primary) + dropdown (Approve/Reject/Print)
   Bulk action: checkbox select → Approve Semua / Reject Semua
4. Pagination (Laravel default, styled)
5. Export bar (kanan): Export PDF | Export Excel | Export CSV

### Detail Page

Route: GET /admin/services/{service}/{id}
Access: Admin + Operator

Layout (fullpage, bukan modal):
1. Breadcrumb + kembali ke list
2. Header Card
   - No. pengajuan (kode unik, copy button)
   - Status badge besar + timestamp update terakhir
   - Diproses oleh: nama staff (jika sudah ada)
3. Grid 2 kolom:
   LEFT COLUMN (60%):
     a. Data Pemohon Card
        - Foto profil LOKET (jika ada)
        - Nama lengkap, NIK, tanggal lahir, jenis kelamin
        - Pekerjaan (ENUM: civilian/leo/doj/ems/swasta/government)
        - No. telepon, email
     b. Data Pengajuan Card
        - Semua field spesifik layanan (lihat per-service detail di bawah)
     c. Lampiran / Dokumen Card
        - Grid thumbnail lampiran
        - Setiap thumbnail: preview icon (image/PDF), nama file, ukuran
        - Klik → buka PreviewModal (full image atau PDF embed)
        - Multiple attachment support
   RIGHT COLUMN (40%):
     a. Action Card (sticky)
        - Status badge
        - Tombol "Setujui Pengajuan" (green, icon CheckCircle)
        - Tombol "Tolak Pengajuan" (red, icon XCircle)
        - Tombol "Cetak Dokumen" (gray, icon Printer) [jika sudah approved]
        - Catatan (textarea, untuk isi alasan tolak wajib diisi jika reject)
     b. Timeline Card
        - Vertical timeline:
          • ✅ Pengajuan Diterima (tanggal+waktu)
          • ✅/⏳ Verifikasi Berkas
          • ✅/⏳ Diproses
          • ✅/⏳ Keputusan (Approved/Rejected + nama staff + catatan)
          • ✅/⏳ Selesai/Dicetak
     c. Riwayat Aktivitas Card
        - Log semua perubahan status pada pengajuan ini
        - Format: avatar + nama staff + aksi + timestamp
4. Modal Konfirmasi Approve/Reject (overlay, AnimateScaleIn)

---

## KTP SERVICE

Route: /admin/services/ktp
Additional columns: Jenis Pengajuan (Pembuatan/Perpanjang/Hilang)
Detail fields:
  - Jenis keterangan: badge (Pembuatan/Perpanjang/Hilang)
  - Foto IC: image preview
  - Lampiran: array dokumen pendukung

---

## KIA SERVICE

Route: /admin/services/kia
Additional columns: Nama Anak
Detail fields:
  - Nama anak, tempat lahir
  - Data Ayah: nama, no. telp
  - Data Ibu: nama, no. telp
  - Data Wali (jika ada): nama, no. telp
  - Lokasi saat ini (AT)
  - Lampiran vaksinasi: image preview
  - Lampiran KTP orang tua: image preview

---

## MARRIAGE SERVICE

Route: /admin/services/marriage
Additional columns: Nama Pasangan
Detail fields:
  - Tanggal pernikahan: date display
  - Data Suami: NIK, nama (auto-resolve dari NIK)
  - Data Istri: NIK, nama (auto-resolve dari NIK)
  - Data Saksi: nama, hubungan
  - Dinikahkan oleh (jabatan/nama)
  - Lokasi pernikahan (AT)
  - Lampiran: array dokumen

---

## NAME CHANGE SERVICE

Route: /admin/services/name-change
Additional columns: Nama Lama → Nama Baru
Detail fields:
  - Nama lama (dari user_loket)
  - Nama baru yang diminta
  - Lampiran KTP
  - Lampiran Expungement DOJ (dokumen dari dept of justice RP)
Special note: verify expungement dokumen sebelum approve

---

## FAMILY CARD SERVICE

Route: /admin/services/family-card
Additional columns: Jumlah Anggota
Detail fields:
  - Jumlah anggota keluarga
  - Biaya tambahan (auto-calc: 100k per anggota di atas 4)
  - Tampilkan perhitungan biaya
  - Daftar anggota keluarga yang terdaftar (dari users_loket if linked)

---

## EVENT PERMIT SERVICE

Route: /admin/services/event-permit
Additional columns: Nama Kegiatan, Tanggal Acara
Detail fields:
  - Nama kegiatan
  - Lokasi acara (AT)
  - Tanggal & jam acara
  - Deskripsi kegiatan (jika ada)
Note: cek apakah ada konflik jadwal

---

## LAND CERTIFICATE SERVICE

Route: /admin/services/land-certificate
Additional columns: Kategori Properti
Detail fields:
  - Lokasi kantor (AT kantor)
  - Kategori rumah: badge (LOW END / MID END / HIGH END HOUSE)
  - Foto KTP pemohon: image preview
Special flow: Pemeriksaan Dokumen → Pemeriksaan Lokasi → Persetujuan

---

## HOUSE PURCHASE SERVICE

Route: /admin/services/house-purchase
Additional columns: Tipe Rumah
Detail fields:
  - Tipe rumah
  - Lokasi properti (AT)
  - Kategori: LOW/MID/HIGH END

---

## CITIZEN DATABASE

Route: /admin/citizens
Access: Admin only

### Data Penduduk

Route: /admin/citizens
Content:
  - DataTable penduduk (dari users_loket)
  - Search by NIK, nama, pekerjaan
  - Filter: pekerjaan (civilian/leo/doj/ems/swasta/government)
  - Klik baris → detail penduduk

Route: /admin/citizens/{nik}
Content:
  - Profil lengkap penduduk
  - Riwayat dokumen (semua pengajuan pernah dibuat)
  - Status kependudukan

### Data Keluarga

Route: /admin/family
Content:
  - Daftar kartu keluarga
  - Jumlah anggota per KK
  - Detail anggota

### Riwayat Dokumen

Route: /admin/document-history
Content:
  - Log semua perubahan dokumen lintas layanan
  - Filter: jenis layanan, status, tanggal, nama

---

## REGULATION CENTER

Route: /admin/regulations
Access: Admin only

### Per-layanan sub-routes:
  /admin/regulations/ktp
  /admin/regulations/kia
  /admin/regulations/marriage
  /admin/regulations/name-change
  /admin/regulations/family-card
  /admin/regulations/event-permit
  /admin/regulations/land-certificate
  /admin/regulations/house-purchase

### Content per regulation page:
  - Judul regulasi
  - Rich text editor (TipTap atau Quill via CDN)
  - Versi riwayat (version history list)
  - Simpan sebagai draft / Publish
  - Preview hasil render

---

## CMS WEBSITE

Route: /admin/cms
Access: Admin only

### Homepage CMS

Route: /admin/cms/home
Sections yang bisa diedit:
  - Hero: judul, subjudul, CTA text, background image
  - Statistik: label + value (manual input)
  - Visi: teks visi
  - Misi: list misi (dynamic add/remove)
  - Jam operasional: per hari toggle buka/tutup + jam
  - Contact info: alamat, telp, email, koordinat map

### Profile Pemerintahan

Route: /admin/cms/profile
  - Sejarah: rich text
  - Sambutan kepala daerah: nama, jabatan, foto upload, teks sambutan
  - Struktur organisasi: upload gambar atau builder

### Berita

Route: /admin/cms/news
  List: DataTable berita (judul, kategori, status draft/published, tanggal)
  Create/Edit:
    - Judul, slug (auto-generate), kategori
    - Cover image upload
    - Rich text editor konten
    - Publish / Save Draft
    - Preview sebelum publish

Route: /admin/cms/news/categories
  - CRUD kategori berita

### FAQ Manager

Route: /admin/cms/faq
  - Daftar FAQ (drag-drop untuk reorder)
  - Tambah/edit/hapus FAQ (pertanyaan + jawaban rich text)
  - Kategori FAQ

### Media Library

Route: /admin/cms/media
  - Grid semua uploaded files
  - Upload multiple files (drag & drop)
  - Filter: images, documents, all
  - Copy URL, delete

---

## REPORTING

Route: /admin/reports
Access: Admin only

### Statistik Pelayanan

Route: /admin/reports/services
Content:
  - Filter: bulan/tahun, jenis layanan
  - Card summary: Total, Disetujui, Ditolak, Rata-rata waktu proses
  - Chart.js Line: trend pengajuan 12 bulan
  - Chart.js Bar: per-layanan breakdown
  - Chart.js Doughnut: proporsi status (pending/approved/rejected)
  - Tabel data detail

### Statistik Penduduk

Route: /admin/reports/citizens
Content:
  - Total penduduk aktif
  - Distribusi pekerjaan (pie chart)
  - Pertumbuhan penduduk per bulan (line chart)

### Export Data

Route: /admin/reports/export
Content:
  - Pilih jenis data (layanan / penduduk / aktivitas)
  - Pilih filter (tanggal, status, jenis)
  - Pilih format (PDF / Excel / CSV)
  - Tombol Generate & Download

---

## STAFF MANAGEMENT

Route: /admin/staff
Access: Admin only

### Daftar Staff

Route: /admin/staff
Content:
  - DataTable pegawai gov (users_gov)
  - Kolom: foto, nama, username, jabatan, role (Admin/Operator), status, last login, aksi
  - Filter: role, status (active/pending/suspended/banned)
  - Tombol "Tambah Pegawai"

### Tambah/Edit Pegawai

Route: /admin/staff/create | /admin/staff/{id}/edit
Form fields:
  - Username (unique)
  - Nama lengkap
  - Email
  - Password (create only) / Reset Password (edit)
  - No. telepon
  - Jabatan / Ranks
  - Role: Admin | Operator
  - Status: active | pending | suspended | banned
  - Foto profil (upload)
  - Tanda tangan digital (upload gambar atau Signature Pad canvas)

### Profil Staff

Route: /admin/staff/{id}
Content:
  - Data lengkap pegawai
  - Riwayat login
  - Riwayat aktivitas approval

---

## NOTIFICATION CENTER

Route: /admin/notifications
Access: Admin + Operator

Content:
  - List notifikasi sistem (pengajuan baru, status berubah, dll)
  - Filter: belum dibaca / semua
  - Mark as read / mark all read
  - Discord Integration Queue (future):
    /admin/notifications/discord
    - Status koneksi Discord bot
    - Antrian notifikasi Discord
    - Log pengiriman notifikasi

---

## AUDIT SYSTEM

Route: /admin/audit
Access: Admin only

### Audit Log

Route: /admin/audit/log
Content:
  - Semua aktivitas sistem (create/update/delete pada semua tabel)
  - Filter: user, action type, model, tanggal
  - Kolom: timestamp, user, action, model, record ID, perubahan (before/after diff)

### Login History

Route: /admin/audit/login
Content:
  - Semua login/logout event
  - Kolom: user, timestamp, IP address, browser/device, status (success/failed)

### Approval History

Route: /admin/audit/approvals
Content:
  - Semua keputusan approve/reject
  - Filter: staff, layanan, status, tanggal
  - Kolom: tanggal, staff, jenis layanan, no. pengajuan, pemohon, keputusan, catatan

---

## SETTINGS

Route: /admin/settings
Access: Admin only

### General Settings

Route: /admin/settings/general
Fields:
  - Nama portal (APP_NAME)
  - Nama kota / pemerintahan
  - Logo (upload)
  - Favicon (upload)
  - Email pengirim sistem
  - Jam operasional default

### Theme Settings

Route: /admin/settings/theme
Fields:
  - Dark mode default (on/off)
  - Sidebar default (expanded/collapsed)

### SMTP Settings

Route: /admin/settings/smtp
Fields: host, port, username, password, encryption
Test SMTP button

### Discord Settings

Route: /admin/settings/discord
Fields:
  - Bot Token
  - Channel ID untuk notifikasi pengajuan baru
  - Channel ID untuk notifikasi keputusan
  - Webhook URL
  - Format pesan (template)
  - Toggle: enable/disable notifikasi Discord

### Signature Settings

Route: /admin/settings/signature
Fields:
  - Tanda tangan resmi pejabat (upload gambar)
  - Template tanda tangan di dokumen

### Watermark Settings

Route: /admin/settings/watermark
Fields:
  - Text watermark dokumen
  - Logo watermark
  - Opacity watermark

---

## MY PROFILE (semua staff)

Route: /admin/profile
Access: Admin + Operator (diri sendiri)

Content:
  - Edit profil sendiri (nama, email, telepon, foto)
  - Ubah password
  - Lihat riwayat login sendiri

---

## PRINT TEMPLATE

Route: /admin/services/{service}/{id}/print (GET, opens print dialog)

Design:
  - A4 layout, print-optimized
  - Header: logo kota + nama instansi + alamat
  - Judul dokumen sesuai layanan (mis: "SURAT KETERANGAN KTP")
  - Data pemohon
  - Data pengajuan / detail layanan
  - Nomor surat / nomor pengajuan
  - Tanggal persetujuan
  - Tanda tangan pejabat + nama + jabatan
  - Watermark (jika aktif)
  - QR code (placeholder, v2 feature)
  - Footer: nomor dokumen + tanggal cetak

---

# ROUTE SUMMARY

## Public Routes (no auth)
```
GET  /                        → HomeController@index
GET  /about                   → AboutController@index
GET  /services                → ServiceController@index
GET  /services/{slug}         → ServiceController@show
GET  /tracking                → TrackingController@index
GET  /news                    → NewsController@index
GET  /news/{slug}             → NewsController@show
GET  /contact                 → ContactController@index
```

## Admin Routes (auth + role)
```
GET/POST /admin/login          → Auth\GovLoginController
POST     /admin/logout         → Auth\GovLoginController@logout

[auth.gov middleware]
GET  /admin/dashboard          → DashboardController@index

[Admin + Operator]
GET  /admin/services/ktp               → KtpController@index
GET  /admin/services/ktp/{id}          → KtpController@show
PUT  /admin/services/ktp/{id}          → KtpController@update
GET  /admin/services/ktp/{id}/print    → KtpController@print
(× 8 services)

[Admin only]
GET  /admin/citizens                   → CitizenController@index
GET  /admin/citizens/{nik}             → CitizenController@show
...semua route Admin only lainnya
```