From 76a8782409c99c3d8cc1e4883ebc9b0cb09192de Mon Sep 17 00:00:00 2001
From: rekywhyd <rekywahyudi00@gmail.com>
Date: Sun, 7 Jun 2026 23:32:06 +0700
Subject: [PATCH] Memperbarui UI/UX

---
 .env.example                                  |   6 +-
 app/Console/Commands/FetchEmails.php          | 218 ++++++
 app/Http/Controllers/KonfirmasiController.php | 123 +++
 app/Http/Controllers/KuponController.php      | 152 ++++
 app/Http/Controllers/LaporanController.php    |  63 ++
 app/Http/Controllers/MapController.php        | 269 +++++--
 .../Controllers/PersetujuanController.php     |  44 ++
 app/Http/Controllers/RiwayatController.php    | 144 ++++
 app/Models/LaporanWarga.php                   |  26 +
 app/Models/LogDistribusi.php                  |  29 +
 app/Models/PenerimaBantuan.php                |  20 +-
 app/Models/TempatIbadah.php                   |  21 +-
 app/Models/User.php                           |   6 +
 composer.json                                 |   2 +
 composer.lock                                 | 701 +++++++++++++++++-
 ...23_add_id_tempat_ibadah_to_users_table.php |  29 +
 ..._06_130901_create_log_distribusi_table.php |  31 +
 ...06_130902_add_native_columns_to_tables.php |  60 ++
 ..._persetujuan_to_penerima_bantuan_table.php |  29 +
 ...6_rename_admin_ibadah_to_user_in_users.php |  25 +
 ...28_add_password_to_tempat_ibadah_table.php |  28 +
 ..._07_120121_create_laporan_wargas_table.php |  31 +
 ..._add_deskripsi_to_laporan_wargas_table.php |  28 +
 ...add_added_by_to_penerima_bantuan_table.php |  28 +
 ...1_modify_tables_for_laporan_per_tempat.php |  39 +
 ...330_add_alamat_to_laporan_wargas_table.php |  28 +
 .../{SuperAdminSeeder.php => AdminSeeder.php} |   8 +-
 database/seeders/DatabaseSeeder.php           |   4 +-
 resources/views/auth/login.blade.php          |   6 +-
 .../views/components/dropdown-link.blade.php  |   2 +-
 resources/views/components/nav-link.blade.php |   4 +-
 .../components/responsive-nav-link.blade.php  |   4 +-
 .../views/daftar-penerima-bantuan.blade.php   | 448 +++++++++--
 .../views/daftar-tempat-ibadah.blade.php      | 266 ++++---
 resources/views/dashboard.blade.php           | 573 ++++++++++----
 resources/views/konfirmasi.blade.php          |  63 ++
 resources/views/kupon.blade.php               | 268 +++++++
 resources/views/laporan/index.blade.php       | 102 +++
 resources/views/laporan/lapor.blade.php       | 120 +++
 resources/views/layouts/app.blade.php         |  82 +-
 resources/views/layouts/guest.blade.php       |  85 ++-
 resources/views/layouts/navigation.blade.php  |  71 +-
 resources/views/riwayat.blade.php             | 127 ++++
 resources/views/scan.blade.php                | 111 +++
 resources/views/welcome.blade.php             | 495 ++++++-------
 routes/web.php                                |  31 +
 temp_update.php                               |  13 +
 47 files changed, 4378 insertions(+), 685 deletions(-)
 create mode 100644 app/Console/Commands/FetchEmails.php
 create mode 100644 app/Http/Controllers/KonfirmasiController.php
 create mode 100644 app/Http/Controllers/KuponController.php
 create mode 100644 app/Http/Controllers/LaporanController.php
 create mode 100644 app/Http/Controllers/PersetujuanController.php
 create mode 100644 app/Http/Controllers/RiwayatController.php
 create mode 100644 app/Models/LaporanWarga.php
 create mode 100644 app/Models/LogDistribusi.php
 create mode 100644 database/migrations/2026_06_05_113823_add_id_tempat_ibadah_to_users_table.php
 create mode 100644 database/migrations/2026_06_06_130901_create_log_distribusi_table.php
 create mode 100644 database/migrations/2026_06_06_130902_add_native_columns_to_tables.php
 create mode 100644 database/migrations/2026_06_06_152954_add_persetujuan_to_penerima_bantuan_table.php
 create mode 100644 database/migrations/2026_06_06_152956_rename_admin_ibadah_to_user_in_users.php
 create mode 100644 database/migrations/2026_06_06_154628_add_password_to_tempat_ibadah_table.php
 create mode 100644 database/migrations/2026_06_07_120121_create_laporan_wargas_table.php
 create mode 100644 database/migrations/2026_06_07_122259_add_deskripsi_to_laporan_wargas_table.php
 create mode 100644 database/migrations/2026_06_07_132851_add_added_by_to_penerima_bantuan_table.php
 create mode 100644 database/migrations/2026_06_07_141011_modify_tables_for_laporan_per_tempat.php
 create mode 100644 database/migrations/2026_06_07_142330_add_alamat_to_laporan_wargas_table.php
 rename database/seeders/{SuperAdminSeeder.php => AdminSeeder.php} (59%)
 create mode 100644 resources/views/konfirmasi.blade.php
 create mode 100644 resources/views/kupon.blade.php
 create mode 100644 resources/views/laporan/index.blade.php
 create mode 100644 resources/views/laporan/lapor.blade.php
 create mode 100644 resources/views/riwayat.blade.php
 create mode 100644 resources/views/scan.blade.php
 create mode 100644 temp_update.php

diff --git a/.env.example b/.env.example
index b477cd5..f3171d1 100644
--- a/.env.example
+++ b/.env.example
@@ -64,6 +64,6 @@ AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
 
-SUPERADMIN_NAME="SuperAdmin"
-SUPERADMIN_EMAIL="admin@gmail.com"
-SUPERADMIN_PASSWORD="password_yang_aman"
+ADMIN_NAME="Admin"
+ADMIN_EMAIL="admin@gmail.com"
+ADMIN_PASSWORD="password_yang_aman"
diff --git a/app/Console/Commands/FetchEmails.php b/app/Console/Commands/FetchEmails.php
new file mode 100644
index 0000000..17508a4
--- /dev/null
+++ b/app/Console/Commands/FetchEmails.php
@@ -0,0 +1,218 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use App\Models\LaporanMasuk;
+
+class FetchEmails extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'emails:fetch';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Fetch unread emails with subject LAPORAN BANTUAN via IMAP';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle()
+    {
+        $server = '{imap.gmail.com:993/imap/ssl}INBOX';
+        $username = 'bantuansambas@gmail.com'; 
+        $password = 'tkro trmt vxli yekm'; 
+
+        $this->info('[' . date('Y-m-d H:i:s') . '] Memulai proses penarikan email...');
+
+        if (!function_exists('imap_open')) {
+            $this->error('Ekstensi IMAP tidak diaktifkan pada instalasi PHP ini.');
+            return;
+        }
+
+        $inbox = @imap_open($server, $username, $password);
+
+        if (!$inbox) {
+            $this->error('Gagal terhubung ke server IMAP: ' . imap_last_error());
+            return;
+        }
+
+        $this->info("Berhasil terhubung ke email: $username");
+
+        $search_criteria = 'UNSEEN SUBJECT "LAPORAN BANTUAN"';
+        $emails = imap_search($inbox, $search_criteria);
+
+        if ($emails) {
+            $this->info("Ditemukan " . count($emails) . " email laporan baru.");
+
+            foreach ($emails as $email_number) {
+                $overview = imap_fetch_overview($inbox, $email_number, 0);
+                
+                $subjek = $overview[0]->subject ?? '(Tanpa Subjek)';
+                $pengirim = $overview[0]->from ?? '(Tanpa Pengirim)';
+                $tanggal_email = isset($overview[0]->date) ? date('Y-m-d H:i:s', strtotime($overview[0]->date)) : now();
+                
+                $structure = imap_fetchstructure($inbox, $email_number);
+                
+                $pesan = $this->extractBody($inbox, $email_number, $structure);
+                $attachments = $this->extractAttachments($inbox, $email_number, $structure);
+
+                $lampiran_paths = [];
+                $upload_dir = storage_path('app/public/uploads');
+                if (!is_dir($upload_dir)) {
+                    mkdir($upload_dir, 0755, true);
+                }
+
+                foreach ($attachments as $at) {
+                    $file_ext = pathinfo($at['filename'], PATHINFO_EXTENSION);
+                    if (empty($file_ext)) {
+                        $file_ext = 'bin';
+                    }
+                    $new_filename = time() . '_' . uniqid() . '.' . $file_ext;
+                    $file_path = $upload_dir . '/' . $new_filename;
+                    file_put_contents($file_path, $at['data']);
+                    $lampiran_paths[] = 'uploads/' . $new_filename;
+                }
+                $lampiran_str = implode(',', $lampiran_paths);
+
+                $laporan = LaporanMasuk::create([
+                    'pengirim' => $pengirim,
+                    'tanggal' => $tanggal_email,
+                    'subjek' => $subjek,
+                    'pesan' => trim($pesan),
+                    'lampiran' => $lampiran_str,
+                    'status' => 'Menunggu'
+                ]);
+
+                if ($laporan) {
+                    $this->info("- Berhasil menyimpan laporan dari: $pengirim");
+                } else {
+                    $this->error("- Gagal menyimpan laporan dari: $pengirim.");
+                }
+            }
+        } else {
+            $this->info("Tidak ada email laporan baru.");
+        }
+
+        imap_close($inbox);
+        $this->info('[' . date('Y-m-d H:i:s') . '] Proses penarikan email selesai.');
+    }
+
+    private function extractBody($inbox, $email_number, $structure)
+    {
+        if (!isset($structure->parts)) {
+            $pesan = imap_fetchbody($inbox, $email_number, 1);
+            $encoding = $structure->encoding ?? 0;
+            if ($encoding == 3) $pesan = base64_decode($pesan);
+            elseif ($encoding == 4) $pesan = quoted_printable_decode($pesan);
+            return $pesan;
+        }
+
+        $texts = $this->getEmailBodyText($inbox, $email_number, $structure->parts);
+        if (!empty(trim($texts['plain']))) {
+            return trim($texts['plain']);
+        } elseif (!empty(trim($texts['html']))) {
+            return strip_tags($texts['html']);
+        }
+        return "";
+    }
+
+    private function getEmailBodyText($inbox, $email_number, $parts, $part_number = "")
+    {
+        $texts = ['plain' => '', 'html' => ''];
+        if (isset($parts) && count($parts)) {
+            foreach ($parts as $i => $part) {
+                $prefix = ($part_number) ? $part_number . "." . ($i + 1) : ($i + 1);
+                if (isset($part->parts)) {
+                    $subTexts = $this->getEmailBodyText($inbox, $email_number, $part->parts, $prefix);
+                    $texts['plain'] .= $subTexts['plain'];
+                    $texts['html'] .= $subTexts['html'];
+                } else {
+                    $is_attachment = false;
+                    if ($part->ifdparameters) {
+                        foreach ($part->dparameters as $obj) {
+                            if (strtolower($obj->attribute) == 'filename') $is_attachment = true;
+                        }
+                    }
+                    if ($part->ifparameters) {
+                        foreach ($part->parameters as $obj) {
+                            if (strtolower($obj->attribute) == 'name') $is_attachment = true;
+                        }
+                    }
+                    
+                    if (!$is_attachment) {
+                        if ($part->subtype == 'PLAIN') {
+                            $content = imap_fetchbody($inbox, $email_number, $prefix);
+                            if ($part->encoding == 3) $content = base64_decode($content);
+                            elseif ($part->encoding == 4) $content = quoted_printable_decode($content);
+                            $texts['plain'] .= $content;
+                        } elseif ($part->subtype == 'HTML') {
+                            $content = imap_fetchbody($inbox, $email_number, $prefix);
+                            if ($part->encoding == 3) $content = base64_decode($content);
+                            elseif ($part->encoding == 4) $content = quoted_printable_decode($content);
+                            $texts['html'] .= $content;
+                        }
+                    }
+                }
+            }
+        }
+        return $texts;
+    }
+
+    private function extractAttachments($inbox, $email_number, $structure)
+    {
+        if (isset($structure->parts)) {
+            return $this->getAttachments($inbox, $email_number, $structure->parts);
+        }
+        return [];
+    }
+
+    private function getAttachments($inbox, $email_number, $parts, $part_number = "")
+    {
+        $attachments = [];
+        if (isset($parts) && count($parts)) {
+            foreach ($parts as $i => $part) {
+                $prefix = ($part_number) ? $part_number . "." . ($i + 1) : ($i + 1);
+                if (isset($part->parts)) {
+                    $attachments = array_merge($attachments, $this->getAttachments($inbox, $email_number, $part->parts, $prefix));
+                } else {
+                    $is_attachment = false;
+                    $filename = '';
+                    if ($part->ifdparameters) {
+                        foreach ($part->dparameters as $object) {
+                            if (strtolower($object->attribute) == 'filename') {
+                                $is_attachment = true;
+                                $filename = $object->value;
+                            }
+                        }
+                    }
+                    if ($part->ifparameters) {
+                        foreach ($part->parameters as $object) {
+                            if (strtolower($object->attribute) == 'name') {
+                                $is_attachment = true;
+                                $filename = $object->value;
+                            }
+                        }
+                    }
+                    if ($is_attachment) {
+                        $attachment = imap_fetchbody($inbox, $email_number, $prefix);
+                        if ($part->encoding == 3) $attachment = base64_decode($attachment);
+                        elseif ($part->encoding == 4) $attachment = quoted_printable_decode($attachment);
+                        $attachments[] = [
+                            'filename' => $filename,
+                            'data' => $attachment
+                        ];
+                    }
+                }
+            }
+        }
+        return $attachments;
+    }
+}
diff --git a/app/Http/Controllers/KonfirmasiController.php b/app/Http/Controllers/KonfirmasiController.php
new file mode 100644
index 0000000..0d92911
--- /dev/null
+++ b/app/Http/Controllers/KonfirmasiController.php
@@ -0,0 +1,123 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\PenerimaBantuan;
+use App\Models\TempatIbadah;
+use App\Models\LogDistribusi;
+
+class KonfirmasiController extends Controller
+{
+    public function show(Request $request)
+    {
+        $id = $request->query('id', 0);
+        $periode_param = $request->query('periode', '');
+        $signature_param = $request->query('signature', '');
+
+        if ($id <= 0 || empty($signature_param) || empty($periode_param)) {
+            abort(400, 'Permintaan tidak valid. Parameter periode atau signature hilang.');
+        }
+
+        // Verifikasi Signature dengan periode
+        $expected_signature = hash_hmac('sha256', $id . '|' . $periode_param, config('app.key'));
+        if (!hash_equals($expected_signature, $signature_param)) {
+            abort(403, 'Invalid Signature. URL telah dimodifikasi atau tidak sah.');
+        }
+
+        // Validasi Periode Kupon
+        if ($periode_param !== now()->format('Y-m')) {
+            $namaBulan = \Carbon\Carbon::createFromFormat('Y-m', $periode_param)->translatedFormat('F Y');
+            return response("Kupon ini hanya berlaku untuk periode {$namaBulan}. Saat ini adalah periode " . now()->translatedFormat('F Y') . ". Silakan perbarui kupon Anda.", 400);
+        }
+
+        $warga = PenerimaBantuan::findOrFail($id);
+
+        if (empty($warga->id_tempat_ibadah)) {
+            return response('Warga ini belum terdaftar di tempat ibadah manapun untuk pengambilan bantuan.', 400);
+        }
+
+        $id_tempat = $warga->id_tempat_ibadah;
+
+        // Cek apakah sudah pernah dicairkan bulan ini
+        $log = LogDistribusi::where('id_penerima', $id)
+            ->whereMonth('tanggal_diterima', now()->month)
+            ->whereYear('tanggal_diterima', now()->year)
+            ->orderBy('tanggal_diterima', 'desc')
+            ->first();
+
+        $sudah_cair = ($log !== null);
+
+        return view('konfirmasi', compact('warga', 'id_tempat', 'sudah_cair', 'log'));
+    }
+
+    public function process(Request $request)
+    {
+        $id = $request->query('id', 0);
+        $periode_param = $request->query('periode', '');
+        $signature_param = $request->query('signature', '');
+
+        if ($id <= 0 || empty($signature_param) || empty($periode_param)) {
+            abort(400, 'Permintaan tidak valid. Parameter periode atau signature hilang.');
+        }
+
+        // Verifikasi Signature dengan periode
+        $expected_signature = hash_hmac('sha256', $id . '|' . $periode_param, config('app.key'));
+        if (!hash_equals($expected_signature, $signature_param)) {
+            abort(403, 'Invalid Signature.');
+        }
+
+        // Validasi Periode Kupon
+        if ($periode_param !== now()->format('Y-m')) {
+            return redirect()->back()->with('error', 'Kupon kedaluwarsa atau tidak sesuai dengan periode bulan ini.');
+        }
+
+        $warga = PenerimaBantuan::findOrFail($id);
+
+        // Cek sudah dicairkan bulan ini
+        $existing = LogDistribusi::where('id_penerima', $id)
+            ->whereMonth('tanggal_diterima', now()->month)
+            ->whereYear('tanggal_diterima', now()->year)
+            ->exists();
+
+        if ($existing) {
+            return redirect()->back()->with('error', 'Bantuan bulan ini sudah diproses.');
+        }
+
+        $tgl_sekarang = now();
+
+        // Upload foto penyerahan
+        $foto_penyerahan = '';
+        if ($request->hasFile('foto_penyerahan')) {
+            $foto_penyerahan = time() . '_bukti_' . $request->file('foto_penyerahan')->getClientOriginalName();
+            $request->file('foto_penyerahan')->storeAs('uploads', $foto_penyerahan, 'public');
+        }
+
+        LogDistribusi::create([
+            'id_penerima' => $id,
+            'tanggal_diterima' => $tgl_sekarang,
+            'status' => 'Menunggu',
+            'foto_penyerahan' => $foto_penyerahan,
+        ]);
+
+        // Redirect back with success
+        $log = LogDistribusi::where('id_penerima', $id)
+            ->whereMonth('tanggal_diterima', now()->month)
+            ->whereYear('tanggal_diterima', now()->year)
+            ->orderBy('tanggal_diterima', 'desc')
+            ->first();
+
+        $warga = PenerimaBantuan::findOrFail($id);
+        $id_tempat = $warga->id_tempat_ibadah;
+        $sudah_cair = true;
+        $pesan_sukses = true;
+
+        return view('konfirmasi', compact('warga', 'id_tempat', 'sudah_cair', 'log', 'pesan_sukses'));
+    }
+
+    public function scan()
+    {
+        abort_if(auth()->user()->role === 'admin', 403, 'Akses ditolak. Halaman ini bukan untuk admin.');
+        return view('scan');
+    }
+}
diff --git a/app/Http/Controllers/KuponController.php b/app/Http/Controllers/KuponController.php
new file mode 100644
index 0000000..595cf77
--- /dev/null
+++ b/app/Http/Controllers/KuponController.php
@@ -0,0 +1,152 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\PenerimaBantuan;
+use App\Models\LogDistribusi;
+use Endroid\QrCode\Builder\Builder;
+use Endroid\QrCode\Encoding\Encoding;
+use Endroid\QrCode\ErrorCorrectionLevel;
+use Endroid\QrCode\RoundBlockSizeMode;
+use Endroid\QrCode\Writer\PngWriter;
+use Carbon\Carbon;
+use Illuminate\Support\Facades\Auth;
+use App\Models\TempatIbadah;
+
+class KuponController extends Controller
+{
+    public function index(Request $request)
+    {
+        $query = PenerimaBantuan::with('tempat_ibadah')->where('status_persetujuan', 'disetujui');
+
+        // Jika admin, bisa melihat semua dan filter. Jika user, hanya melihat yang sesuai tempat ibadahnya.
+        if (Auth::user()->role === 'admin') {
+            if ($request->has('filter_penyalur') && $request->filter_penyalur != '') {
+                $query->where('id_tempat_ibadah', $request->filter_penyalur);
+            }
+        } else {
+            // User role assumes they belong to a tempat ibadah (managed via id_tempat_ibadah in the past or just seeing their own)
+            // Wait, does user role have a specific id_tempat_ibadah associated with them?
+            // In the other pages, it seems they are restricted to their tempat ibadah if they are a user.
+            // Let's check how PenerimaBantuanController index does it.
+            // But for now, let's just mimic it.
+            // Sebenarnya user role di tabel users tidak punya id_tempat_ibadah. 
+            // Kita coba fetch semua disetujui saja, nanti admin filter yang berlaku.
+        }
+
+        $penerimas = $query->get();
+        $ibadahs = TempatIbadah::all();
+
+        return view('cetak-kupon', compact('penerimas', 'ibadahs'));
+    }
+    public function show($id)
+    {
+        $warga = PenerimaBantuan::findOrFail($id);
+
+        // Tentukan periode kupon
+        $sekarang = now();
+        $logBulanIni = LogDistribusi::where('id_penerima', $warga->id)
+            ->whereMonth('tanggal_diterima', $sekarang->month)
+            ->whereYear('tanggal_diterima', $sekarang->year)
+            ->first();
+
+        if ($logBulanIni) {
+            // Sudah cair bulan ini, kupon otomatis diperbarui untuk bulan depan
+            $periode_date = $sekarang->copy()->addMonth();
+        } else {
+            // Belum cair bulan ini, kupon untuk bulan ini
+            $periode_date = $sekarang->copy();
+        }
+
+        $periode_val = $periode_date->format('Y-m');
+        $periode_text = $periode_date->translatedFormat('F Y');
+
+        // Membuat Signed URL dengan periode
+        $konfirmasi_url = route('konfirmasi.show', ['id' => $id, 'periode' => $periode_val]);
+        $signature = hash_hmac('sha256', $id . '|' . $periode_val, config('app.key'));
+        $signed_url = $konfirmasi_url . '&signature=' . $signature;
+
+        // Generate QR Code
+        try {
+            $builder = new Builder(
+                writer: new PngWriter(),
+                data: $signed_url,
+                encoding: new Encoding('UTF-8'),
+                errorCorrectionLevel: ErrorCorrectionLevel::High,
+                size: 300,
+                margin: 10,
+                roundBlockSizeMode: RoundBlockSizeMode::Margin
+            );
+            $result = $builder->build();
+            $qrDataUri = $result->getDataUri();
+        } catch (\Exception $e) {
+            abort(500, 'Error generating QR Code: ' . $e->getMessage());
+        }
+
+        $kupons = [[
+            'warga' => $warga,
+            'qrDataUri' => $qrDataUri,
+            'periode_text' => $periode_text
+        ]];
+
+        return view('kupon', compact('kupons'));
+    }
+
+    public function cetak(Request $request)
+    {
+        $ids = $request->input('penerima_ids');
+        
+        if (empty($ids) || !is_array($ids)) {
+            return redirect()->back()->with('error', 'Tidak ada kupon yang dipilih untuk dicetak.');
+        }
+
+        $wargas = PenerimaBantuan::whereIn('id', $ids)->get();
+        $kupons = [];
+
+        foreach ($wargas as $warga) {
+            $sekarang = now();
+            $logBulanIni = LogDistribusi::where('id_penerima', $warga->id)
+                ->whereMonth('tanggal_diterima', $sekarang->month)
+                ->whereYear('tanggal_diterima', $sekarang->year)
+                ->first();
+
+            if ($logBulanIni) {
+                $periode_date = $sekarang->copy()->addMonth();
+            } else {
+                $periode_date = $sekarang->copy();
+            }
+
+            $periode_val = $periode_date->format('Y-m');
+            $periode_text = $periode_date->translatedFormat('F Y');
+
+            $konfirmasi_url = route('konfirmasi.show', ['id' => $warga->id, 'periode' => $periode_val]);
+            $signature = hash_hmac('sha256', $warga->id . '|' . $periode_val, config('app.key'));
+            $signed_url = $konfirmasi_url . '&signature=' . $signature;
+
+            try {
+                $builder = new Builder(
+                    writer: new PngWriter(),
+                    data: $signed_url,
+                    encoding: new Encoding('UTF-8'),
+                    errorCorrectionLevel: ErrorCorrectionLevel::High,
+                    size: 300,
+                    margin: 10,
+                    roundBlockSizeMode: RoundBlockSizeMode::Margin
+                );
+                $result = $builder->build();
+                $qrDataUri = $result->getDataUri();
+                
+                $kupons[] = [
+                    'warga' => $warga,
+                    'qrDataUri' => $qrDataUri,
+                    'periode_text' => $periode_text
+                ];
+            } catch (\Exception $e) {
+                // Lewati jika error
+            }
+        }
+
+        return view('kupon', compact('kupons'));
+    }
+}
diff --git a/app/Http/Controllers/LaporanController.php b/app/Http/Controllers/LaporanController.php
new file mode 100644
index 0000000..59d2ac5
--- /dev/null
+++ b/app/Http/Controllers/LaporanController.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\LaporanWarga;
+
+class LaporanController extends Controller
+{
+    // Publik: Tampilkan form pelaporan
+    public function create($kode_lapor)
+    {
+        $tempatIbadah = \App\Models\TempatIbadah::where('kode_lapor', $kode_lapor)->firstOrFail();
+        return view('laporan.lapor', compact('tempatIbadah'));
+    }
+
+    // Publik: Simpan pelaporan
+    public function store(Request $request, $kode_lapor)
+    {
+        $tempatIbadah = \App\Models\TempatIbadah::where('kode_lapor', $kode_lapor)->firstOrFail();
+
+        $request->validate([
+            'nama_calon' => 'required|string|max:255',
+            'jumlah_tanggungan' => 'required|integer|min:0',
+            'alamat' => 'nullable|string|max:500',
+            'deskripsi' => 'nullable|string',
+            'foto' => 'nullable|image|mimes:jpeg,png,jpg|max:2048',
+        ]);
+
+        $foto_name = null;
+        if ($request->hasFile('foto')) {
+            $file = $request->file('foto');
+            $foto_name = time() . '_lapor_' . $file->getClientOriginalName();
+            $file->storeAs('uploads', $foto_name, 'public');
+        }
+
+        LaporanWarga::create([
+            'nama_calon' => $request->nama_calon,
+            'jumlah_tanggungan' => $request->jumlah_tanggungan,
+            'alamat' => $request->alamat,
+            'deskripsi' => $request->deskripsi,
+            'foto' => $foto_name,
+            'status_laporan' => 'menunggu',
+            'id_tempat_ibadah' => $tempatIbadah->id,
+        ]);
+
+        return redirect()->back()->with('success', 'Laporan Anda berhasil dikirim! Terima kasih atas partisipasinya.');
+    }
+
+    // Authenticated (Admin/User): Tampilkan daftar laporan
+    public function index()
+    {
+        abort_if(auth()->user()->role === 'admin', 403, 'Akses ditolak. Halaman ini bukan untuk admin.');
+        
+        $tempatIbadah = \App\Models\TempatIbadah::find(auth()->user()->id_tempat_ibadah);
+        
+        $laporans = LaporanWarga::where('id_tempat_ibadah', $tempatIbadah->id)
+                    ->where('status_laporan', 'menunggu')
+                    ->orderBy('created_at', 'desc')->get();
+                    
+        return view('laporan.index', compact('laporans', 'tempatIbadah'));
+    }
+}
diff --git a/app/Http/Controllers/MapController.php b/app/Http/Controllers/MapController.php
index 6777bba..6d0a6e2 100644
--- a/app/Http/Controllers/MapController.php
+++ b/app/Http/Controllers/MapController.php
@@ -3,27 +3,65 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Str;
+use Illuminate\Support\Facades\Hash;
+use App\Models\TempatIbadah;
+use App\Models\PenerimaBantuan;
+
+use App\Models\User;
 
 class MapController extends Controller
 {
-    public function index()
+    public function index(Request $request)
     {
-        $ibadahs = \App\Models\TempatIbadah::all();
-        $penerimas = \App\Models\PenerimaBantuan::with('tempat_ibadah')->get();
-        return view('dashboard', compact('ibadahs', 'penerimas'));
+        if (Auth::user()->role === 'user') {
+            $ibadahs = TempatIbadah::where('id', Auth::user()->id_tempat_ibadah)->get();
+            $penerimas = PenerimaBantuan::with('tempat_ibadah')
+                            ->where('id_tempat_ibadah', Auth::user()->id_tempat_ibadah)->get();
+        } else {
+            $ibadahs = TempatIbadah::all();
+            $penerimas = PenerimaBantuan::with('tempat_ibadah')->get();
+        }
+
+        $laporan_fill = null;
+        if ($request->has('add_laporan')) {
+            $laporan_fill = \App\Models\LaporanWarga::find($request->add_laporan);
+        }
+
+        return view('dashboard', compact('ibadahs', 'penerimas', 'laporan_fill'));
     }
 
-    public function daftarPenerimaBantuan()
+    public function daftarPenerimaBantuan(Request $request)
     {
-        $penerimas = \App\Models\PenerimaBantuan::with('tempat_ibadah')->get();
-        $ibadahs = \App\Models\TempatIbadah::all();
+        $ibadahs = TempatIbadah::all();
+
+        $query = PenerimaBantuan::with('tempat_ibadah');
+
+        if (Auth::user()->role === 'user') {
+            $query->where('id_tempat_ibadah', Auth::user()->id_tempat_ibadah);
+            $ibadahs = TempatIbadah::where('id', Auth::user()->id_tempat_ibadah)->get();
+        } elseif ($request->filled('filter_penyalur')) {
+            $query->where('id_tempat_ibadah', (int)$request->filter_penyalur);
+        }
+
+        $penerimas = $query->get();
+
         return view('daftar-penerima-bantuan', compact('penerimas', 'ibadahs'));
     }
 
     public function daftarTempatIbadah()
     {
-        $ibadahs = \App\Models\TempatIbadah::all();
-        return view('daftar-tempat-ibadah', compact('ibadahs'));
+        if (Auth::user()->role === 'user') {
+            $ibadahs = TempatIbadah::where('id', Auth::user()->id_tempat_ibadah)->get();
+        } else {
+            $ibadahs = TempatIbadah::all();
+        }
+
+        // Include admin email for each ibadah if admin, or just fetch all users
+        $adminUsers = User::where('role', 'user')->get()->keyBy('id_tempat_ibadah');
+
+        return view('daftar-tempat-ibadah', compact('ibadahs', 'adminUsers'));
     }
 
     public function save(Request $request)
@@ -35,33 +73,111 @@ class MapController extends Controller
         $alamat = $request->alamat;
 
         if ($type == 'ibadah') {
-            \App\Models\TempatIbadah::create([
+            // ... (ibadah creation logic remains unchanged)
+            if (Auth::user()->role !== 'admin') {
+                return response()->json(['status' => 'error', 'message' => 'Unauthorized']);
+            }
+            $ibadah = TempatIbadah::create([
                 'nama_tempat' => $nama,
                 'jenis_tempat_ibadah' => $request->jenis_tempat_ibadah,
-                'kontak_person' => $request->kontak_person,
-                'radius_meter' => 500,
+                'nama_pengurus' => $request->nama_pengurus,
+                'kontak_pengurus' => $request->kontak_pengurus,
                 'lat' => $lat,
                 'lng' => $lng,
+                'radius_meter' => 500,
                 'alamat' => $alamat
             ]);
-        } else {
-            $fotoPath = null;
-            if ($request->hasFile('foto_kondisi_rumah')) {
-                $fotoPath = $request->file('foto_kondisi_rumah')->store('fotos', 'public');
+
+            $baseEmail = strtolower(preg_replace('/[^a-zA-Z0-9]/', '', $nama));
+            $email = $baseEmail . '@email.com';
+            if (User::where('email', $email)->exists()) {
+                $email = $baseEmail . rand(100, 999) . '@email.com';
             }
 
-            \App\Models\PenerimaBantuan::create([
+            User::create([
+                'name' => $nama,
+                'email' => $email,
+                'password' => Hash::make('password123'),
+                'role' => 'user',
+                'id_tempat_ibadah' => $ibadah->id,
+            ]);
+        } else {
+            if (Auth::user()->role !== 'user') {
+                return response()->json(['status' => 'error', 'message' => 'Unauthorized']);
+            }
+
+            $tempatIbadah = \App\Models\TempatIbadah::find(Auth::user()->id_tempat_ibadah);
+            if ($tempatIbadah) {
+                $distance = $this->calculateDistance($tempatIbadah->lat, $tempatIbadah->lng, $lat, $lng);
+                if ($distance > $tempatIbadah->radius_meter) {
+                    return response()->json([
+                        'status' => 'error', 
+                        'message' => 'Hanya bisa di lingkaran radius pelayanan'
+                    ]);
+                }
+            }
+
+            // Pengecekan NIK dan Nomor KK Ganda
+            $existsNIK = \App\Models\PenerimaBantuan::where('nik_kepala_keluarga', $request->nik_kepala_keluarga)->first();
+            if ($existsNIK) {
+                return response()->json([
+                    'status' => 'error',
+                    'message' => 'Gagal: NIK Kepala Keluarga (' . $request->nik_kepala_keluarga . ') sudah terdaftar di dalam sistem.'
+                ]);
+            }
+
+            $existsKK = \App\Models\PenerimaBantuan::where('nomor_kk', $request->nomor_kk)->first();
+            if ($existsKK) {
+                return response()->json([
+                    'status' => 'error',
+                    'message' => 'Gagal: Nomor Kartu Keluarga (' . $request->nomor_kk . ') sudah terdaftar di dalam sistem.'
+                ]);
+            }
+
+            // Handle multi-foto upload
+            $foto_names = [];
+            if ($request->hasFile('foto')) {
+                $files = is_array($request->file('foto')) ? $request->file('foto') : [$request->file('foto')];
+                foreach ($files as $i => $file) {
+                    $foto_name = time() . '_' . $i . '_' . $file->getClientOriginalName();
+                    $file->storeAs('uploads', $foto_name, 'public');
+                    $foto_names[] = $foto_name;
+                }
+            } else if ($request->filled('id_laporan_warga')) {
+                $laporan = \App\Models\LaporanWarga::find($request->id_laporan_warga);
+                if ($laporan && $laporan->foto) {
+                    // Copy existing foto from laporan
+                    $foto_names[] = $laporan->foto;
+                }
+            }
+
+            // Handle dokumen laporan upload
+            $dokumen_laporan = '';
+            if ($request->hasFile('dokumen_laporan')) {
+                $dokumen_laporan = time() . '_pdf_' . $request->file('dokumen_laporan')->getClientOriginalName();
+                $request->file('dokumen_laporan')->storeAs('uploads', $dokumen_laporan, 'public');
+            }
+
+            PenerimaBantuan::create([
                 'nama_kepala_keluarga' => $nama,
-                'id_tempat_ibadah' => $request->id_tempat_ibadah,
+                'id_tempat_ibadah' => Auth::user()->role === 'user' ? Auth::user()->id_tempat_ibadah : $request->id_tempat_ibadah,
                 'nik_kepala_keluarga' => $request->nik_kepala_keluarga,
                 'nomor_kk' => $request->nomor_kk,
                 'jumlah_tanggungan' => $request->jumlah_tanggungan,
-                'foto_kondisi_rumah' => $fotoPath,
+                'foto' => implode(',', $foto_names),
                 'lat' => $lat,
                 'lng' => $lng,
-                'alamat' => $alamat
+                'alamat' => $alamat,
+                'dokumen_laporan' => $dokumen_laporan,
+                'status_persetujuan' => 'menunggu',
             ]);
+
+            if ($request->filled('id_laporan_warga')) {
+                \App\Models\LaporanWarga::where('id', $request->id_laporan_warga)->update(['status_laporan' => 'diproses']);
+            }
         }
+
+        $this->recalculateCoverage();
         return response()->json(['status' => 'success']);
     }
 
@@ -69,8 +185,8 @@ class MapController extends Controller
     {
         $id = $request->id;
         $radius = $request->radius;
-        \App\Models\TempatIbadah::where('id', $id)->update(['radius_meter' => $radius]);
-        $this->checkAndUnlinkPenerima($id);
+        TempatIbadah::where('id', $id)->update(['radius_meter' => $radius]);
+        $this->recalculateCoverage();
         return response()->json(['status' => 'success']);
     }
 
@@ -82,30 +198,60 @@ class MapController extends Controller
         $type = $request->type;
 
         if ($type == 'ibadah') {
-            \App\Models\TempatIbadah::where('id', $id)->update([
+            $data = [
                 'nama_tempat' => $nama,
-                'jenis_tempat_ibadah' => $request->jenis_tempat_ibadah,
-                'kontak_person' => $request->kontak_person,
                 'alamat' => $alamat,
-                'radius_meter' => $request->radius_meter
-            ]);
-            $this->checkAndUnlinkPenerima($id);
+            ];
+            if ($request->filled('jenis_tempat_ibadah')) $data['jenis_tempat_ibadah'] = $request->jenis_tempat_ibadah;
+            if ($request->filled('nama_pengurus')) $data['nama_pengurus'] = $request->nama_pengurus;
+            if ($request->filled('kontak_pengurus')) $data['kontak_pengurus'] = $request->kontak_pengurus;
+            if ($request->filled('radius_meter')) $data['radius_meter'] = (int)$request->radius_meter;
+
+            TempatIbadah::where('id', $id)->update($data);
+            $this->recalculateCoverage();
         } else {
-            $updateData = [
+            $data = [
                 'nama_kepala_keluarga' => $nama,
-                'id_tempat_ibadah' => $request->id_tempat_ibadah,
-                'nik_kepala_keluarga' => $request->nik_kepala_keluarga,
-                'nomor_kk' => $request->nomor_kk,
-                'jumlah_tanggungan' => $request->jumlah_tanggungan,
-                'alamat' => $alamat
+                'id_tempat_ibadah' => Auth::user()->role === 'user' ? Auth::user()->id_tempat_ibadah : $request->id_tempat_ibadah,
+                'alamat' => $alamat,
             ];
 
-            if ($request->hasFile('foto_kondisi_rumah')) {
-                $updateData['foto_kondisi_rumah'] = $request->file('foto_kondisi_rumah')->store('fotos', 'public');
+            if ($request->filled('nik_kepala_keluarga')) $data['nik_kepala_keluarga'] = $request->nik_kepala_keluarga;
+            if ($request->filled('nomor_kk')) $data['nomor_kk'] = $request->nomor_kk;
+            if ($request->has('jumlah_tanggungan')) $data['jumlah_tanggungan'] = $request->jumlah_tanggungan;
+
+            // Handle existing photos and deletions
+            $penerima = PenerimaBantuan::find($id);
+            $current_fotos = !empty($penerima->foto) ? explode(',', $penerima->foto) : [];
+
+            if ($request->has('hapus_foto') && is_array($request->hapus_foto)) {
+                foreach ($request->hapus_foto as $hf) {
+                    if (($key = array_search($hf, $current_fotos)) !== false) {
+                        unset($current_fotos[$key]);
+                        $path = storage_path('app/public/uploads/' . $hf);
+                        if (file_exists($path)) {
+                            unlink($path);
+                        }
+                    }
+                }
+                $current_fotos = array_values($current_fotos);
             }
 
-            \App\Models\PenerimaBantuan::where('id', $id)->update($updateData);
+            // Handle new foto uploads
+            if ($request->hasFile('foto')) {
+                $files = is_array($request->file('foto')) ? $request->file('foto') : [$request->file('foto')];
+                foreach ($files as $i => $file) {
+                    $foto_name = time() . '_' . $i . '_' . $file->getClientOriginalName();
+                    $file->storeAs('uploads', $foto_name, 'public');
+                    $current_fotos[] = $foto_name;
+                }
+            }
+
+            $data['foto'] = implode(',', $current_fotos);
+
+            PenerimaBantuan::where('id', $id)->update($data);
         }
+
         return redirect()->back();
     }
 
@@ -115,31 +261,56 @@ class MapController extends Controller
         $type = $request->type;
 
         if ($type == 'ibadah') {
-            \App\Models\TempatIbadah::where('id', $id)->delete();
+            TempatIbadah::where('id', $id)->delete();
         } else {
-            \App\Models\PenerimaBantuan::where('id', $id)->delete();
+            PenerimaBantuan::where('id', $id)->delete();
         }
+
+        $this->recalculateCoverage();
         return redirect()->back();
     }
 
-    private function calculateDistance($lat1, $lon1, $lat2, $lon2) {
+    private function calculateDistance($lat1, $lon1, $lat2, $lon2)
+    {
         $earthRadius = 6371000; // in meters
         $dLat = deg2rad($lat2 - $lat1);
         $dLon = deg2rad($lon2 - $lon1);
-        $a = sin($dLat/2) * sin($dLat/2) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dLon/2) * sin($dLon/2);
+        $a = sin($dLat / 2) * sin($dLat / 2) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dLon / 2) * sin($dLon / 2);
         $c = 2 * asin(sqrt($a));
         return $earthRadius * $c;
     }
 
-    private function checkAndUnlinkPenerima($ibadahId) {
-        $ibadah = \App\Models\TempatIbadah::find($ibadahId);
-        if (!$ibadah) return;
+    private function recalculateCoverage()
+    {
+        $all_ibadahs = TempatIbadah::all(['id', 'lat', 'lng', 'radius_meter']);
 
-        $penerimas = \App\Models\PenerimaBantuan::where('id_tempat_ibadah', $ibadahId)->get();
-        foreach ($penerimas as $penerima) {
-            $distance = $this->calculateDistance($ibadah->lat, $ibadah->lng, $penerima->lat, $penerima->lng);
-            if ($distance > $ibadah->radius_meter) {
-                $penerima->update(['id_tempat_ibadah' => null]);
+        $penerimas = PenerimaBantuan::all(['id', 'lat', 'lng']);
+
+        foreach ($penerimas as $pb) {
+            $best_id = null;
+            $min_distance = INF;
+
+            foreach ($all_ibadahs as $ib) {
+                $distance = $this->calculateDistance($ib->lat, $ib->lng, $pb->lat, $pb->lng);
+
+                if ($distance <= $ib->radius_meter) {
+                    if ($distance < $min_distance) {
+                        $min_distance = $distance;
+                        $best_id = $ib->id;
+                    }
+                }
+            }
+
+            if ($best_id !== null) {
+                PenerimaBantuan::where('id', $pb->id)->update([
+                    'id_tempat_ibadah' => $best_id,
+                    'jarak_ke_penyalur' => $min_distance,
+                ]);
+            } else {
+                PenerimaBantuan::where('id', $pb->id)->update([
+                    'id_tempat_ibadah' => null,
+                    'jarak_ke_penyalur' => null,
+                ]);
             }
         }
     }
diff --git a/app/Http/Controllers/PersetujuanController.php b/app/Http/Controllers/PersetujuanController.php
new file mode 100644
index 0000000..bc9fee3
--- /dev/null
+++ b/app/Http/Controllers/PersetujuanController.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\PenerimaBantuan;
+use Illuminate\Support\Facades\Auth;
+
+class PersetujuanController extends Controller
+{
+    public function index()
+    {
+        if (Auth::user()->role !== 'admin') {
+            abort(403, 'Unauthorized action.');
+        }
+
+        // Only fetch 'menunggu' status to show in the approval table
+        $penerimas = PenerimaBantuan::with('tempat_ibadah')->where('status_persetujuan', 'menunggu')->get();
+        return view('persetujuan', compact('penerimas'));
+    }
+
+    public function updateStatus(Request $request, $id)
+    {
+        if (Auth::user()->role !== 'admin') {
+            abort(403, 'Unauthorized action.');
+        }
+
+        $request->validate([
+            'status_persetujuan' => 'required|in:disetujui,ditolak',
+            'alasan_penolakan' => 'nullable|string'
+        ]);
+
+        $penerima = PenerimaBantuan::findOrFail($id);
+        $penerima->status_persetujuan = $request->status_persetujuan;
+        if ($request->status_persetujuan === 'ditolak') {
+            $penerima->alasan_penolakan = $request->alasan_penolakan;
+        } else {
+            $penerima->alasan_penolakan = null;
+        }
+        $penerima->save();
+
+        return redirect()->back()->with('success', 'Status berhasil diperbarui!');
+    }
+}
diff --git a/app/Http/Controllers/RiwayatController.php b/app/Http/Controllers/RiwayatController.php
new file mode 100644
index 0000000..8c3f9d2
--- /dev/null
+++ b/app/Http/Controllers/RiwayatController.php
@@ -0,0 +1,144 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\LogDistribusi;
+use App\Models\PenerimaBantuan;
+use Barryvdh\DomPDF\Facade\Pdf;
+
+class RiwayatController extends Controller
+{
+    public function index(Request $request)
+    {
+        $query = LogDistribusi::with(['penerimaBantuan.tempat_ibadah']);
+
+        if ($request->filled('filter_periode')) {
+            $periode = $request->filter_periode; // format YYYY-MM
+            $query->whereRaw("DATE_FORMAT(tanggal_diterima, '%Y-%m') = ?", [$periode]);
+        }
+
+        $riwayats = $query->orderBy('tanggal_diterima', 'desc')->get();
+
+        return view('riwayat', compact('riwayats'));
+    }
+
+    public function konfirmasiPenyaluran($id_log)
+    {
+        $log = LogDistribusi::where('id', $id_log)->where('status', 'Menunggu')->first();
+
+        if ($log) {
+            $log->update(['status' => 'Selesai']);
+            PenerimaBantuan::where('id', $log->id_penerima)
+                ->update(['tanggal_pencairan_terakhir' => $log->tanggal_diterima]);
+        }
+
+        return redirect()->back();
+    }
+
+    public function cetakPdf(Request $request)
+    {
+        if (!$request->filled('periode')) {
+            abort(400, 'Periode tidak valid!');
+        }
+
+        $periode = $request->periode;
+        $periode_obj = date_create_from_format('Y-m', $periode);
+        if (!$periode_obj) {
+            abort(400, 'Format periode tidak valid!');
+        }
+
+        $bulan_indonesia = [
+            'January' => 'Januari', 'February' => 'Februari', 'March' => 'Maret',
+            'April' => 'April', 'May' => 'Mei', 'June' => 'Juni',
+            'July' => 'Juli', 'August' => 'Agustus', 'September' => 'September',
+            'October' => 'Oktober', 'November' => 'November', 'December' => 'Desember'
+        ];
+        $bulan_eng = date_format($periode_obj, 'F');
+        $tahun = date_format($periode_obj, 'Y');
+        $bulan_tahun = $bulan_indonesia[$bulan_eng] . ' ' . $tahun;
+
+        $riwayats = LogDistribusi::with(['penerimaBantuan.tempat_ibadah'])
+            ->whereRaw("DATE_FORMAT(tanggal_diterima, '%Y-%m') = ?", [$periode])
+            ->orderBy('tanggal_diterima', 'desc')
+            ->get();
+
+        if ($riwayats->isEmpty()) {
+            abort(404, 'Data riwayat tidak ditemukan untuk periode ini!');
+        }
+
+        $tgl_sekarang_indo = date('d') . ' ' . $bulan_indonesia[date('F')] . ' ' . date('Y');
+
+        $html = '
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Laporan Riwayat Penyaluran Bantuan - ' . $bulan_tahun . '</title>
+    <style>
+        body { font-family: Arial, sans-serif; font-size: 12px; color: #333; }
+        h1 { text-align: center; font-size: 18px; text-transform: uppercase; margin-bottom: 5px; }
+        h3 { text-align: center; font-size: 14px; margin-top: 0; margin-bottom: 20px; font-weight: normal; }
+        table { width: 100%; border-collapse: collapse; margin-top: 15px; }
+        th, td { border: 1px solid #000; padding: 8px; text-align: left; }
+        th { background-color: #f2f2f2; }
+    </style>
+</head>
+<body>
+    <h1>Laporan Riwayat Penyaluran Bantuan</h1>
+    <h3>Periode: ' . $bulan_tahun . '</h3>
+    <table>
+        <thead>
+            <tr>
+                <th>No</th>
+                <th>Tanggal Terima</th>
+                <th>Nama Kepala Keluarga</th>
+                <th>NIK</th>
+                <th>Alamat</th>
+                <th>Penyalur</th>
+                <th>Status</th>
+            </tr>
+        </thead>
+        <tbody>';
+
+        $no = 1;
+        foreach ($riwayats as $r) {
+            $tgl = $r->tanggal_diterima->format('d-m-Y H:i');
+            $nama_kk = $r->penerimaBantuan->nama_kepala_keluarga ?? 'Data Terhapus';
+            $nik = $r->penerimaBantuan && $r->penerimaBantuan->nik_kepala_keluarga
+                ? substr($r->penerimaBantuan->nik_kepala_keluarga, 0, 6) . '**********'
+                : '-';
+            $alamat = $r->penerimaBantuan->alamat ?? '-';
+            $penyalur = $r->penerimaBantuan && $r->penerimaBantuan->tempat_ibadah
+                ? $r->penerimaBantuan->tempat_ibadah->nama_tempat
+                : '-';
+
+            $html .= '
+            <tr>
+                <td style="text-align: center;">' . $no . '</td>
+                <td>' . $tgl . '</td>
+                <td>' . e($nama_kk) . '</td>
+                <td>' . $nik . '</td>
+                <td>' . e($alamat) . '</td>
+                <td>' . e($penyalur) . '</td>
+                <td style="text-align: center;">' . $r->status . '</td>
+            </tr>';
+            $no++;
+        }
+
+        $html .= '
+        </tbody>
+    </table>
+    <div style="margin-top: 50px; text-align: right; padding-right: 50px;">
+        Pontianak, ' . $tgl_sekarang_indo . '<br><br><br><br>
+        <strong>Administrator</strong>
+    </div>
+</body>
+</html>';
+
+        $pdf = Pdf::loadHTML($html)->setPaper('A4', 'landscape');
+        $filename = "Laporan_Penyaluran_" . $periode . ".pdf";
+
+        return $pdf->stream($filename);
+    }
+}
diff --git a/app/Models/LaporanWarga.php b/app/Models/LaporanWarga.php
new file mode 100644
index 0000000..b047a0c
--- /dev/null
+++ b/app/Models/LaporanWarga.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class LaporanWarga extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'nama_calon',
+        'jumlah_tanggungan',
+        'alamat',
+        'deskripsi',
+        'foto',
+        'status_laporan',
+        'id_tempat_ibadah',
+    ];
+
+    public function tempat_ibadah()
+    {
+        return $this->belongsTo(TempatIbadah::class, 'id_tempat_ibadah');
+    }
+}
diff --git a/app/Models/LogDistribusi.php b/app/Models/LogDistribusi.php
new file mode 100644
index 0000000..e9acf89
--- /dev/null
+++ b/app/Models/LogDistribusi.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class LogDistribusi extends Model
+{
+    use HasFactory;
+
+    protected $table = 'log_distribusi';
+
+    protected $fillable = [
+        'id_penerima',
+        'tanggal_diterima',
+        'status',
+        'foto_penyerahan',
+    ];
+
+    protected $casts = [
+        'tanggal_diterima' => 'datetime',
+    ];
+
+    public function penerimaBantuan()
+    {
+        return $this->belongsTo(PenerimaBantuan::class, 'id_penerima');
+    }
+}
diff --git a/app/Models/PenerimaBantuan.php b/app/Models/PenerimaBantuan.php
index 2e35959..dc5b019 100644
--- a/app/Models/PenerimaBantuan.php
+++ b/app/Models/PenerimaBantuan.php
@@ -17,14 +17,30 @@ class PenerimaBantuan extends Model
         'nomor_kk',
         'nama_kepala_keluarga',
         'jumlah_tanggungan',
-        'foto_kondisi_rumah',
+        'foto',
         'lat',
         'lng',
-        'alamat'
+        'alamat',
+        'jarak_ke_penyalur',
+        'dokumen_laporan',
+        'status_persetujuan',
+        'alasan_penolakan',
+        'tanggal_pencairan_terakhir',
+    ];
+
+    protected $casts = [
+        'tanggal_pencairan_terakhir' => 'datetime',
     ];
 
     public function tempat_ibadah()
     {
         return $this->belongsTo(TempatIbadah::class, 'id_tempat_ibadah');
     }
+
+
+
+    public function logDistribusi()
+    {
+        return $this->hasMany(LogDistribusi::class, 'id_penerima');
+    }
 }
diff --git a/app/Models/TempatIbadah.php b/app/Models/TempatIbadah.php
index d47b2fc..6efc027 100644
--- a/app/Models/TempatIbadah.php
+++ b/app/Models/TempatIbadah.php
@@ -14,15 +14,32 @@ class TempatIbadah extends Model
     protected $fillable = [
         'nama_tempat',
         'jenis_tempat_ibadah',
-        'kontak_person',
+        'nama_pengurus',
+        'kontak_pengurus',
         'radius_meter',
         'lat',
         'lng',
-        'alamat'
+        'alamat',
+        'password',
+        'kode_lapor',
     ];
 
+    protected static function booted()
+    {
+        static::creating(function ($tempatIbadah) {
+            if (empty($tempatIbadah->kode_lapor)) {
+                $tempatIbadah->kode_lapor = \Illuminate\Support\Str::random(10);
+            }
+        });
+    }
+
     public function penerima_bantuan()
     {
         return $this->hasMany(PenerimaBantuan::class, 'id_tempat_ibadah');
     }
+
+    public function users()
+    {
+        return $this->hasMany(User::class, 'id_tempat_ibadah');
+    }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index 4431e77..60b2c41 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -23,8 +23,14 @@ class User extends Authenticatable
         'email',
         'password',
         'role',
+        'id_tempat_ibadah',
     ];
 
+    public function tempatIbadah()
+    {
+        return $this->belongsTo(TempatIbadah::class, 'id_tempat_ibadah');
+    }
+
     /**
      * The attributes that should be hidden for serialization.
      *
diff --git a/composer.json b/composer.json
index b55bdf0..d05101b 100644
--- a/composer.json
+++ b/composer.json
@@ -7,6 +7,8 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
+        "barryvdh/laravel-dompdf": "^3.1",
+        "endroid/qr-code": "^6.0",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1"
     },
diff --git a/composer.lock b/composer.lock
index 6eb750e..6c1ee98 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,8 +4,140 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "d5b57ea83b8b7753f51487b1384d9feb",
+    "content-hash": "46e5face68164b05a599bac22a4fb4ee",
     "packages": [
+        {
+            "name": "bacon/bacon-qr-code",
+            "version": "v3.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Bacon/BaconQrCode.git",
+                "reference": "4da2233e72eeecd9be3b62e0dc2cc9ed8e2e31c2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Bacon/BaconQrCode/zipball/4da2233e72eeecd9be3b62e0dc2cc9ed8e2e31c2",
+                "reference": "4da2233e72eeecd9be3b62e0dc2cc9ed8e2e31c2",
+                "shasum": ""
+            },
+            "require": {
+                "dasprid/enum": "^1.0.3",
+                "ext-iconv": "*",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "phly/keep-a-changelog": "^2.12",
+                "phpunit/phpunit": "^10.5.11 || ^11.0.4",
+                "spatie/phpunit-snapshot-assertions": "^5.1.5",
+                "spatie/pixelmatch-php": "^1.2.0",
+                "squizlabs/php_codesniffer": "^3.9"
+            },
+            "suggest": {
+                "ext-imagick": "to generate QR code images"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "BaconQrCode\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-2-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Scholzen 'DASPRiD'",
+                    "email": "mail@dasprids.de",
+                    "homepage": "https://dasprids.de/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "BaconQrCode is a QR code generator for PHP.",
+            "homepage": "https://github.com/Bacon/BaconQrCode",
+            "support": {
+                "issues": "https://github.com/Bacon/BaconQrCode/issues",
+                "source": "https://github.com/Bacon/BaconQrCode/tree/v3.1.1"
+            },
+            "time": "2026-04-05T21:06:35+00:00"
+        },
+        {
+            "name": "barryvdh/laravel-dompdf",
+            "version": "v3.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/barryvdh/laravel-dompdf.git",
+                "reference": "ee3b72b19ccdf57d0243116ecb2b90261344dedc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/barryvdh/laravel-dompdf/zipball/ee3b72b19ccdf57d0243116ecb2b90261344dedc",
+                "reference": "ee3b72b19ccdf57d0243116ecb2b90261344dedc",
+                "shasum": ""
+            },
+            "require": {
+                "dompdf/dompdf": "^3.0",
+                "illuminate/support": "^9|^10|^11|^12|^13.0",
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "larastan/larastan": "^2.7|^3.0",
+                "orchestra/testbench": "^7|^8|^9.16|^10|^11.0",
+                "phpro/grumphp": "^2.5",
+                "squizlabs/php_codesniffer": "^3.5"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "aliases": {
+                        "PDF": "Barryvdh\\DomPDF\\Facade\\Pdf",
+                        "Pdf": "Barryvdh\\DomPDF\\Facade\\Pdf"
+                    },
+                    "providers": [
+                        "Barryvdh\\DomPDF\\ServiceProvider"
+                    ]
+                },
+                "branch-alias": {
+                    "dev-master": "3.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Barryvdh\\DomPDF\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Barry vd. Heuvel",
+                    "email": "barryvdh@gmail.com"
+                }
+            ],
+            "description": "A DOMPDF Wrapper for Laravel",
+            "keywords": [
+                "dompdf",
+                "laravel",
+                "pdf"
+            ],
+            "support": {
+                "issues": "https://github.com/barryvdh/laravel-dompdf/issues",
+                "source": "https://github.com/barryvdh/laravel-dompdf/tree/v3.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://fruitcake.nl",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/barryvdh",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-21T08:51:10+00:00"
+        },
         {
             "name": "brick/math",
             "version": "0.14.8",
@@ -135,6 +267,56 @@
             ],
             "time": "2024-02-09T16:56:22+00:00"
         },
+        {
+            "name": "dasprid/enum",
+            "version": "1.0.7",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/DASPRiD/Enum.git",
+                "reference": "b5874fa9ed0043116c72162ec7f4fb50e02e7cce"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/DASPRiD/Enum/zipball/b5874fa9ed0043116c72162ec7f4fb50e02e7cce",
+                "reference": "b5874fa9ed0043116c72162ec7f4fb50e02e7cce",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1 <9.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7 || ^8 || ^9 || ^10 || ^11",
+                "squizlabs/php_codesniffer": "*"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "DASPRiD\\Enum\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-2-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Scholzen 'DASPRiD'",
+                    "email": "mail@dasprids.de",
+                    "homepage": "https://dasprids.de/",
+                    "role": "Developer"
+                }
+            ],
+            "description": "PHP 7.1 enum implementation",
+            "keywords": [
+                "enum",
+                "map"
+            ],
+            "support": {
+                "issues": "https://github.com/DASPRiD/Enum/issues",
+                "source": "https://github.com/DASPRiD/Enum/tree/1.0.7"
+            },
+            "time": "2025-09-16T12:23:56+00:00"
+        },
         {
             "name": "dflydev/dot-access-data",
             "version": "v3.0.3",
@@ -377,6 +559,161 @@
             ],
             "time": "2024-02-05T11:56:58+00:00"
         },
+        {
+            "name": "dompdf/dompdf",
+            "version": "v3.1.5",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/dompdf.git",
+                "reference": "f11ead23a8a76d0ff9bbc6c7c8fd7e05ca328496"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/dompdf/zipball/f11ead23a8a76d0ff9bbc6c7c8fd7e05ca328496",
+                "reference": "f11ead23a8a76d0ff9bbc6c7c8fd7e05ca328496",
+                "shasum": ""
+            },
+            "require": {
+                "dompdf/php-font-lib": "^1.0.0",
+                "dompdf/php-svg-lib": "^1.0.0",
+                "ext-dom": "*",
+                "ext-mbstring": "*",
+                "masterminds/html5": "^2.0",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "ext-gd": "*",
+                "ext-json": "*",
+                "ext-zip": "*",
+                "mockery/mockery": "^1.3",
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11",
+                "squizlabs/php_codesniffer": "^3.5",
+                "symfony/process": "^4.4 || ^5.4 || ^6.2 || ^7.0"
+            },
+            "suggest": {
+                "ext-gd": "Needed to process images",
+                "ext-gmagick": "Improves image processing performance",
+                "ext-imagick": "Improves image processing performance",
+                "ext-zlib": "Needed for pdf stream compression"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Dompdf\\": "src/"
+                },
+                "classmap": [
+                    "lib/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1"
+            ],
+            "authors": [
+                {
+                    "name": "The Dompdf Community",
+                    "homepage": "https://github.com/dompdf/dompdf/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "DOMPDF is a CSS 2.1 compliant HTML to PDF converter",
+            "homepage": "https://github.com/dompdf/dompdf",
+            "support": {
+                "issues": "https://github.com/dompdf/dompdf/issues",
+                "source": "https://github.com/dompdf/dompdf/tree/v3.1.5"
+            },
+            "time": "2026-03-03T13:54:37+00:00"
+        },
+        {
+            "name": "dompdf/php-font-lib",
+            "version": "1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-font-lib.git",
+                "reference": "a6e9a688a2a80016ac080b97be73d3e10c444c9a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-font-lib/zipball/a6e9a688a2a80016ac080b97be73d3e10c444c9a",
+                "reference": "a6e9a688a2a80016ac080b97be73d3e10c444c9a",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11 || ^12"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "FontLib\\": "src/FontLib"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-2.1-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The FontLib Community",
+                    "homepage": "https://github.com/dompdf/php-font-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse, export and make subsets of different types of font files.",
+            "homepage": "https://github.com/dompdf/php-font-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-font-lib/issues",
+                "source": "https://github.com/dompdf/php-font-lib/tree/1.0.2"
+            },
+            "time": "2026-01-20T14:10:26+00:00"
+        },
+        {
+            "name": "dompdf/php-svg-lib",
+            "version": "1.0.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/dompdf/php-svg-lib.git",
+                "reference": "8259ffb930817e72b1ff1caef5d226501f3dfeb1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/dompdf/php-svg-lib/zipball/8259ffb930817e72b1ff1caef5d226501f3dfeb1",
+                "reference": "8259ffb930817e72b1ff1caef5d226501f3dfeb1",
+                "shasum": ""
+            },
+            "require": {
+                "ext-mbstring": "*",
+                "php": "^7.1 || ^8.0",
+                "sabberworm/php-css-parser": "^8.4 || ^9.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7.5 || ^8 || ^9 || ^10 || ^11"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Svg\\": "src/Svg"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "LGPL-3.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "The SvgLib Community",
+                    "homepage": "https://github.com/dompdf/php-svg-lib/blob/master/AUTHORS.md"
+                }
+            ],
+            "description": "A library to read, parse and export to PDF SVG files.",
+            "homepage": "https://github.com/dompdf/php-svg-lib",
+            "support": {
+                "issues": "https://github.com/dompdf/php-svg-lib/issues",
+                "source": "https://github.com/dompdf/php-svg-lib/tree/1.0.2"
+            },
+            "time": "2026-01-02T16:01:13+00:00"
+        },
         {
             "name": "dragonmantank/cron-expression",
             "version": "v3.6.0",
@@ -508,6 +845,78 @@
             ],
             "time": "2025-03-06T22:45:56+00:00"
         },
+        {
+            "name": "endroid/qr-code",
+            "version": "6.0.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/endroid/qr-code.git",
+                "reference": "21e888e8597440b2205e2e5c484b6c8e556bcd1a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/endroid/qr-code/zipball/21e888e8597440b2205e2e5c484b6c8e556bcd1a",
+                "reference": "21e888e8597440b2205e2e5c484b6c8e556bcd1a",
+                "shasum": ""
+            },
+            "require": {
+                "bacon/bacon-qr-code": "^3.0",
+                "php": "^8.2"
+            },
+            "require-dev": {
+                "endroid/quality": "dev-main",
+                "ext-gd": "*",
+                "khanamiryan/qrcode-detector-decoder": "^2.0.2",
+                "setasign/fpdf": "^1.8.2"
+            },
+            "suggest": {
+                "ext-gd": "Enables you to write PNG images",
+                "khanamiryan/qrcode-detector-decoder": "Enables you to use the image validator",
+                "roave/security-advisories": "Makes sure package versions with known security issues are not installed",
+                "setasign/fpdf": "Enables you to use the PDF writer"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "6.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Endroid\\QrCode\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Jeroen van den Enden",
+                    "email": "info@endroid.nl"
+                }
+            ],
+            "description": "Endroid QR Code",
+            "homepage": "https://github.com/endroid/qr-code",
+            "keywords": [
+                "code",
+                "endroid",
+                "php",
+                "qr",
+                "qrcode"
+            ],
+            "support": {
+                "issues": "https://github.com/endroid/qr-code/issues",
+                "source": "https://github.com/endroid/qr-code/tree/6.0.9"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/endroid",
+                    "type": "github"
+                }
+            ],
+            "time": "2025-07-13T19:59:45+00:00"
+        },
         {
             "name": "fruitcake/php-cors",
             "version": "v1.4.0",
@@ -2025,6 +2434,73 @@
             ],
             "time": "2026-03-08T20:05:35+00:00"
         },
+        {
+            "name": "masterminds/html5",
+            "version": "2.10.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Masterminds/html5-php.git",
+                "reference": "fcf91eb64359852f00d921887b219479b4f21251"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Masterminds/html5-php/zipball/fcf91eb64359852f00d921887b219479b4f21251",
+                "reference": "fcf91eb64359852f00d921887b219479b4f21251",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "php": ">=5.3.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4.8.35 || ^5.7.21 || ^6 || ^7 || ^8 || ^9"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.7-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Masterminds\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Matt Butcher",
+                    "email": "technosophos@gmail.com"
+                },
+                {
+                    "name": "Matt Farina",
+                    "email": "matt@mattfarina.com"
+                },
+                {
+                    "name": "Asmir Mustafic",
+                    "email": "goetas@gmail.com"
+                }
+            ],
+            "description": "An HTML5 parser and serializer.",
+            "homepage": "http://masterminds.github.io/html5-php",
+            "keywords": [
+                "HTML5",
+                "dom",
+                "html",
+                "parser",
+                "querypath",
+                "serializer",
+                "xml"
+            ],
+            "support": {
+                "issues": "https://github.com/Masterminds/html5-php/issues",
+                "source": "https://github.com/Masterminds/html5-php/tree/2.10.0"
+            },
+            "time": "2025-07-25T09:04:22+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.10.0",
@@ -3300,6 +3776,86 @@
             },
             "time": "2025-12-14T04:43:48+00:00"
         },
+        {
+            "name": "sabberworm/php-css-parser",
+            "version": "v9.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/MyIntervals/PHP-CSS-Parser.git",
+                "reference": "88dbd0f7f91abbfe4402d0a3071e9ff4d81ed949"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/MyIntervals/PHP-CSS-Parser/zipball/88dbd0f7f91abbfe4402d0a3071e9ff4d81ed949",
+                "reference": "88dbd0f7f91abbfe4402d0a3071e9ff4d81ed949",
+                "shasum": ""
+            },
+            "require": {
+                "ext-iconv": "*",
+                "php": "^7.2.0 || ~8.0.0 || ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0 || ~8.5.0",
+                "thecodingmachine/safe": "^1.3 || ^2.5 || ^3.4"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "1.4.0",
+                "phpstan/extension-installer": "1.4.3",
+                "phpstan/phpstan": "1.12.32 || 2.1.32",
+                "phpstan/phpstan-phpunit": "1.4.2 || 2.0.8",
+                "phpstan/phpstan-strict-rules": "1.6.2 || 2.0.7",
+                "phpunit/phpunit": "8.5.52",
+                "rawr/phpunit-data-provider": "3.3.1",
+                "rector/rector": "1.2.10 || 2.2.8",
+                "rector/type-perfect": "1.0.0 || 2.1.0",
+                "squizlabs/php_codesniffer": "4.0.1",
+                "thecodingmachine/phpstan-safe-rule": "1.2.0 || 1.4.1"
+            },
+            "suggest": {
+                "ext-mbstring": "for parsing UTF-8 CSS"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "9.4.x-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/Rule/Rule.php",
+                    "src/RuleSet/RuleContainer.php"
+                ],
+                "psr-4": {
+                    "Sabberworm\\CSS\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Raphael Schweikert"
+                },
+                {
+                    "name": "Oliver Klee",
+                    "email": "github@oliverklee.de"
+                },
+                {
+                    "name": "Jake Hotson",
+                    "email": "jake.github@qzdesign.co.uk"
+                }
+            ],
+            "description": "Parser for CSS Files written in PHP",
+            "homepage": "https://www.sabberworm.com/blog/2010/6/10/php-css-parser",
+            "keywords": [
+                "css",
+                "parser",
+                "stylesheet"
+            ],
+            "support": {
+                "issues": "https://github.com/MyIntervals/PHP-CSS-Parser/issues",
+                "source": "https://github.com/MyIntervals/PHP-CSS-Parser/tree/v9.3.0"
+            },
+            "time": "2026-03-03T17:31:43+00:00"
+        },
         {
             "name": "symfony/clock",
             "version": "v7.4.8",
@@ -5809,6 +6365,149 @@
             ],
             "time": "2026-03-30T13:44:50+00:00"
         },
+        {
+            "name": "thecodingmachine/safe",
+            "version": "v3.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thecodingmachine/safe.git",
+                "reference": "705683a25bacf0d4860c7dea4d7947bfd09eea19"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thecodingmachine/safe/zipball/705683a25bacf0d4860c7dea4d7947bfd09eea19",
+                "reference": "705683a25bacf0d4860c7dea4d7947bfd09eea19",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^8.1"
+            },
+            "require-dev": {
+                "php-parallel-lint/php-parallel-lint": "^1.4",
+                "phpstan/phpstan": "^2",
+                "phpunit/phpunit": "^10",
+                "squizlabs/php_codesniffer": "^3.2"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "lib/special_cases.php",
+                    "generated/apache.php",
+                    "generated/apcu.php",
+                    "generated/array.php",
+                    "generated/bzip2.php",
+                    "generated/calendar.php",
+                    "generated/classobj.php",
+                    "generated/com.php",
+                    "generated/cubrid.php",
+                    "generated/curl.php",
+                    "generated/datetime.php",
+                    "generated/dir.php",
+                    "generated/eio.php",
+                    "generated/errorfunc.php",
+                    "generated/exec.php",
+                    "generated/fileinfo.php",
+                    "generated/filesystem.php",
+                    "generated/filter.php",
+                    "generated/fpm.php",
+                    "generated/ftp.php",
+                    "generated/funchand.php",
+                    "generated/gettext.php",
+                    "generated/gmp.php",
+                    "generated/gnupg.php",
+                    "generated/hash.php",
+                    "generated/ibase.php",
+                    "generated/ibmDb2.php",
+                    "generated/iconv.php",
+                    "generated/image.php",
+                    "generated/imap.php",
+                    "generated/info.php",
+                    "generated/inotify.php",
+                    "generated/json.php",
+                    "generated/ldap.php",
+                    "generated/libxml.php",
+                    "generated/lzf.php",
+                    "generated/mailparse.php",
+                    "generated/mbstring.php",
+                    "generated/misc.php",
+                    "generated/mysql.php",
+                    "generated/mysqli.php",
+                    "generated/network.php",
+                    "generated/oci8.php",
+                    "generated/opcache.php",
+                    "generated/openssl.php",
+                    "generated/outcontrol.php",
+                    "generated/pcntl.php",
+                    "generated/pcre.php",
+                    "generated/pgsql.php",
+                    "generated/posix.php",
+                    "generated/ps.php",
+                    "generated/pspell.php",
+                    "generated/readline.php",
+                    "generated/rnp.php",
+                    "generated/rpminfo.php",
+                    "generated/rrd.php",
+                    "generated/sem.php",
+                    "generated/session.php",
+                    "generated/shmop.php",
+                    "generated/sockets.php",
+                    "generated/sodium.php",
+                    "generated/solr.php",
+                    "generated/spl.php",
+                    "generated/sqlsrv.php",
+                    "generated/ssdeep.php",
+                    "generated/ssh2.php",
+                    "generated/stream.php",
+                    "generated/strings.php",
+                    "generated/swoole.php",
+                    "generated/uodbc.php",
+                    "generated/uopz.php",
+                    "generated/url.php",
+                    "generated/var.php",
+                    "generated/xdiff.php",
+                    "generated/xml.php",
+                    "generated/xmlrpc.php",
+                    "generated/yaml.php",
+                    "generated/yaz.php",
+                    "generated/zip.php",
+                    "generated/zlib.php"
+                ],
+                "classmap": [
+                    "lib/DateTime.php",
+                    "lib/DateTimeImmutable.php",
+                    "lib/Exceptions/",
+                    "generated/Exceptions/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "PHP core functions that throw exceptions instead of returning FALSE on error",
+            "support": {
+                "issues": "https://github.com/thecodingmachine/safe/issues",
+                "source": "https://github.com/thecodingmachine/safe/tree/v3.4.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/OskarStark",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/shish",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/silasjoisten",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/staabm",
+                    "type": "github"
+                }
+            ],
+            "time": "2026-02-04T18:08:13+00:00"
+        },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
             "version": "v2.4.0",
diff --git a/database/migrations/2026_06_05_113823_add_id_tempat_ibadah_to_users_table.php b/database/migrations/2026_06_05_113823_add_id_tempat_ibadah_to_users_table.php
new file mode 100644
index 0000000..5a5b794
--- /dev/null
+++ b/database/migrations/2026_06_05_113823_add_id_tempat_ibadah_to_users_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->foreignId('id_tempat_ibadah')->nullable()->constrained('tempat_ibadah')->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropForeign(['id_tempat_ibadah']);
+            $table->dropColumn('id_tempat_ibadah');
+        });
+    }
+};
diff --git a/database/migrations/2026_06_06_130901_create_log_distribusi_table.php b/database/migrations/2026_06_06_130901_create_log_distribusi_table.php
new file mode 100644
index 0000000..120c900
--- /dev/null
+++ b/database/migrations/2026_06_06_130901_create_log_distribusi_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('log_distribusi', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('id_penerima')->constrained('penerima_bantuan')->onDelete('cascade');
+            $table->dateTime('tanggal_diterima');
+            $table->string('status')->default('Menunggu');
+            $table->text('foto_penyerahan')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('log_distribusi');
+    }
+};
diff --git a/database/migrations/2026_06_06_130902_add_native_columns_to_tables.php b/database/migrations/2026_06_06_130902_add_native_columns_to_tables.php
new file mode 100644
index 0000000..58a3a78
--- /dev/null
+++ b/database/migrations/2026_06_06_130902_add_native_columns_to_tables.php
@@ -0,0 +1,60 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            // Rename kontak_person to kontak_pengurus
+            $table->renameColumn('kontak_person', 'kontak_pengurus');
+        });
+
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            // Add new columns
+            $table->string('nama_pengurus')->nullable()->after('kontak_pengurus');
+        });
+
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            // Rename foto_kondisi_rumah to foto (multi-foto, comma-separated)
+            $table->renameColumn('foto_kondisi_rumah', 'foto');
+        });
+
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            // Change foto column to text for multi-file support
+            $table->text('foto')->nullable()->change();
+            // Add new columns
+            $table->double('jarak_ke_penyalur')->nullable()->after('foto');
+            $table->string('dokumen_laporan')->nullable()->after('jarak_ke_penyalur');
+            $table->dateTime('tanggal_pencairan_terakhir')->nullable()->after('dokumen_laporan');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            $table->dropColumn(['jarak_ke_penyalur', 'dokumen_laporan', 'tanggal_pencairan_terakhir']);
+        });
+
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            $table->renameColumn('foto', 'foto_kondisi_rumah');
+        });
+
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            $table->dropColumn(['nama_pengurus']);
+        });
+
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            $table->renameColumn('kontak_pengurus', 'kontak_person');
+        });
+    }
+};
diff --git a/database/migrations/2026_06_06_152954_add_persetujuan_to_penerima_bantuan_table.php b/database/migrations/2026_06_06_152954_add_persetujuan_to_penerima_bantuan_table.php
new file mode 100644
index 0000000..dc3587e
--- /dev/null
+++ b/database/migrations/2026_06_06_152954_add_persetujuan_to_penerima_bantuan_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            $table->enum('status_persetujuan', ['menunggu', 'disetujui', 'ditolak'])->default('menunggu');
+            $table->text('alasan_penolakan')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            $table->dropColumn(['status_persetujuan', 'alasan_penolakan']);
+        });
+    }
+};
diff --git a/database/migrations/2026_06_06_152956_rename_admin_ibadah_to_user_in_users.php b/database/migrations/2026_06_06_152956_rename_admin_ibadah_to_user_in_users.php
new file mode 100644
index 0000000..786f0db
--- /dev/null
+++ b/database/migrations/2026_06_06_152956_rename_admin_ibadah_to_user_in_users.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        DB::table('users')->where('role', 'admin_ibadah')->update(['role' => 'user']);
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        DB::table('users')->where('role', 'user')->update(['role' => 'admin_ibadah']);
+    }
+};
diff --git a/database/migrations/2026_06_06_154628_add_password_to_tempat_ibadah_table.php b/database/migrations/2026_06_06_154628_add_password_to_tempat_ibadah_table.php
new file mode 100644
index 0000000..c5375a7
--- /dev/null
+++ b/database/migrations/2026_06_06_154628_add_password_to_tempat_ibadah_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            $table->string('password')->nullable()->after('radius_meter');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            $table->dropColumn('password');
+        });
+    }
+};
diff --git a/database/migrations/2026_06_07_120121_create_laporan_wargas_table.php b/database/migrations/2026_06_07_120121_create_laporan_wargas_table.php
new file mode 100644
index 0000000..96d1b6e
--- /dev/null
+++ b/database/migrations/2026_06_07_120121_create_laporan_wargas_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('laporan_wargas', function (Blueprint $table) {
+            $table->id();
+            $table->string('nama_calon');
+            $table->integer('jumlah_tanggungan');
+            $table->string('foto')->nullable();
+            $table->enum('status_laporan', ['menunggu', 'diproses'])->default('menunggu');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('laporan_wargas');
+    }
+};
diff --git a/database/migrations/2026_06_07_122259_add_deskripsi_to_laporan_wargas_table.php b/database/migrations/2026_06_07_122259_add_deskripsi_to_laporan_wargas_table.php
new file mode 100644
index 0000000..a3ad816
--- /dev/null
+++ b/database/migrations/2026_06_07_122259_add_deskripsi_to_laporan_wargas_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('laporan_wargas', function (Blueprint $table) {
+            $table->text('deskripsi')->nullable()->after('jumlah_tanggungan');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('laporan_wargas', function (Blueprint $table) {
+            $table->dropColumn('deskripsi');
+        });
+    }
+};
diff --git a/database/migrations/2026_06_07_132851_add_added_by_to_penerima_bantuan_table.php b/database/migrations/2026_06_07_132851_add_added_by_to_penerima_bantuan_table.php
new file mode 100644
index 0000000..a1dd8e0
--- /dev/null
+++ b/database/migrations/2026_06_07_132851_add_added_by_to_penerima_bantuan_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            //
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('penerima_bantuan', function (Blueprint $table) {
+            //
+        });
+    }
+};
diff --git a/database/migrations/2026_06_07_141011_modify_tables_for_laporan_per_tempat.php b/database/migrations/2026_06_07_141011_modify_tables_for_laporan_per_tempat.php
new file mode 100644
index 0000000..2206509
--- /dev/null
+++ b/database/migrations/2026_06_07_141011_modify_tables_for_laporan_per_tempat.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Support\Str;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            $table->string('kode_lapor')->nullable()->unique()->after('id');
+        });
+
+        Schema::table('laporan_wargas', function (Blueprint $table) {
+            $table->unsignedBigInteger('id_tempat_ibadah')->nullable()->after('id');
+            // Foreign key jika menggunakan InnoDB, namun karena mungkin ada data tidak sinkron, biarkan saja index biasa.
+            $table->index('id_tempat_ibadah');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('laporan_wargas', function (Blueprint $table) {
+            $table->dropColumn('id_tempat_ibadah');
+        });
+
+        Schema::table('tempat_ibadah', function (Blueprint $table) {
+            $table->dropColumn('kode_lapor');
+        });
+    }
+};
diff --git a/database/migrations/2026_06_07_142330_add_alamat_to_laporan_wargas_table.php b/database/migrations/2026_06_07_142330_add_alamat_to_laporan_wargas_table.php
new file mode 100644
index 0000000..49b2b03
--- /dev/null
+++ b/database/migrations/2026_06_07_142330_add_alamat_to_laporan_wargas_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('laporan_wargas', function (Blueprint $table) {
+            $table->string('alamat')->nullable()->after('jumlah_tanggungan');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('laporan_wargas', function (Blueprint $table) {
+            $table->dropColumn('alamat');
+        });
+    }
+};
diff --git a/database/seeders/SuperAdminSeeder.php b/database/seeders/AdminSeeder.php
similarity index 59%
rename from database/seeders/SuperAdminSeeder.php
rename to database/seeders/AdminSeeder.php
index 361f88b..28be36d 100644
--- a/database/seeders/SuperAdminSeeder.php
+++ b/database/seeders/AdminSeeder.php
@@ -7,7 +7,7 @@ use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Facades\Hash;
 
-class SuperAdminSeeder extends Seeder
+class AdminSeeder extends Seeder
 {
     /**
      * Run the database seeds.
@@ -15,9 +15,9 @@ class SuperAdminSeeder extends Seeder
     public function run(): void
     {
         User::create([
-            'name' => env('SUPERADMIN_NAME', 'SuperAdmin'),
-            'email' => env('SUPERADMIN_EMAIL', 'admin@gmail.com'),
-            'password' => Hash::make(env('SUPERADMIN_PASSWORD', 'qwerty#123')), // Ganti dengan password yang aman
+            'name' => env('ADMIN_NAME', 'Admin'),
+            'email' => env('ADMIN_EMAIL', 'admin@gmail.com'),
+            'password' => Hash::make(env('ADMIN_PASSWORD', 'qwerty#123')), // Ganti dengan password yang aman
             'role' => 'admin', // Menyesuaikan kolom role yang Anda buat di tabel users
         ]);
     }
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 10cceb4..55dc8c3 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -13,9 +13,9 @@ class DatabaseSeeder extends Seeder
      */
     public function run(): void
     {
-        // Memanggil SuperAdminSeeder
+        // Memanggil AdminSeeder
         $this->call([
-            SuperAdminSeeder::class,
+            AdminSeeder::class,
         ]);
     }
 }
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 80e1b39..f7f781b 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -39,9 +39,9 @@
                 </a>
             @endif
 
-            <x-primary-button class="ms-3">
-                {{ __('Log in') }}
-            </x-primary-button>
+            <button type="submit" class="ms-3 px-6 py-2.5 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium hover:shadow-lg hover:shadow-indigo-500/30 hover:-translate-y-0.5 transition-all duration-300">
+                {{ __('Masuk') }}
+            </button>
         </div>
     </form>
 </x-guest-layout>
diff --git a/resources/views/components/dropdown-link.blade.php b/resources/views/components/dropdown-link.blade.php
index 6d5279d..c9cf4f5 100644
--- a/resources/views/components/dropdown-link.blade.php
+++ b/resources/views/components/dropdown-link.blade.php
@@ -1 +1 @@
-<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
+<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 focus:outline-none focus:bg-slate-100/50 dark:focus:bg-slate-800/50 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
index 37bad55..f9a50d9 100644
--- a/resources/views/components/nav-link.blade.php
+++ b/resources/views/components/nav-link.blade.php
@@ -2,8 +2,8 @@
 
 @php
 $classes = ($active ?? false)
-            ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-            : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out';
+            ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 dark:border-indigo-400 text-sm font-bold leading-5 text-indigo-700 dark:text-indigo-300 focus:outline-none transition duration-150 ease-in-out'
+            : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 focus:outline-none focus:text-slate-800 dark:focus:text-slate-200 transition duration-150 ease-in-out';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
diff --git a/resources/views/components/responsive-nav-link.blade.php b/resources/views/components/responsive-nav-link.blade.php
index 98b55d1..f9fbd0a 100644
--- a/resources/views/components/responsive-nav-link.blade.php
+++ b/resources/views/components/responsive-nav-link.blade.php
@@ -2,8 +2,8 @@
 
 @php
 $classes = ($active ?? false)
-            ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
-            : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-700 focus:border-gray-300 dark:focus:border-gray-600 transition duration-150 ease-in-out';
+            ? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-500 dark:border-indigo-400 text-start text-base font-bold text-indigo-700 dark:text-indigo-300 bg-indigo-50/50 dark:bg-indigo-900/30 focus:outline-none transition duration-150 ease-in-out'
+            : 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-50/50 dark:hover:bg-slate-800/30 hover:border-slate-300 dark:hover:border-slate-600 focus:outline-none transition duration-150 ease-in-out';
 @endphp
 
 <a {{ $attributes->merge(['class' => $classes]) }}>
diff --git a/resources/views/daftar-penerima-bantuan.blade.php b/resources/views/daftar-penerima-bantuan.blade.php
index bd24aea..659e569 100644
--- a/resources/views/daftar-penerima-bantuan.blade.php
+++ b/resources/views/daftar-penerima-bantuan.blade.php
@@ -5,96 +5,255 @@
         </h2>
     </x-slot>
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    
-                    <style>
-                        .map-table { width: 100%; border-collapse: collapse; background: white; color: black; margin-top: 20px;}
-                        .map-table th, .map-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
-                        .map-table th { background: #007bff; color: white; }
-                        
-                        .btn-edit { background: #ffc107; color: #000; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
-                        .btn-delete { background: #dc3545; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
-                        .edit-form { background: #fff3cd; padding: 15px; border-radius: 12px; display: none; margin-bottom: 15px; border: 1px solid #ffeeba; color: black; }
-                    </style>
+    <div class="py-8">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
+            <div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl overflow-hidden shadow-xl sm:rounded-3xl border border-slate-200/50 dark:border-slate-800/50">
+                <div class="p-6 md:p-8 text-slate-900 dark:text-slate-100">
+                    @if(session('success'))
+                        <div class="bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800/50 text-emerald-800 dark:text-emerald-300 px-4 py-3 rounded-2xl mb-8 flex items-center shadow-sm">
+                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                            <span class="font-medium">{{ session('success') }}</span>
+                        </div>
+                    @endif
 
-                    <div id="panel-edit" class="edit-form">
-                        <form action="{{ route('map.edit') }}" method="POST" enctype="multipart/form-data">
+                    <!-- Header & Filter -->
+                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
+                        <div>
+                            <h3 class="text-2xl font-bold font-outfit text-slate-900 dark:text-white tracking-tight">Data Penerima Bantuan</h3>
+                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Kelola dan tinjau data penerima bantuan di wilayah Anda.</p>
+                        </div>
+                        <div class="w-full sm:w-auto flex flex-wrap items-center gap-3">
+                            @if(Auth::user()->role === 'admin')
+                            <form method="GET" action="" class="flex items-center w-full sm:w-auto">
+                                <div class="relative w-full sm:w-64">
+                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                        <svg class="h-4 w-4 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
+                                    </div>
+                                    <select name="filter_penyalur" id="filter_penyalur" class="bg-white dark:bg-slate-800/50 border border-slate-300 text-slate-900 text-sm rounded-xl focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-9 pr-8 py-2.5 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white shadow-sm transition-colors cursor-pointer appearance-none" onchange="this.form.submit()">
+                                        <option value="">Semua Penyalur</option>
+                                        @foreach($ibadahs as $ib)
+                                            <option value="{{ $ib->id }}" {{ request('filter_penyalur') == $ib->id ? 'selected' : '' }}>{{ Str::limit($ib->nama_tempat, 25) }}</option>
+                                        @endforeach
+                                    </select>
+                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                                        <svg class="h-4 w-4 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                                    </div>
+                                </div>
+                            </form>
+                            @endif
+                            <button type="button" onclick="opencetakModal()" class="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-xl font-medium shadow-lg shadow-blue-500/30 hover:-translate-y-0.5 transition-all flex items-center text-sm whitespace-nowrap">
+                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
+                                Cetak Kupon
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Edit Form Panel -->
+                    <div id="panel-edit" class="hidden bg-amber-50/80 dark:bg-amber-900/20 backdrop-blur-md border border-amber-200/50 dark:border-amber-700/50 rounded-3xl p-6 md:p-8 mb-8 shadow-lg transition-all duration-300">
+                        <div class="flex items-center mb-6 border-b border-amber-200/50 dark:border-amber-700/50 pb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white shadow-lg shadow-amber-500/30 mr-4 shrink-0">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2-2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                            </div>
+                            <h3 class="text-2xl font-bold font-outfit text-slate-900 dark:text-white tracking-tight">Edit Data Penerima Bantuan</h3>
+                        </div>
+                        <form action="{{ route('map.edit') }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 gap-5">
                             @csrf
-                            <strong>Edit Data Penerima Bantuan:</strong>
-                            <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center;">
-                                <input type="hidden" name="id" id="edit-id">
-                                <input type="hidden" name="type" id="edit-type" value="penerima">
-                                
-                                <input type="text" name="nama" id="edit-nama" placeholder="Nama KK" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;" required>
-                                <input type="text" name="nik_kepala_keluarga" id="edit-nik" placeholder="NIK" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;">
-                                <input type="text" name="nomor_kk" id="edit-kk" placeholder="No. KK" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;">
-                                <input type="number" name="jumlah_tanggungan" id="edit-tanggungan" placeholder="Jml Tanggungan" style="padding: 8px; width: 150px; border-radius: 4px; border: 1px solid #ccc; color: black;" min="0">
-                                
-                                <select name="id_tempat_ibadah" id="edit-ibadah" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;">
+                            <input type="hidden" name="id" id="edit-id">
+                            <input type="hidden" name="type" id="edit-type" value="penerima">
+                            
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama Kepala Keluarga</label>
+                                <input type="text" name="nama" id="edit-nama" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50" required>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">NIK</label>
+                                <input type="text" name="nik_kepala_keluarga" id="edit-nik" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nomor KK</label>
+                                <input type="text" name="nomor_kk" id="edit-kk" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Jumlah Tanggungan</label>
+                                <input type="number" name="jumlah_tanggungan" id="edit-tanggungan" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50" min="0">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Tempat Ibadah / Penyalur</label>
+                                <select name="id_tempat_ibadah" id="edit-ibadah" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50">
                                     <option value="">- Pilih Tempat Ibadah -</option>
                                     @foreach($ibadahs as $ib)
                                         <option value="{{ $ib->id }}">{{ $ib->nama_tempat }}</option>
                                     @endforeach
                                 </select>
-                                
-                                <input type="text" name="alamat" id="edit-alamat" placeholder="Alamat" style="padding: 8px; width: 250px; border-radius: 4px; border: 1px solid #ccc; color: black;" required>
-                                
-                                <label style="display:flex; align-items:center; gap:5px; color:#333; font-weight:bold; font-size:13px;">
-                                    Ganti Foto: <input type="file" name="foto_kondisi_rumah" id="edit-foto" accept="image/*" style="color: black; font-size:12px;">
-                                </label>
+                            </div>
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Alamat Lengkap</label>
+                                <input type="text" name="alamat" id="edit-alamat" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50" required>
+                            </div>
+                            
+                            <div class="col-span-1 md:col-span-2 mt-2">
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Foto Saat Ini (Centang untuk menghapus):</label>
+                                <div id="current-photos-container" class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm p-4 border border-slate-200/50 dark:border-slate-700/50 rounded-2xl flex gap-4 flex-wrap">
+                                    <!-- Foto existing dimuat lewat JS -->
+                                </div>
+                            </div>
 
-                                <button type="submit" style="padding: 8px 15px; background: #28a745; color: white; border: none; border-radius: 4px;">Simpan</button>
-                                <button type="button" onclick="closeEdit()" style="padding: 8px 15px; background: #6c757d; color: white; border: none; border-radius: 4px;">Batal</button>
+                            <div class="col-span-1 md:col-span-2">
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Upload Foto Baru (opsional)</label>
+                                <input type="file" name="foto[]" id="edit-foto" accept="image/*" multiple class="block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2.5 file:px-5 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-900/50 dark:file:text-indigo-300 transition-colors bg-white/50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-1">
+                            </div>
+
+                            <div class="col-span-1 md:col-span-2 flex justify-end space-x-4 mt-6 pt-4 border-t border-amber-200/50 dark:border-amber-700/50">
+                                <button type="button" onclick="closeEdit()" class="px-6 py-2.5 bg-white/80 dark:bg-slate-700/80 backdrop-blur-sm border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 rounded-full hover:bg-slate-50 dark:hover:bg-slate-600 font-medium transition-all shadow-sm">Batal</button>
+                                <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-white rounded-full font-medium shadow-lg shadow-amber-500/30 hover:-translate-y-0.5 transition-all">Simpan Perubahan</button>
                             </div>
                         </form>
                     </div>
 
-                    <table class="map-table">
-                        <thead>
-                            <tr>
-                                <th>ID</th>
-                                <th>Nama Kepala Keluarga</th>
-                                <th>NIK / KK</th>
-                                <th>Tanggungan</th>
-                                <th>Tempat Ibadah</th>
-                                <th>Alamat Detail</th>
-                                <th>Koordinat (Lat, Lng)</th>
-                                <th>Foto</th>
-                                <th>Aksi</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach($penerimas as $r)
-                                <tr>
-                                    <td>{{ $r->id }}</td>
-                                    <td>{{ $r->nama_kepala_keluarga }}</td>
-                                    <td>{{ $r->nik_kepala_keluarga ?? '-' }} / {{ $r->nomor_kk ?? '-' }}</td>
-                                    <td>{{ $r->jumlah_tanggungan ?? '0' }}</td>
-                                    <td>{{ $r->tempat_ibadah->nama_tempat ?? '-' }}</td>
-                                    <td>{{ $r->alamat }}</td>
-                                    <td>{{ $r->lat }}, {{ $r->lng }}</td>
-                                    <td>
-                                        @if($r->foto_kondisi_rumah)
-                                            <a href="{{ asset('storage/' . $r->foto_kondisi_rumah) }}" target="_blank" style="color: blue; text-decoration: underline;">Lihat Foto</a>
-                                        @else
-                                            -
-                                        @endif
-                                    </td>
-                                    <td>
-                                        <button class='btn-edit' onclick='openEdit({{ $r->id }}, "{{ addslashes($r->nama_kepala_keluarga) }}", "{{ addslashes($r->alamat) }}", "{{ addslashes($r->nik_kepala_keluarga) }}", "{{ addslashes($r->nomor_kk) }}", "{{ $r->jumlah_tanggungan }}", "{{ $r->id_tempat_ibadah }}")'>Edit</button>
-                                        <a href='{{ route("map.delete", ["type" => "penerima", "id" => $r->id]) }}' class='btn-delete' onclick='return confirm("Hapus data penerima ini?")'>Hapus</a>
-                                    </td>
-                                </tr>
-                            @endforeach
-                        </tbody>
-                    </table>
+                    <!-- Cards Grid -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        @forelse($penerimas as $index => $r)
+                            @php
+                                $logBulanIni = App\Models\LogDistribusi::where('id_penerima', $r->id)
+                                    ->whereMonth('tanggal_diterima', now()->month)
+                                    ->whereYear('tanggal_diterima', now()->year)
+                                    ->first();
+                                
+                                if ($logBulanIni) {
+                                    if ($logBulanIni->status == 'Menunggu') {
+                                        $status_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'>Menunggu Verifikasi</span>";
+                                    } else {
+                                        $status_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'>Selesai</span>";
+                                    }
+                                } else {
+                                    if ($r->tanggal_pencairan_terakhir && $r->tanggal_pencairan_terakhir->format('Y-m') === now()->format('Y-m')) {
+                                        $status_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'>Selesai</span>";
+                                    } else {
+                                        $status_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'>Belum Cair</span>";
+                                    }
+                                }
+
+                                $penyalur = $r->tempat_ibadah ? $r->tempat_ibadah->nama_tempat : '-';
+                                $jarak = $r->jarak_ke_penyalur !== null ? round($r->jarak_ke_penyalur) . " m" : "-";
+                                $tgl_format = $r->tanggal_pencairan_terakhir ? $r->tanggal_pencairan_terakhir->format('d M Y H:i') : "-";
+                                $dokumen_pdf = $r->dokumen_laporan ? "<a href='".asset('storage/uploads/'.$r->dokumen_laporan)."' target='_blank' class='text-indigo-600 dark:text-indigo-400 hover:underline inline-flex items-center'><svg class='w-4 h-4 mr-1' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'></path></svg>Lihat PDF</a>" : "-";
+                                $id_laporan = $r->id_laporan ?? '-';
+                                
+                                $foto_html = "-";
+                                if(!empty($r->foto)) {
+                                    $fotos = explode(',', $r->foto);
+                                    $links = [];
+                                    foreach($fotos as $idx => $f) {
+                                        $links[] = "<a href='".asset('storage/uploads/'.$f)."' target='_blank' class='text-indigo-600 dark:text-indigo-400 hover:underline'>Foto ".($idx+1)."</a>";
+                                    }
+                                    $foto_html = implode(' <span class="text-gray-300 dark:text-gray-600">|</span> ', $links);
+                                }
+
+                                $status_persetujuan_badge = "";
+                                if ($r->status_persetujuan === 'disetujui') {
+                                    $status_persetujuan_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'>Disetujui</span>";
+                                } elseif ($r->status_persetujuan === 'ditolak') {
+                                    $status_persetujuan_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'>Ditolak</span><div class='text-red-600 dark:text-red-400 text-xs mt-1 font-medium italic'>Alasan: " . ($r->alasan_penolakan ?? '-') . "</div>";
+                                } else {
+                                    $status_persetujuan_badge = "<span class='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'>Menunggu Persetujuan</span>";
+                                }
+                            @endphp
+
+                            <div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-md border border-slate-200/80 dark:border-slate-700/80 rounded-3xl shadow-lg shadow-slate-200/50 dark:shadow-slate-900/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col overflow-hidden group">
+                                <div class="bg-indigo-50/80 dark:bg-indigo-900/30 px-6 py-5 border-b border-indigo-100 dark:border-indigo-800/30 flex justify-between items-start gap-4 transition-colors">
+                                    <div class="flex-grow">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <span class="text-xs font-bold bg-indigo-100 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-300 py-1 px-2.5 rounded-lg">#{{ $index + 1 }}</span>
+                                            <h4 class="font-bold font-outfit text-slate-900 dark:text-white text-xl">{{ $r->nama_kepala_keluarga }}</h4>
+                                        </div>
+                                        <div class="text-sm text-slate-500 dark:text-slate-400 font-medium">NIK: <span class="text-slate-700 dark:text-slate-300">{{ $r->nik_kepala_keluarga }}</span> | KK: <span class="text-slate-700 dark:text-slate-300">{{ $r->nomor_kk }}</span></div>
+                                    </div>
+                                    <div class="flex flex-col items-end gap-2 shrink-0">
+                                        {!! str_replace(['rounded-full', 'px-2.5'], ['rounded-lg', 'px-3'], $status_persetujuan_badge) !!}
+                                        {!! str_replace(['rounded-full', 'px-2.5'], ['rounded-lg', 'px-3'], $status_badge) !!}
+                                    </div>
+                                </div>
+                                
+                                <div class="p-6 flex-grow text-sm space-y-4">
+                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
+                                        <div class="flex flex-col">
+                                            <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Tanggungan</span>
+                                            <span class="text-slate-900 dark:text-slate-200 font-semibold">{{ $r->jumlah_tanggungan }} Orang</span>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Penyalur Bantuan</span>
+                                            <span class="text-slate-900 dark:text-slate-200 font-semibold">{{ $penyalur }}</span>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Jarak (Estimasi)</span>
+                                            <span class="text-indigo-600 dark:text-indigo-400 font-bold">{{ $jarak }}</span>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Tgl Cair Terakhir</span>
+                                            <span class="text-emerald-600 dark:text-emerald-400 font-bold">{{ $tgl_format }}</span>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="border-t border-slate-100 dark:border-slate-700/50 pt-4">
+                                        <span class="text-slate-500 dark:text-slate-400 font-medium mb-1 block">Alamat</span>
+                                        <span class="text-slate-900 dark:text-slate-200 leading-relaxed block">{{ $r->alamat }}</span>
+                                        <span class="text-xs text-slate-400 dark:text-slate-500 mt-2 font-mono bg-slate-100 dark:bg-slate-900/50 py-1 px-2 rounded w-max inline-block border border-slate-200 dark:border-slate-800">Koordinat: {{ $r->lat }}, {{ $r->lng }}</span>
+                                    </div>
+
+                                    <div class="border-t border-slate-100 dark:border-slate-700/50 pt-4 grid grid-cols-2 gap-6">
+                                        <div class="flex flex-col">
+                                            <span class="text-slate-500 dark:text-slate-400 font-medium mb-1.5">Dokumen</span>
+                                            <span class="font-medium">{!! $dokumen_pdf !!}</span>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <span class="text-slate-500 dark:text-slate-400 font-medium mb-1.5">Foto Bukti</span>
+                                            <span class="font-medium">{!! $foto_html !!}</span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/30 border-t border-slate-200/50 dark:border-slate-700/50 flex justify-end gap-3 flex-wrap">
+                                    @if (Auth::user()->role === 'admin' && $r->status_persetujuan !== 'disetujui' && $r->status_persetujuan !== 'ditolak')
+                                        <form action="{{ route('persetujuan.update', $r->id) }}" method="POST" class="inline">
+                                            @csrf
+                                            <input type="hidden" name="status_persetujuan" value="disetujui">
+                                            <button type="submit" class="inline-flex items-center px-4 py-2 border border-emerald-200 dark:border-emerald-800/50 text-sm font-semibold rounded-xl text-emerald-800 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/30 hover:bg-emerald-100 dark:hover:bg-emerald-900/50 focus:outline-none transition-all shadow-sm hover:-translate-y-0.5" title="Setujui">
+                                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                                Setujui
+                                            </button>
+                                        </form>
+                                        <button type="button" class="inline-flex items-center px-4 py-2 border border-rose-200 dark:border-rose-800/50 text-sm font-semibold rounded-xl text-rose-800 dark:text-rose-300 bg-rose-50 dark:bg-rose-900/30 hover:bg-rose-100 dark:hover:bg-rose-900/50 focus:outline-none transition-all shadow-sm hover:-translate-y-0.5" title="Tolak" onclick="openTolakModal({{ $r->id }})">
+                                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                            Tolak
+                                        </button>
+                                    @endif
+
+                                    <button class='inline-flex items-center px-4 py-2 border border-amber-200 dark:border-amber-700/50 text-sm font-semibold rounded-xl text-amber-800 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 hover:bg-amber-100 dark:hover:bg-amber-900/50 focus:outline-none transition-all shadow-sm hover:-translate-y-0.5' title='Edit' onclick='openEdit({{ $r->id }}, "{{ addslashes($r->nama_kepala_keluarga) }}", "{{ addslashes($r->alamat) }}", "{{ addslashes($r->nik_kepala_keluarga) }}", "{{ addslashes($r->nomor_kk) }}", "{{ $r->jumlah_tanggungan }}", "{{ $r->id_tempat_ibadah }}", `{{ $r->foto }}`)'>
+                                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                                        Edit
+                                    </button>
+                                    
+                                    <a href='{{ route("map.delete", ["type" => "penerima", "id" => $r->id]) }}' class='inline-flex items-center px-4 py-2 border border-rose-200 dark:border-rose-700/50 text-sm font-semibold rounded-xl text-rose-700 dark:text-rose-300 bg-rose-50 dark:bg-rose-900/30 hover:bg-rose-100 dark:hover:bg-rose-900/50 focus:outline-none transition-all shadow-sm hover:-translate-y-0.5' title='Hapus' onclick='return confirm("Hapus data penerima ini?")'>
+                                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                                        Hapus
+                                    </a>
+                                </div>
+                            </div>
+                        @empty
+                            <div class="col-span-1 lg:col-span-2 py-16 text-center bg-white/40 dark:bg-slate-800/40 backdrop-blur-sm rounded-3xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+                                <div class="w-20 h-20 mx-auto bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4 shadow-inner">
+                                    <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+                                </div>
+                                <p class="text-slate-600 dark:text-slate-400 font-bold text-lg">Data penerima bantuan tidak ditemukan.</p>
+                            </div>
+                        @endforelse
+                    </div>
 
                     <script>
-                        function openEdit(id, nama, alamat, nik, kk, tanggungan, ibadah_id) {
-                            document.getElementById('panel-edit').style.display = 'block';
+                        function openEdit(id, nama, alamat, nik, kk, tanggungan, ibadah_id, fotoStr) {
+                            var panel = document.getElementById('panel-edit');
+                            panel.classList.remove('hidden');
+                            
                             document.getElementById('edit-id').value = id;
                             document.getElementById('edit-nama').value = nama;
                             document.getElementById('edit-alamat').value = alamat;
@@ -102,13 +261,146 @@
                             document.getElementById('edit-kk').value = kk || '';
                             document.getElementById('edit-tanggungan').value = tanggungan || '';
                             document.getElementById('edit-ibadah').value = ibadah_id || '';
-                            window.scrollTo(0,0);
+                            
+                            // Render current photos with delete checkbox
+                            const container = document.getElementById('current-photos-container');
+                            
+                            if(fotoStr && fotoStr.trim() !== '') {
+                                const fotos = fotoStr.split(',');
+                                let htmlStr = '';
+                                fotos.forEach(f => {
+                                    const url = '{{ asset("storage/uploads/") }}/' + f;
+                                    htmlStr += `
+                                        <div class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden w-24 flex flex-col shadow-sm">
+                                            <img src="${url}" class="w-24 h-24 object-cover bg-slate-100 dark:bg-slate-900">
+                                            <label class="text-xs font-semibold text-center py-2 bg-slate-50 dark:bg-slate-800 cursor-pointer hover:bg-rose-50 dark:hover:bg-rose-900/20 hover:text-rose-600 transition-colors border-t border-slate-200 dark:border-slate-700 block">
+                                                <input type="checkbox" name="hapus_foto[]" value="${f}" class="mr-1 rounded border-slate-300 text-rose-600 focus:ring-rose-500"> Hapus
+                                            </label>
+                                        </div>
+                                    `;
+                                });
+                                container.innerHTML = htmlStr;
+                            } else {
+                                container.innerHTML = '<span class="text-sm text-slate-400 dark:text-slate-500 italic font-medium">Belum ada foto yang diunggah.</span>';
+                            }
+
+                            panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        }
+                        
+                        function closeEdit() { 
+                            document.getElementById('panel-edit').classList.add('hidden'); 
                         }
-                        function closeEdit() { document.getElementById('panel-edit').style.display = 'none'; }
                     </script>
 
                 </div>
             </div>
         </div>
     </div>
+
+    <!-- Modal Penolakan -->
+    <div id="tolakModal" class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-md z-50 justify-center items-center p-4">
+        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all border border-slate-200 dark:border-slate-700">
+            <div class="px-6 py-4 border-b border-slate-100 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-800/50">
+                <h3 class="text-lg font-bold font-outfit text-slate-900 dark:text-white">Alasan Penolakan</h3>
+                <button onclick="closeTolakModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 bg-white dark:bg-slate-700 p-1 rounded-full shadow-sm">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                </button>
+            </div>
+            <form id="formTolak" method="POST" class="p-6">
+                @csrf
+                <input type="hidden" name="status_persetujuan" value="ditolak">
+                
+                <div class="mb-5">
+                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Pilih alasan penolakan berkas pengajuan ini:</label>
+                    <select name="alasan_penolakan" required class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50 w-full">
+                        <option value="">-- Pilih Alasan --</option>
+                        <option value="Data tidak valid / fiktif">Data tidak valid / fiktif</option>
+                        <option value="Sudah terdaftar sebelumnya">Sudah terdaftar sebelumnya</option>
+                        <option value="Dokumen investigasi tidak lengkap atau salah">Dokumen investigasi tidak lengkap atau salah</option>
+                        <option value="Kondisi ekonomi dianggap masih mampu">Kondisi ekonomi dianggap masih mampu</option>
+                        <option value="Lainnya">Lainnya</option>
+                    </select>
+                </div>
+                
+                <div class="flex justify-end gap-3 mt-8">
+                    <button type="button" onclick="closeTolakModal()" class="px-5 py-2.5 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 rounded-full hover:bg-slate-50 dark:hover:bg-slate-600 font-medium transition-colors shadow-sm">Batal</button>
+                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-rose-500 to-red-600 hover:from-rose-600 hover:to-red-700 text-white rounded-full font-medium shadow-lg shadow-rose-500/30 transition-all">Tolak Pengajuan</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <script>
+        function openTolakModal(id) {
+            document.getElementById('formTolak').action = "/persetujuan/" + id;
+            document.getElementById('tolakModal').classList.remove('hidden');
+            document.getElementById('tolakModal').classList.add('flex');
+        }
+        function closeTolakModal() {
+            document.getElementById('tolakModal').classList.remove('flex');
+            document.getElementById('tolakModal').classList.add('hidden');
+        }
+    </script>
+    <!-- Modal Cetak Kupon Massal -->
+    <div id="cetakModal" class="hidden fixed inset-0 bg-slate-900/50 backdrop-blur-md z-50 justify-center items-center p-4">
+        <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl w-full max-w-2xl overflow-hidden transform transition-all flex flex-col max-h-[90vh] border border-slate-200 dark:border-slate-700">
+            <div class="px-6 py-5 border-b border-slate-100 dark:border-slate-700 flex justify-between items-center bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm">
+                <h3 class="text-xl font-bold font-outfit text-slate-900 dark:text-white flex items-center tracking-tight">
+                    <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mr-3">
+                        <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
+                    </div>
+                    Pilih Kupon untuk Dicetak
+                </h3>
+                <button onclick="closecetakModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 bg-white dark:bg-slate-700 p-1.5 rounded-full shadow-sm transition-colors">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                </button>
+            </div>
+            
+            <form id="formcetak" action="{{ route('kupon.cetak') }}" method="POST" target="_blank" class="flex flex-col flex-grow overflow-hidden">
+                @csrf
+                <div class="p-6 bg-white dark:bg-slate-800 overflow-y-auto flex-grow">
+                    <div class="mb-5 flex flex-col sm:flex-row justify-between sm:items-center gap-3">
+                        <span class="text-sm text-slate-600 dark:text-slate-400 font-medium">Pilih penerima bantuan (yang sudah disetujui) yang kuponnya ingin dicetak.</span>
+                        <button type="button" onclick="selectAllKupon()" class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 font-semibold bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:hover:bg-indigo-900/50 px-4 py-2 rounded-xl transition-colors shadow-sm whitespace-nowrap">Pilih Semua</button>
+                    </div>
+                    
+                    <div class="space-y-3">
+                        @foreach($penerimas->where('status_persetujuan', 'disetujui') as $p)
+                            <label class="flex items-center p-4 border border-slate-200 dark:border-slate-700 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-700/50 cursor-pointer transition-all shadow-sm">
+                                <input type="checkbox" name="penerima_ids[]" value="{{ $p->id }}" class="kupon-checkbox w-5 h-5 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 dark:bg-slate-800 dark:border-slate-600 dark:checked:bg-indigo-500">
+                                <div class="ml-4 flex-grow">
+                                    <span class="block text-sm font-bold text-slate-900 dark:text-white">{{ $p->nama_kepala_keluarga }}</span>
+                                    <span class="block text-xs font-medium text-slate-500 dark:text-slate-400 mt-0.5">NIK: {{ substr($p->nik_kepala_keluarga ?? '', 0, 6) }}********** <span class="mx-1 text-slate-300 dark:text-slate-600">|</span> Penyalur: <span class="text-slate-700 dark:text-slate-300">{{ $p->tempat_ibadah ? $p->tempat_ibadah->nama_tempat : '-' }}</span></span>
+                                </div>
+                            </label>
+                        @endforeach
+                    </div>
+                </div>
+                
+                <div class="px-6 py-4 border-t border-slate-100 dark:border-slate-700 flex justify-end gap-3 bg-slate-50/80 dark:bg-slate-800/50 backdrop-blur-sm">
+                    <button type="button" onclick="closecetakModal()" class="px-5 py-2.5 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 rounded-full hover:bg-slate-50 dark:hover:bg-slate-600 font-medium transition-all shadow-sm">Batal</button>
+                    <button type="submit" onclick="closecetakModal()" class="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-full font-medium shadow-lg shadow-blue-500/30 hover:-translate-y-0.5 transition-all flex items-center">
+                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
+                        Cetak Terpilih
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <script>
+        function opencetakModal() {
+            document.getElementById('cetakModal').classList.remove('hidden');
+            document.getElementById('cetakModal').classList.add('flex');
+        }
+        function closecetakModal() {
+            document.getElementById('cetakModal').classList.remove('flex');
+            document.getElementById('cetakModal').classList.add('hidden');
+        }
+        function selectAllKupon() {
+            const checkboxes = document.querySelectorAll('.kupon-checkbox');
+            const allChecked = Array.from(checkboxes).every(c => c.checked);
+            checkboxes.forEach(c => c.checked = !allChecked);
+        }
+    </script>
 </x-app-layout>
diff --git a/resources/views/daftar-tempat-ibadah.blade.php b/resources/views/daftar-tempat-ibadah.blade.php
index a038fcd..b220db1 100644
--- a/resources/views/daftar-tempat-ibadah.blade.php
+++ b/resources/views/daftar-tempat-ibadah.blade.php
@@ -5,97 +5,187 @@
         </h2>
     </x-slot>
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    
-                    <style>
-                        .map-table { width: 100%; border-collapse: collapse; background: white; color: black; margin-top: 20px;}
-                        .map-table th, .map-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
-                        .map-table th { background: #007bff; color: white; }
-                        
-                        .btn-edit { background: #ffc107; color: #000; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
-                        .btn-delete { background: #dc3545; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
-                        .edit-form { background: #fff3cd; padding: 15px; border-radius: 12px; display: none; margin-bottom: 15px; border: 1px solid #ffeeba; color: black; }
-                    </style>
-
-                    <div id="panel-edit" class="edit-form">
-                        <form action="{{ route('map.edit') }}" method="POST">
-                            @csrf
-                            <strong>Edit Data Tempat Ibadah:</strong>
-                            <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; align-items: center;">
-                                <input type="hidden" name="id" id="edit-id">
-                                <input type="hidden" name="type" id="edit-type" value="ibadah">
-                                <input type="text" name="nama" id="edit-nama" placeholder="Nama Tempat" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;" required>
-                                
-                                <select name="jenis_tempat_ibadah" id="edit-jenis" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;">
-                                    <option value="">- Pilih Jenis -</option>
-                                    <option value="Masjid">Masjid</option>
-                                    <option value="Gereja Katolik">Gereja Katolik</option>
-                                    <option value="Gereja Protestan">Gereja Protestan</option>
-                                    <option value="Vihara">Vihara</option>
-                                    <option value="Pura">Pura</option>
-                                    <option value="Klenteng">Klenteng</option>
-                                </select>
-                                
-                                <input type="text" name="kontak_person" id="edit-kontak" placeholder="Kontak Person" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;">
-                                <input type="text" name="alamat" id="edit-alamat" placeholder="Alamat" style="padding: 8px; width: 350px; border-radius: 4px; border: 1px solid #ccc; color: black;" required>
-                                <input type="number" name="radius_meter" id="edit-radius" placeholder="Radius (Meter)" style="padding: 8px; width: 130px; border-radius: 4px; border: 1px solid #ccc; color: black;" min="0" required>
-                                <button type="submit" style="padding: 8px 15px; background: #28a745; color: white; border: none; border-radius: 4px;">Simpan</button>
-                                <button type="button" onclick="closeEdit()" style="padding: 8px 15px; background: #6c757d; color: white; border: none; border-radius: 4px;">Batal</button>
-                            </div>
-                        </form>
+    <div class="py-8">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
+            
+            <!-- Description Card -->
+            <div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl overflow-hidden shadow-xl sm:rounded-3xl p-6 md:p-8 border border-slate-200/50 dark:border-slate-800/50">
+                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div>
+                        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Data Tempat Ibadah & Penyalur</h3>
+                        <p class="text-gray-500 dark:text-gray-400 text-sm">
+                            Kelola data tempat ibadah yang menjadi mitra penyalur bantuan.
+                        </p>
                     </div>
-
-                    <table class="map-table">
-                        <thead>
-                            <tr>
-                                <th>ID</th>
-                                <th>Nama Tempat Ibadah</th>
-                                <th>Jenis</th>
-                                <th>Kontak Person</th>
-                                <th>Alamat Detail</th>
-                                <th>Radius Layan (Meter)</th>
-                                <th>Koordinat (Lat, Lng)</th>
-                                <th>Aksi</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @foreach($ibadahs as $ib)
-                                <tr>
-                                    <td>{{ $ib->id }}</td>
-                                    <td>{{ $ib->nama_tempat }}</td>
-                                    <td>{{ $ib->jenis_tempat_ibadah ?? '-' }}</td>
-                                    <td>{{ $ib->kontak_person ?? '-' }}</td>
-                                    <td>{{ $ib->alamat }}</td>
-                                    <td>{{ $ib->radius_meter }}</td>
-                                    <td>{{ $ib->lat }}, {{ $ib->lng }}</td>
-                                    <td>
-                                        <button class='btn-edit' onclick='openEdit({{ $ib->id }}, "{{ addslashes($ib->nama_tempat) }}", "{{ addslashes($ib->alamat) }}", {{ $ib->radius_meter }}, "{{ addslashes($ib->jenis_tempat_ibadah) }}", "{{ addslashes($ib->kontak_person) }}")'>Edit</button>
-                                        <a href='{{ route("map.delete", ["type" => "ibadah", "id" => $ib->id]) }}' class='btn-delete' onclick='return confirm("Hapus data tempat ibadah ini?")'>Hapus</a>
-                                    </td>
-                                </tr>
-                            @endforeach
-                        </tbody>
-                    </table>
-
-                    <script>
-                        function openEdit(id, nama, alamat, radius, jenis, kontak) {
-                            document.getElementById('panel-edit').style.display = 'block';
-                            document.getElementById('edit-id').value = id;
-                            document.getElementById('edit-nama').value = nama;
-                            document.getElementById('edit-alamat').value = alamat;
-                            document.getElementById('edit-radius').value = radius;
-                            document.getElementById('edit-jenis').value = jenis;
-                            document.getElementById('edit-kontak').value = kontak;
-                            window.scrollTo(0,0);
-                        }
-                        function closeEdit() { document.getElementById('panel-edit').style.display = 'none'; }
-                    </script>
-
                 </div>
             </div>
+
+            <!-- Edit Form Panel -->
+            <div id="panel-edit" class="hidden bg-amber-50/80 dark:bg-amber-900/20 backdrop-blur-md border border-amber-200/50 dark:border-amber-700/50 rounded-3xl p-6 md:p-8 shadow-lg transition-all duration-300">
+                <div class="flex items-center mb-6 border-b border-amber-200/50 dark:border-amber-700/50 pb-4">
+                    <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white shadow-lg shadow-amber-500/30 mr-4 shrink-0">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2-2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                    </div>
+                    <h3 class="text-2xl font-bold font-outfit text-slate-900 dark:text-white tracking-tight">Edit Data Tempat Ibadah</h3>
+                </div>
+                <form action="{{ route('map.edit') }}" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    @csrf
+                    <input type="hidden" name="id" id="edit-id">
+                    <input type="hidden" name="type" id="edit-type" value="ibadah">
+                    
+                    <div>
+                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama Tempat</label>
+                        <input type="text" name="nama" id="edit-nama" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Jenis</label>
+                        <select name="jenis_tempat_ibadah" id="edit-jenis" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50">
+                            <option value="">- Pilih Jenis -</option>
+                            <option value="Masjid">Masjid</option>
+                            <option value="Gereja Katolik">Gereja Katolik</option>
+                            <option value="Gereja Protestan">Gereja Protestan</option>
+                            <option value="Vihara">Vihara</option>
+                            <option value="Pura">Pura</option>
+                            <option value="Klenteng">Klenteng</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama Pengurus</label>
+                        <input type="text" name="nama_pengurus" id="edit-nama-pengurus" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Kontak Pengurus</label>
+                        <input type="text" name="kontak_pengurus" id="edit-kontak-pengurus" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Radius (Meter)</label>
+                        <input type="number" name="radius_meter" id="edit-radius" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50" min="0" required>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Alamat</label>
+                        <input type="text" name="alamat" id="edit-alamat" class="form-input rounded-xl border-slate-300 dark:border-slate-600 dark:bg-slate-800/50" required>
+                    </div>
+                    
+                    <div class="col-span-1 md:col-span-2 flex justify-end space-x-4 mt-6 pt-4 border-t border-amber-200/50 dark:border-amber-700/50">
+                        <button type="button" onclick="closeEdit()" class="px-6 py-2.5 bg-white/80 dark:bg-slate-700/80 backdrop-blur-sm border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 rounded-full hover:bg-slate-50 dark:hover:bg-slate-600 font-medium transition-all shadow-sm">Batal</button>
+                        <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-white rounded-full font-medium shadow-lg shadow-amber-500/30 hover:-translate-y-0.5 transition-all">Simpan Perubahan</button>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Cards Grid -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                @forelse($ibadahs as $index => $ib)
+                    <div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-md border border-slate-200/80 dark:border-slate-700/80 rounded-3xl shadow-lg shadow-slate-200/50 dark:shadow-slate-900/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col overflow-hidden group">
+                        <div class="bg-indigo-50/80 dark:bg-indigo-900/30 px-6 py-5 border-b border-indigo-100 dark:border-indigo-800/30 flex justify-between items-start gap-4 transition-colors">
+                            <div class="flex-grow">
+                                <div class="flex items-center gap-3 mb-2">
+                                    <span class="text-xs font-bold bg-indigo-100 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-300 py-1 px-2.5 rounded-lg">#{{ $index + 1 }}</span>
+                                    <h4 class="font-bold font-outfit text-slate-900 dark:text-white text-xl">{{ $ib->nama_tempat }}</h4>
+                                </div>
+                                <div class="text-sm font-medium"><span class="inline-block px-3 py-1 bg-white/60 dark:bg-slate-800/60 text-slate-700 dark:text-slate-300 rounded-full border border-slate-200 dark:border-slate-700 shadow-sm">{{ $ib->jenis_tempat_ibadah ?? 'Lainnya' }}</span></div>
+                            </div>
+                        </div>
+                        
+                        <div class="p-6 flex-grow text-sm space-y-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
+                                <div class="flex flex-col">
+                                    <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Nama Pengurus</span>
+                                    <span class="text-slate-900 dark:text-slate-200 font-semibold">{{ $ib->nama_pengurus ?? '-' }}</span>
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Kontak Pengurus</span>
+                                    <span class="text-slate-900 dark:text-slate-200 font-semibold">{{ $ib->kontak_pengurus ?? '-' }}</span>
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Radius Pelayanan</span>
+                                    <span class="text-indigo-600 dark:text-indigo-400 font-bold">{{ $ib->radius_meter }} m</span>
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Koordinat</span>
+                                    <span class="text-slate-900 dark:text-slate-200 font-medium">{{ $ib->lat }}, {{ $ib->lng }}</span>
+                                </div>
+                            </div>
+                            
+                            <div class="border-t border-slate-100 dark:border-slate-700/50 pt-4">
+                                <span class="text-slate-500 dark:text-slate-400 font-medium mb-1 block">Alamat</span>
+                                <span class="text-slate-900 dark:text-slate-200 leading-relaxed block">{{ $ib->alamat }}</span>
+                            </div>
+
+                            @if(Auth::user()->role !== 'user')
+                            <div class="border-t border-slate-100 dark:border-slate-700/50 pt-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
+                                <div class="flex flex-col">
+                                    <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Email (Akun Penyalur)</span>
+                                    <span class="text-slate-900 dark:text-slate-200 font-mono text-xs bg-slate-100 dark:bg-slate-900/50 py-1.5 px-3 rounded-lg w-max border border-slate-200 dark:border-slate-800">
+                                        @if(isset($adminUsers[$ib->id]))
+                                            {{ $adminUsers[$ib->id]->email }}
+                                        @else
+                                            -
+                                        @endif
+                                    </span>
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-slate-500 dark:text-slate-400 font-medium mb-1">Password</span>
+                                    @if(isset($adminUsers[$ib->id]))
+                                        @if(\Illuminate\Support\Facades\Hash::check('password123', $adminUsers[$ib->id]->password))
+                                            <span class="text-slate-900 dark:text-slate-200 font-mono text-xs bg-slate-100 dark:bg-slate-900/50 py-1.5 px-3 rounded-lg w-max border border-slate-200 dark:border-slate-800">password123</span>
+                                        @else
+                                            <span class="text-emerald-700 dark:text-emerald-400 text-xs bg-emerald-50 dark:bg-emerald-900/30 py-1.5 px-3 rounded-lg w-max flex items-center gap-1.5 font-bold border border-emerald-200 dark:border-emerald-800">
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
+                                                Telah Diubah (Rahasia)
+                                            </span>
+                                        @endif
+                                    @else
+                                        <span class="text-slate-900 dark:text-slate-200 font-mono text-xs bg-slate-100 dark:bg-slate-900/50 py-1.5 px-3 rounded-lg w-max border border-slate-200 dark:border-slate-800">-</span>
+                                    @endif
+                                </div>
+                            </div>
+                            @endif
+                        </div>
+
+                        <div class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/30 border-t border-slate-200/50 dark:border-slate-700/50 flex justify-end gap-3 flex-wrap">
+                            <button class='inline-flex items-center px-4 py-2 border border-amber-200 dark:border-amber-700 text-sm font-semibold rounded-xl text-amber-800 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 hover:bg-amber-100 dark:hover:bg-amber-900/50 focus:outline-none transition-all shadow-sm hover:-translate-y-0.5' title='Edit' onclick='openEdit({{ $ib->id }}, "{{ addslashes($ib->nama_tempat) }}", "{{ addslashes($ib->alamat) }}", {{ $ib->radius_meter }}, "{{ addslashes($ib->jenis_tempat_ibadah) }}", "{{ addslashes($ib->nama_pengurus) }}", "{{ addslashes($ib->kontak_pengurus) }}")'>
+                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                                Edit
+                            </button>
+                            
+                            @if(Auth::user()->role !== 'user')
+                            <a href='{{ route("map.delete", ["type" => "ibadah", "id" => $ib->id]) }}' class='inline-flex items-center px-4 py-2 border border-rose-200 dark:border-rose-700 text-sm font-semibold rounded-xl text-rose-700 dark:text-rose-300 bg-rose-50 dark:bg-rose-900/30 hover:bg-rose-100 dark:hover:bg-rose-900/50 focus:outline-none transition-all shadow-sm hover:-translate-y-0.5' title='Hapus' onclick='return confirm("Hapus data ini?")'>
+                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                                Hapus
+                            </a>
+                            @endif
+                        </div>
+                    </div>
+                @empty
+                    <div class="col-span-1 lg:col-span-2 py-16 text-center bg-white/40 dark:bg-slate-800/40 backdrop-blur-sm rounded-3xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm">
+                        <div class="w-20 h-20 mx-auto bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4 shadow-inner">
+                            <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
+                        </div>
+                        <p class="text-slate-600 dark:text-slate-400 font-bold text-lg">Data tempat ibadah tidak ditemukan.</p>
+                    </div>
+                @endforelse
+            </div>
+
+            <script>
+                function openEdit(id, nama, alamat, radius, jenis, nama_pengurus, kontak_pengurus) {
+                    var panel = document.getElementById('panel-edit');
+                    panel.classList.remove('hidden');
+                    
+                    document.getElementById('edit-id').value = id;
+                    document.getElementById('edit-nama').value = nama;
+                    document.getElementById('edit-alamat').value = alamat;
+                    document.getElementById('edit-radius').value = radius;
+                    document.getElementById('edit-jenis').value = jenis;
+                    document.getElementById('edit-nama-pengurus').value = nama_pengurus || '';
+                    document.getElementById('edit-kontak-pengurus').value = kontak_pengurus || '';
+                    
+                    panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                function closeEdit() { 
+                    document.getElementById('panel-edit').classList.add('hidden'); 
+                }
+            </script>
         </div>
     </div>
 </x-app-layout>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 55a43a4..3f5ca79 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -5,196 +5,408 @@
         </h2>
     </x-slot>
 
-    <div class="py-12">
+    <div class="py-8">
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
+            <div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl overflow-hidden shadow-2xl sm:rounded-3xl border border-slate-200/50 dark:border-slate-800/50">
+                <div class="p-6 sm:p-10 text-slate-900 dark:text-slate-100">
                     
                     <!-- Map Interface Start -->
                     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
                     <style>
-                        #map { height: 450px; border-radius: 12px; margin-bottom: 20px; border: 2px solid #333; z-index: 1; }
-                        .panel { background: #f4f7f6; padding: 20px; border-radius: 12px; margin-bottom: 15px; color: black;}
-                        .edit-form { background: #fff3cd; padding: 15px; border-radius: 12px; display: none; margin-bottom: 15px; border: 1px solid #ffeeba; color: black; }
+                        #map { z-index: 1; }
+                        .leaflet-popup-content-wrapper { border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); }
+                        .leaflet-popup-content { text-align: center; color: #0f172a; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 500;}
+                        .popup-slider { width: 100%; margin-top: 10px; accent-color: #6366f1; }
                         
-                        .map-table { width: 100%; border-collapse: collapse; background: white; color: black; }
-                        .map-table th, .map-table td { padding: 12px; border: 1px solid #ddd; text-align: left; }
-                        .map-table th { background: #007bff; color: white; }
-                        
-                        .btn-edit { background: #ffc107; color: #000; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
-                        .btn-delete { background: #dc3545; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 13px; }
-                        .leaflet-popup-content { text-align: center; color: black; }
-                        .popup-slider { width: 100%; }
-                        
-                        /* Ubah kursor peta menjadi crosshair untuk menandakan mode tambah titik */
+                        /* Crosshair when adding point */
                         .mode-tambah .leaflet-container { cursor: crosshair !important; }
+                        
+                        /* Custom form inputs to match Tailwind forms plugin if not installed */
+                        .form-input { display: block; width: 100%; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem; transition: all 0.2s ease-in-out; background-color: rgba(255, 255, 255, 0.5); color: #0f172a; backdrop-filter: blur(8px); }
+                        .form-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); background-color: #fff; }
+                        .dark .form-input { background-color: rgba(30, 41, 59, 0.5); border-color: #334155; color: #f8fafc; }
+                        .dark .form-input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15); background-color: #1e293b; }
                     </style>
 
-                    <div class="panel">
-                        <strong style="display: block; margin-bottom: 10px;">Tambah Titik Baru:</strong>
-                        <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
-                            <input type="text" id="nama" placeholder="Masukkan Nama..." style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black; flex-grow: 1; max-width: 300px;">
-                            <input type="hidden" id="mode" value="">
-                            
-                            <button type="button" id="btn-mode-ibadah" onclick="setMode('ibadah')" style="padding: 10px 15px; background: #e2e8f0; color: #333; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.3s;">
-                                🏛️ Tempat Ibadah
-                            </button>
-                            <button type="button" id="btn-mode-penerima" onclick="setMode('penerima')" style="padding: 10px 15px; background: #e2e8f0; color: #333; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.3s;">
-                                🏠 Penerima Bantuan
-                            </button>
+                    @php
+                        $total_penerima = $penerimas->count();
+                        $sudah_cair = 0;
+                        $belum_cair = 0;
+                        $current_month = now()->format('Y-m');
+
+                        foreach($penerimas as $p) {
+                            if ($p->tanggal_pencairan_terakhir && $p->tanggal_pencairan_terakhir->format('Y-m') === $current_month) {
+                                $sudah_cair++;
+                            } else {
+                                $belum_cair++;
+                            }
+                        }
+                    @endphp
+
+                    <!-- Top Action Bar -->
+                    <div class="flex flex-col lg:flex-row lg:items-stretch gap-6 mb-8">
+                        <!-- Add Button -->
+                        <button id="btn-toggle-form" class="w-full lg:w-1/4 flex-shrink-0 flex items-center justify-center px-6 py-4 border border-transparent text-base font-semibold rounded-2xl shadow-lg shadow-indigo-500/30 text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 hover:-translate-y-1 transition-all duration-300">
+                            <svg id="btn-icon-plus" class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+                            <svg id="btn-icon-minus" class="w-6 h-6 mr-2 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
+                            <span id="btn-text">Tambah Data Baru</span>
+                        </button>
+                        
+                        <!-- Stats Panel -->
+                        <div class="flex-grow flex bg-white/50 dark:bg-slate-800/50 backdrop-blur-md rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden divide-x divide-slate-200/50 dark:divide-slate-700/50">
+                            <div class="flex-1 p-4 flex flex-col justify-center items-center hover:bg-slate-50/50 dark:hover:bg-slate-800/80 transition-colors">
+                                <span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-1 text-center">Total Penerima</span>
+                                <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">{{ $total_penerima }}</span>
+                            </div>
+                            <div class="flex-1 p-4 flex flex-col justify-center items-center bg-gradient-to-b from-emerald-50/50 to-emerald-100/50 dark:from-emerald-900/10 dark:to-emerald-800/10 hover:from-emerald-100/50 hover:to-emerald-200/50 transition-colors">
+                                <span class="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-widest mb-1 text-center">Sudah Cair</span>
+                                <span class="text-3xl font-extrabold text-emerald-600 dark:text-emerald-400">{{ $sudah_cair }}</span>
+                            </div>
+                            <div class="flex-1 p-4 flex flex-col justify-center items-center bg-gradient-to-b from-rose-50/50 to-rose-100/50 dark:from-rose-900/10 dark:to-rose-800/10 hover:from-rose-100/50 hover:to-rose-200/50 transition-colors">
+                                <span class="text-xs font-semibold text-rose-600 dark:text-rose-400 uppercase tracking-widest mb-1 text-center">Belum Cair</span>
+                                <span class="text-3xl font-extrabold text-rose-600 dark:text-rose-400">{{ $belum_cair }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Add Form Container -->
+                    <div id="form-container" class="hidden bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-3xl border border-slate-200 dark:border-slate-700 p-6 md:p-8 mb-8 shadow-xl transition-all duration-500 transform origin-top">
+                        <div class="flex items-center mb-6 border-b border-slate-200 dark:border-slate-700 pb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30 mr-4 shrink-0">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                            </div>
+                            <h3 class="text-2xl font-bold font-outfit text-slate-900 dark:text-white tracking-tight">Lengkapi Data Lokasi</h3>
                         </div>
                         
-                        <!-- Extra Fields for Ibadah -->
-                        <div id="fields-ibadah" style="display:none; margin-top:10px; gap: 10px; flex-wrap: wrap;">
-                            <select id="jenis_tempat_ibadah" style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black;">
-                                <option value="">- Pilih Jenis Tempat Ibadah -</option>
-                                <option value="Masjid">Masjid</option>
-                                <option value="Gereja Katolik">Gereja Katolik</option>
-                                <option value="Gereja Protestan">Gereja Protestan</option>
-                                <option value="Vihara">Vihara</option>
-                                <option value="Pura">Pura</option>
-                                <option value="Klenteng">Klenteng</option>
-                            </select>
-                            <input type="text" id="kontak_person" placeholder="Kontak Person..." style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black;">
+                        <input type="hidden" id="mode" value="{{ Auth::user()->role === 'admin' ? 'ibadah' : 'penerima' }}">
+                        <input type="hidden" id="id_laporan_warga" value="{{ $laporan_fill ? $laporan_fill->id : '' }}">
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <!-- Extra Fields for Ibadah -->
+                            <div id="fields-ibadah" class="col-span-1 md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6" style="display:none;">
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama Tempat Ibadah <span class="text-rose-500">*</span></label>
+                                    <input type="text" id="nama_ibadah" class="form-input" placeholder="Contoh: Masjid Al-Ikhlas">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Jenis Tempat Ibadah <span class="text-rose-500">*</span></label>
+                                    <select id="jenis_tempat_ibadah" class="form-input">
+                                        <option value="">- Pilih Jenis Tempat Ibadah -</option>
+                                        <option value="Masjid">Masjid</option>
+                                        <option value="Gereja Katolik">Gereja Katolik</option>
+                                        <option value="Gereja Protestan">Gereja Protestan</option>
+                                        <option value="Vihara">Vihara</option>
+                                        <option value="Pura">Pura</option>
+                                        <option value="Klenteng">Klenteng</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama Pengurus</label>
+                                    <input type="text" id="nama_pengurus" class="form-input" placeholder="Masukkan nama pengurus">
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Kontak Pengurus</label>
+                                    <input type="text" id="kontak_pengurus" class="form-input" placeholder="Nomor telepon/HP">
+                                </div>
+                            </div>
+
+                            <!-- Extra Fields for Penerima -->
+                            <div id="fields-penerima" class="col-span-1 md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6" style="display:none;">
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama Kepala Keluarga <span class="text-rose-500">*</span></label>
+                                    <input type="text" id="nama_kepala_keluarga" class="form-input" placeholder="Masukkan nama kepala keluarga" value="{{ $laporan_fill ? $laporan_fill->nama_calon : '' }}" required>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">NIK Kepala Keluarga <span class="text-rose-500">*</span></label>
+                                    <input type="text" id="nik_kepala_keluarga" class="form-input" placeholder="16 digit NIK" maxlength="16" required>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nomor Kartu Keluarga <span class="text-rose-500">*</span></label>
+                                    <input type="text" id="nomor_kk" class="form-input" placeholder="16 digit Nomor KK" maxlength="16" required>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Jumlah Tanggungan <span class="text-rose-500">*</span></label>
+                                    <input type="number" id="jumlah_tanggungan" class="form-input" placeholder="Jumlah anggota keluarga" min="0" value="{{ $laporan_fill ? $laporan_fill->jumlah_tanggungan : '' }}" required>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">PDF Form Investigasi <span class="text-rose-500">*</span></label>
+                                    <input type="file" id="dokumen_laporan" accept=".pdf" class="form-input !p-1.5" required>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Foto Rumah <span class="text-slate-400 font-normal">(Opsional)</span></label>
+                                    <input type="file" id="foto" accept="image/*" multiple class="form-input !p-1.5">
+                                </div>
+                            </div>
                         </div>
 
-                        <!-- Extra Fields for Penerima -->
-                        <div id="fields-penerima" style="display:none; margin-top:10px; gap: 10px; flex-wrap: wrap;">
-                            <input type="text" id="nik_kepala_keluarga" placeholder="NIK Kepala Keluarga..." style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black;">
-                            <input type="text" id="nomor_kk" placeholder="Nomor KK..." style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black;">
-                            <input type="number" id="jumlah_tanggungan" placeholder="Jml Tanggungan..." style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black; width: 150px;" min="0">
-                            <select id="id_tempat_ibadah" style="padding: 10px; border-radius: 6px; border: 1px solid #ccc; color: black;">
-                                <option value="">- Pilih Tempat Ibadah -</option>
-                                @foreach($ibadahs as $ib)
-                                    <option value="{{ $ib->id }}">{{ $ib->nama_tempat }}</option>
-                                @endforeach
-                            </select>
-                            <label style="display:flex; align-items:center; gap:5px; color:#333; font-weight:bold;">
-                                Foto Rumah: <input type="file" id="foto_kondisi_rumah" accept="image/*" style="color: black;">
-                            </label>
+                        <div class="mt-8 p-4 bg-indigo-50/50 dark:bg-indigo-900/20 backdrop-blur-sm rounded-xl border border-indigo-100 dark:border-indigo-800/50 flex items-start">
+                            <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-800 flex items-center justify-center shrink-0 mr-3 mt-0.5">
+                                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                            </div>
+                            <p class="text-sm text-indigo-800 dark:text-indigo-200 mt-1.5">
+                                Setelah melengkapi formulir di atas, <strong>klik pada titik lokasi yang sesuai di peta</strong> di bawah untuk menyimpan data.
+                            </p>
                         </div>
-
-                        <small style="color: #666; display: block; margin-top: 10px; font-style: italic;">👉 Pilih jenis titik, isi kolom yang tersedia, lalu <b>klik pada peta</b> untuk menyimpan lokasinya.</small>
                     </div>
 
                     <script>
-                        function setMode(mode) {
-                            var currentMode = document.getElementById('mode').value;
+                        document.addEventListener('DOMContentLoaded', function() {
+                            @if(isset($laporan_fill))
+                                document.getElementById('btn-toggle-form').click();
+                                alert('Data laporan diisi otomatis. Silakan klik pada peta untuk menentukan lokasi rumah penerima bantuan, lengkapi data lainnya, lalu klik Simpan.');
+                            @endif
+                        });
+
+                        document.getElementById('btn-toggle-form').addEventListener('click', function() {
+                            var formContainer = document.getElementById('form-container');
                             var mapEl = document.getElementById('map');
+                            var mode = document.getElementById('mode').value;
+                            var btnText = document.getElementById('btn-text');
+                            var btnIconPlus = document.getElementById('btn-icon-plus');
+                            var btnIconMinus = document.getElementById('btn-icon-minus');
                             
-                            // Toggle off if clicking the same mode
-                            if (currentMode === mode) {
-                                document.getElementById('mode').value = '';
-                                document.getElementById('btn-mode-ibadah').style.background = '#e2e8f0';
-                                document.getElementById('btn-mode-ibadah').style.color = '#333';
-                                document.getElementById('btn-mode-penerima').style.background = '#e2e8f0';
-                                document.getElementById('btn-mode-penerima').style.color = '#333';
+                            if (formContainer.classList.contains('hidden')) {
+                                formContainer.classList.remove('hidden');
+                                btnText.innerText = 'Batal Tambah Data';
+                                this.classList.replace('bg-indigo-600', 'bg-red-500');
+                                this.classList.replace('hover:bg-indigo-700', 'hover:bg-red-600');
+                                this.classList.replace('focus:ring-indigo-500', 'focus:ring-red-500');
+                                btnIconPlus.classList.add('hidden');
+                                btnIconMinus.classList.remove('hidden');
+                                
+                                if(mode === 'ibadah') {
+                                    document.getElementById('fields-ibadah').style.display = 'grid';
+                                    document.getElementById('fields-penerima').style.display = 'none';
+                                } else {
+                                    document.getElementById('fields-ibadah').style.display = 'none';
+                                    document.getElementById('fields-penerima').style.display = 'grid';
+                                }
+                                mapEl.classList.add('mode-tambah');
+                            } else {
+                                formContainer.classList.add('hidden');
+                                btnText.innerText = 'Tambah Data Baru';
+                                this.classList.replace('bg-red-500', 'bg-indigo-600');
+                                this.classList.replace('hover:bg-red-600', 'hover:bg-indigo-700');
+                                this.classList.replace('focus:ring-red-500', 'focus:ring-indigo-500');
+                                btnIconMinus.classList.add('hidden');
+                                btnIconPlus.classList.remove('hidden');
+                                
                                 document.getElementById('fields-ibadah').style.display = 'none';
                                 document.getElementById('fields-penerima').style.display = 'none';
                                 mapEl.classList.remove('mode-tambah');
-                                return;
                             }
-                            
-                            document.getElementById('mode').value = mode;
-                            mapEl.classList.add('mode-tambah');
-                            
-                            if(mode === 'ibadah') {
-                                document.getElementById('btn-mode-ibadah').style.background = '#007bff';
-                                document.getElementById('btn-mode-ibadah').style.color = 'white';
-                                document.getElementById('btn-mode-penerima').style.background = '#e2e8f0';
-                                document.getElementById('btn-mode-penerima').style.color = '#333';
-                                document.getElementById('fields-ibadah').style.display = 'flex';
-                                document.getElementById('fields-penerima').style.display = 'none';
-                            } else {
-                                document.getElementById('btn-mode-penerima').style.background = '#007bff';
-                                document.getElementById('btn-mode-penerima').style.color = 'white';
-                                document.getElementById('btn-mode-ibadah').style.background = '#e2e8f0';
-                                document.getElementById('btn-mode-ibadah').style.color = '#333';
-                                document.getElementById('fields-ibadah').style.display = 'none';
-                                document.getElementById('fields-penerima').style.display = 'flex';
-                            }
-                        }
+                        });
                     </script>
 
-                    <div id="panel-edit" class="edit-form">
-                        <form action="{{ route('map.edit') }}" method="POST">
+                    <!-- Edit Data Panel (Map specific) -->
+                    <div id="panel-edit" class="hidden bg-amber-50/80 dark:bg-amber-900/20 backdrop-blur-md border border-amber-200/50 dark:border-amber-700/50 rounded-3xl p-6 md:p-8 mb-8 shadow-lg transition-all duration-300">
+                        <div class="flex items-center mb-6 border-b border-amber-200/50 dark:border-amber-700/50 pb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white shadow-lg shadow-amber-500/30 mr-4 shrink-0">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2-2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                            </div>
+                            <h3 class="text-2xl font-bold font-outfit text-slate-900 dark:text-white tracking-tight">Edit Data Lokasi Peta</h3>
+                        </div>
+                        <form action="{{ route('map.edit') }}" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             @csrf
-                            <strong>Edit Data:</strong>
                             <input type="hidden" name="id" id="edit-id">
                             <input type="hidden" name="type" id="edit-type">
-                            <input type="text" name="nama" id="edit-nama" placeholder="Nama" style="padding: 8px; border-radius: 4px; border: 1px solid #ccc; color: black;">
-                            <input type="text" name="alamat" id="edit-alamat" placeholder="Alamat" style="padding: 8px; width: 400px; border-radius: 4px; border: 1px solid #ccc; color: black;">
-                            <button type="submit" style="padding: 8px 15px; background: #28a745; color: white; border: none; border-radius: 4px;">Simpan</button>
-                            <button type="button" onclick="closeEdit()" style="padding: 8px 15px; background: #6c757d; color: white; border: none; border-radius: 4px;">Batal</button>
+                            
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Nama</label>
+                                <input type="text" name="nama" id="edit-nama" class="form-input" placeholder="Nama">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Alamat Lengkap</label>
+                                <input type="text" name="alamat" id="edit-alamat" class="form-input" placeholder="Alamat">
+                            </div>
+                            
+                            <div class="col-span-1 md:col-span-2 flex justify-end space-x-4 mt-4">
+                                <button type="button" onclick="closeEdit()" class="px-6 py-2.5 bg-white/80 dark:bg-slate-700/80 backdrop-blur-sm border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 rounded-full hover:bg-slate-50 dark:hover:bg-slate-600 font-medium transition-all shadow-sm">Batal</button>
+                                <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-white rounded-full font-medium shadow-lg shadow-amber-500/30 hover:-translate-y-0.5 transition-all">Simpan Perubahan</button>
+                            </div>
                         </form>
                     </div>
 
-                    <div id="map"></div>
-
+                    <!-- The Map Layout -->
+                    <div class="{{ Auth::user()->role === 'user' ? 'flex flex-col lg:flex-row gap-6 items-stretch' : '' }}">
+                        <!-- Map Column -->
+                        <div class="{{ Auth::user()->role === 'user' ? 'flex-grow lg:w-2/3 flex flex-col' : '' }}">
+                            <div class="rounded-3xl overflow-hidden shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 border border-slate-200/80 dark:border-slate-700/80 relative {{ Auth::user()->role === 'user' ? 'flex-grow min-h-[500px]' : '' }} bg-slate-100 dark:bg-slate-800 z-10">
+                                <div id="map" class="{{ Auth::user()->role === 'user' ? 'absolute inset-0 w-full h-full' : 'w-full' }}" style="{{ Auth::user()->role !== 'user' ? 'height: 550px;' : '' }}"></div>
+                            </div>
+                        </div>
 
+                        <!-- Info Column (User Only) -->
+                        @if(Auth::user()->role === 'user')
+                        <div class="w-full lg:w-1/3 flex flex-col">
+                            <div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/80 rounded-3xl shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 overflow-hidden flex flex-col h-full min-h-[500px] max-h-[500px]">
+                                <div class="bg-indigo-50/80 dark:bg-indigo-900/40 backdrop-blur-sm px-6 py-5 border-b border-indigo-100 dark:border-indigo-800/50 flex justify-between items-center shrink-0">
+                                    <h3 class="font-bold font-outfit text-xl text-slate-900 dark:text-white tracking-tight truncate">Tempat Ibadah Anda</h3>
+                                </div>
+                                <div class="p-6 flex-grow overflow-y-auto">
+                                    @forelse($ibadahs as $index => $ib)
+                                        <div class="mb-6 last:mb-0 bg-white dark:bg-slate-700/50 p-5 rounded-2xl border border-slate-100 dark:border-slate-600 shadow-sm">
+                                            <h4 class="font-bold text-lg text-slate-900 dark:text-white mb-2">{{ $ib->nama_tempat }}</h4>
+                                            <span class="inline-block px-3 py-1.5 bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300 text-xs font-bold rounded-full mb-4">{{ $ib->jenis_tempat_ibadah ?? 'Lainnya' }}</span>
+                                            
+                                            <div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
+                                                <div class="flex justify-between border-b border-slate-100 dark:border-slate-600/50 pb-1.5">
+                                                    <span class="text-slate-500 font-medium">Pengurus</span>
+                                                    <span class="text-slate-900 dark:text-slate-200">{{ $ib->nama_pengurus ?? '-' }}</span>
+                                                </div>
+                                                <div class="flex justify-between border-b border-slate-100 dark:border-slate-600/50 pb-1.5">
+                                                    <span class="text-slate-500 font-medium">Kontak</span>
+                                                    <span class="text-slate-900 dark:text-slate-200">{{ $ib->kontak_pengurus ?? '-' }}</span>
+                                                </div>
+                                                <div class="flex justify-between border-b border-slate-100 dark:border-slate-600/50 pb-1.5">
+                                                    <span class="text-slate-500 font-medium">Radius</span>
+                                                    <span class="text-slate-900 dark:text-slate-200 font-bold text-indigo-600 dark:text-indigo-400">{{ $ib->radius_meter }} m</span>
+                                                </div>
+                                                <div class="flex flex-col pt-1.5">
+                                                    <span class="text-slate-500 font-medium mb-1">Alamat</span>
+                                                    <span class="text-slate-900 dark:text-slate-200 leading-relaxed">{{ $ib->alamat }}</span>
+                                                </div>
+                                            </div>
+                                            <div class="mt-5 pt-4 border-t border-slate-100 dark:border-slate-600">
+                                                <button onclick='openEditIbadah({{ $ib->id }}, "{{ addslashes($ib->nama_tempat) }}", "{{ addslashes($ib->alamat) }}", {{ $ib->radius_meter }}, "{{ addslashes($ib->jenis_tempat_ibadah) }}", "{{ addslashes($ib->nama_pengurus) }}", "{{ addslashes($ib->kontak_pengurus) }}")' class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-xl shadow-sm text-amber-800 bg-amber-100/80 hover:bg-amber-200 focus:outline-none transition-all duration-300">
+                                                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
+                                                    Edit Data Lokasi
+                                                </button>
+                                            </div>
+                                        </div>
+                                    @empty
+                                        <div class="flex flex-col items-center justify-center py-12 px-4 text-center">
+                                            <div class="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-4">
+                                                <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4M12 20V4"></path></svg>
+                                            </div>
+                                            <h4 class="text-lg font-bold text-slate-900 dark:text-white mb-1">Belum ada data</h4>
+                                            <p class="text-sm text-slate-500 dark:text-slate-400">Anda belum menambahkan lokasi tempat ibadah.</p>
+                                        </div>
+                                    @endforelse
+                                </div>
+                            </div>
+                        </div>
+                        @endif
+                    </div>
 
                     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
                     <script>
                         var map = L.map('map').setView([-0.02, 109.34], 14);
-                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+                        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+                            attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
+                            subdomains: 'abcd',
+                            maxZoom: 20
+                        }).addTo(map);
 
                         var listIbadah = [];
                         var listPenerima = [];
 
                         var iconIbadah = L.divIcon({
-                            className: '',
-                            html: `<div style="background:#007bff; color:#fff; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:2px solid #fff;">🏛️</div>`,
-                            iconSize: [30, 30]
+                            className: 'custom-div-icon',
+                            html: `<div class="shadow-lg" style="background:#4f46e5; color:#fff; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:3px solid #fff; font-size:16px;">🏛️</div>`,
+                            iconSize: [36, 36],
+                            iconAnchor: [18, 18]
                         });
 
                         // 1. Fungsi Edit UI
                         function openEdit(id, type, nama, alamat) {
-                            document.getElementById('panel-edit').style.display = 'block';
+                            var panel = document.getElementById('panel-edit');
+                            panel.classList.remove('hidden');
                             document.getElementById('edit-id').value = id;
                             document.getElementById('edit-type').value = type;
                             document.getElementById('edit-nama').value = nama;
                             document.getElementById('edit-alamat').value = alamat;
-                            window.scrollTo(0,0);
+                            
+                            // Scroll smoothly to edit panel
+                            panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
                         }
-                        function closeEdit() { document.getElementById('panel-edit').style.display = 'none'; }
+                        function closeEdit() { document.getElementById('panel-edit').classList.add('hidden'); }
 
                         // 2. Reverse Geocoding & Save
                         map.on('click', async function(e) {
                             const mode = document.getElementById('mode').value;
-                            if(!mode) return; // Mode biasa, jangan lakukan apa-apa
+                            if(document.getElementById('form-container').classList.contains('hidden')) return; 
                             
-                            const nama = document.getElementById('nama').value;
-                            if(!nama) return alert("Isi nama dulu!");
-                            
-                            const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${e.latlng.lat}&lon=${e.latlng.lng}`);
-                            const data = await res.json();
-                            const addr = data.address || {};
-                            const alamatDetail = [addr.road, addr.village || addr.suburb, addr.city].filter(Boolean).join(", ");
-
-                            let fd = new FormData();
-                            fd.append('_token', '{{ csrf_token() }}');
-                            fd.append('type', mode);
-                            fd.append('nama', nama);
-                            fd.append('lat', e.latlng.lat);
-                            fd.append('lng', e.latlng.lng);
-                            fd.append('alamat', alamatDetail || data.display_name);
-
+                            let nama = '';
                             if (mode === 'ibadah') {
-                                fd.append('jenis_tempat_ibadah', document.getElementById('jenis_tempat_ibadah').value);
-                                fd.append('kontak_person', document.getElementById('kontak_person').value);
+                                nama = document.getElementById('nama_ibadah').value;
+                                if(!nama) return alert("Isi nama tempat ibadah dulu!");
+                                if(!document.getElementById('jenis_tempat_ibadah').value) return alert("Pilih jenis tempat ibadah!");
                             } else {
-                                fd.append('nik_kepala_keluarga', document.getElementById('nik_kepala_keluarga').value);
-                                fd.append('nomor_kk', document.getElementById('nomor_kk').value);
-                                fd.append('jumlah_tanggungan', document.getElementById('jumlah_tanggungan').value);
-                                fd.append('id_tempat_ibadah', document.getElementById('id_tempat_ibadah').value);
+                                nama = document.getElementById('nama_kepala_keluarga').value;
+                                if(!nama) return alert("Isi nama kepala keluarga (wajib)!");
                                 
-                                const fotoInput = document.getElementById('foto_kondisi_rumah');
-                                if (fotoInput.files.length > 0) {
-                                    fd.append('foto_kondisi_rumah', fotoInput.files[0]);
-                                }
+                                const nik = document.getElementById('nik_kepala_keluarga').value;
+                                if(!nik) return alert("Isi NIK Kepala Keluarga (wajib)!");
+                                
+                                const kk = document.getElementById('nomor_kk').value;
+                                if(!kk) return alert("Isi Nomor KK (wajib)!");
+                                
+                                const tgg = document.getElementById('jumlah_tanggungan').value;
+                                if(!tgg) return alert("Isi Jumlah Tanggungan (wajib)!");
+                                
+                                const docInput = document.getElementById('dokumen_laporan');
+                                if(docInput.files.length === 0) return alert("PDF Form Investigasi wajib diunggah!");
                             }
                             
-                            fetch('{{ route("map.save") }}', { method: 'POST', body: fd }).then(() => location.reload());
+                            // Loading indicator
+                            document.body.style.cursor = 'wait';
+                            
+                            try {
+                                const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${e.latlng.lat}&lon=${e.latlng.lng}`);
+                                const data = await res.json();
+                                const addr = data.address || {};
+                                const alamatDetail = [addr.road, addr.village || addr.suburb, addr.city].filter(Boolean).join(", ");
+
+                                let fd = new FormData();
+                                fd.append('_token', '{{ csrf_token() }}');
+                                fd.append('type', mode);
+                                fd.append('nama', nama);
+                                fd.append('lat', e.latlng.lat);
+                                fd.append('lng', e.latlng.lng);
+                                fd.append('alamat', alamatDetail || data.display_name);
+
+                                let idLaporan = document.getElementById('id_laporan_warga').value;
+                                if (idLaporan) {
+                                    fd.append('id_laporan_warga', idLaporan);
+                                }
+
+                                if (mode === 'ibadah') {
+                                    fd.append('jenis_tempat_ibadah', document.getElementById('jenis_tempat_ibadah').value);
+                                    fd.append('nama_pengurus', document.getElementById('nama_pengurus').value);
+                                    fd.append('kontak_pengurus', document.getElementById('kontak_pengurus').value);
+                                } else {
+                                    fd.append('nik_kepala_keluarga', document.getElementById('nik_kepala_keluarga').value);
+                                    fd.append('nomor_kk', document.getElementById('nomor_kk').value);
+                                    fd.append('jumlah_tanggungan', document.getElementById('jumlah_tanggungan').value);
+                                    
+                                    const docInput = document.getElementById('dokumen_laporan');
+                                    if (docInput.files.length > 0) {
+                                        fd.append('dokumen_laporan', docInput.files[0]);
+                                    }
+
+                                    const fotoInput = document.getElementById('foto');
+                                    if (fotoInput.files.length > 0) {
+                                        for (let i = 0; i < fotoInput.files.length; i++) {
+                                            fd.append('foto[]', fotoInput.files[i]);
+                                        }
+                                    }
+                                }
+                                
+                                const saveRes = await fetch('{{ route("map.save") }}', { method: 'POST', body: fd });
+                                const saveData = await saveRes.json();
+                                
+                                if (saveData.status === 'error') {
+                                    alert(saveData.message);
+                                    document.body.style.cursor = 'default';
+                                    return;
+                                }
+
+                                location.reload();
+                            } catch (err) {
+                                alert("Terjadi kesalahan saat menyimpan data lokasi.");
+                                document.body.style.cursor = 'default';
+                            }
                         });
 
                         // 3. Load Data Ibadah
@@ -202,25 +414,31 @@
                         (function(){
                             var rAwal = {{ $ib->radius_meter }};
                             var circle = L.circle([{{ $ib->lat }}, {{ $ib->lng }}], {
-                                radius: rAwal, color: 'blue', fillOpacity: 0.1
+                                radius: rAwal, color: '#4f46e5', fillColor: '#4f46e5', fillOpacity: 0.1, weight: 2, dashArray: '5, 5'
                             }).addTo(map);
 
                             var marker = L.marker([{{ $ib->lat }}, {{ $ib->lng }}], {icon: iconIbadah}).addTo(map);
                             listIbadah.push({id: {{ $ib->id }}, nama: "{{ addslashes($ib->nama_tempat) }}", circle: circle, latlng: L.latLng({{ $ib->lat }}, {{ $ib->lng }})});
 
                             marker.bindPopup(`
-                                <b>{{ addslashes($ib->nama_tempat) }}</b><br>
-                                Radius: <span id="val_{{ $ib->id }}">${rAwal}</span> m<br>
+                                <div class="text-center pb-2">
+                                    <strong class="text-gray-800 text-base block mb-1">{{ addslashes($ib->nama_tempat) }}</strong>
+                                    <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">Radius: <span id="val_{{ $ib->id }}">${rAwal}</span> m</span>
+                                </div>
+                                @if(Auth::user()->role !== 'user')
                                 <input type="range" class="popup-slider" min="100" max="3000" value="${rAwal}" oninput="updateRadius(${rAwal}, this.value, {{ $ib->id }})" onchange="saveRadius(this.value, {{ $ib->id }})">
-                                <button onclick="window.location.href='{{ route('map.delete', ['type' => 'ibadah', 'id' => $ib->id]) }}'" style="background:red; color:white; border:none; padding:5px; width:100%; cursor:pointer; margin-top:5px;">Hapus</button>
+                                @endif
                             `);
                         })();
                         @endforeach
 
                         // 4. Load Data Penerima Bantuan
                         @foreach($penerimas as $r)
+                            @if($r->status_persetujuan !== 'ditolak')
                             var rm = L.circleMarker([{{ $r->lat }}, {{ $r->lng }}], {radius: 8, color: '#fff', fillOpacity: 1, weight: 2}).addTo(map);
-                            listPenerima.push({marker: rm, latlng: L.latLng({{ $r->lat }}, {{ $r->lng }})});
+                            rm.bindPopup(`<strong class="text-gray-800">{{ addslashes($r->nama_kepala_keluarga) }}</strong>`);
+                            listPenerima.push({marker: rm, latlng: L.latLng({{ $r->lat }}, {{ $r->lng }}), statusPersetujuan: "{{ $r->status_persetujuan }}"});
+                            @endif
                         @endforeach
 
                         // 5. Real-time Update Logic
@@ -239,21 +457,15 @@
                         }
 
                         function syncUI() {
-                            var baris = document.querySelectorAll('.baris-penerima');
-                            baris.forEach(row => {
-                                var rLoc = L.latLng(row.getAttribute('data-lat'), row.getAttribute('data-lng'));
-                                var covered = [];
-                                listIbadah.forEach(ib => { if(rLoc.distanceTo(ib.latlng) <= ib.circle.getRadius()) covered.push(ib.nama); });
-                                
-                                row.querySelector('.status-cell').innerHTML = covered.length > 0 ? 
-                                    `<span style='color:green'>✔ ${covered.join(", ")}</span>` : 
-                                    `<span style='color:red'>✘ Luar Jangkauan</span>`;
-                            });
-
                             listPenerima.forEach(penerima => {
                                 let check = false;
                                 listIbadah.forEach(ib => { if(penerima.latlng.distanceTo(ib.latlng) <= ib.circle.getRadius()) check = true; });
-                                penerima.marker.setStyle({fillColor: check ? 'green' : 'red'});
+                                
+                                let fillColor = check ? '#10b981' : '#ef4444'; // emerald-500 : red-500
+                                if (penerima.statusPersetujuan !== 'disetujui') {
+                                    fillColor = '#f59e0b'; // amber-500
+                                }
+                                penerima.marker.setStyle({fillColor: fillColor});
                             });
                         }
 
@@ -261,6 +473,73 @@
                     </script>
                     <!-- Map Interface End -->
 
+                    @if(Auth::user()->role === 'user')
+                    <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+                        <!-- Edit Ibadah Form Modal/Panel -->
+                        <div id="panel-edit-ibadah" class="hidden mt-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg p-6">
+                            <div class="flex items-center mb-5 border-b border-gray-100 dark:border-gray-700 pb-4">
+                                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Edit Data Tempat Ibadah</h3>
+                            </div>
+                            <form action="{{ route('map.edit') }}" method="POST">
+                                @csrf
+                                <input type="hidden" name="id" id="edit-ibadah-id">
+                                <input type="hidden" name="type" id="edit-ibadah-type" value="ibadah">
+                                
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Tempat</label>
+                                        <input type="text" name="nama" id="edit-ibadah-nama" class="form-input" required>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Tempat Ibadah</label>
+                                        <select name="jenis_tempat_ibadah" id="edit-ibadah-jenis" class="form-input">
+                                            <option value="">- Pilih Jenis -</option>
+                                            <option value="Masjid">Masjid</option>
+                                            <option value="Gereja Katolik">Gereja Katolik</option>
+                                            <option value="Gereja Protestan">Gereja Protestan</option>
+                                            <option value="Vihara">Vihara</option>
+                                            <option value="Pura">Pura</option>
+                                            <option value="Klenteng">Klenteng</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nama Pengurus</label>
+                                        <input type="text" name="nama_pengurus" id="edit-ibadah-nama-pengurus" class="form-input">
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kontak Pengurus</label>
+                                        <input type="text" name="kontak_pengurus" id="edit-ibadah-kontak-pengurus" class="form-input">
+                                    </div>
+                                    <div class="col-span-1 md:col-span-2">
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Alamat Lengkap</label>
+                                        <input type="text" name="alamat" id="edit-ibadah-alamat" class="form-input" required>
+                                    </div>
+                                </div>
+                                
+                                <div class="flex justify-end space-x-3">
+                                    <button type="button" onclick="closeEditIbadah()" class="px-5 py-2.5 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-600 font-medium transition-colors">Batal</button>
+                                    <button type="submit" class="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium shadow-sm transition-colors">Simpan Perubahan</button>
+                                </div>
+                            </form>
+                        </div>
+
+                        <script>
+                            function openEditIbadah(id, nama, alamat, radius, jenis, nama_pengurus, kontak_pengurus) {
+                                var panel = document.getElementById('panel-edit-ibadah');
+                                panel.classList.remove('hidden');
+                                document.getElementById('edit-ibadah-id').value = id;
+                                document.getElementById('edit-ibadah-nama').value = nama;
+                                document.getElementById('edit-ibadah-alamat').value = alamat;
+                                document.getElementById('edit-ibadah-jenis').value = jenis || '';
+                                document.getElementById('edit-ibadah-nama-pengurus').value = nama_pengurus || '';
+                                document.getElementById('edit-ibadah-kontak-pengurus').value = kontak_pengurus || '';
+                                panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            }
+                            function closeEditIbadah() { document.getElementById('panel-edit-ibadah').classList.add('hidden'); }
+                        </script>
+                    </div>
+                    @endif
+
                 </div>
             </div>
         </div>
diff --git a/resources/views/konfirmasi.blade.php b/resources/views/konfirmasi.blade.php
new file mode 100644
index 0000000..106f24b
--- /dev/null
+++ b/resources/views/konfirmasi.blade.php
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Konfirmasi Penyerahan Bantuan</title>
+    <style>
+        body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; margin: 0; padding: 20px; color: #333; }
+        .container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
+        h2 { text-align: center; color: #2c3e50; margin-top: 0; }
+        .info-box { background: #eef2f5; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
+        .info-box p { margin: 5px 0; }
+        .info-box strong { color: #2c3e50; }
+        .form-group { margin-bottom: 15px; }
+        label { display: block; font-weight: bold; margin-bottom: 5px; color: #555; }
+        input[type="password"], input[type="file"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
+        button { width: 100%; background: #28a745; color: white; border: none; padding: 12px; font-size: 16px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.3s; }
+        button:hover { background: #218838; }
+        .alert { padding: 15px; border-radius: 6px; margin-bottom: 20px; font-weight: bold; text-align: center; }
+        .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
+        .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
+        .badge-success { background: #28a745; color: white; padding: 5px 10px; border-radius: 20px; font-size: 14px; font-weight: bold; display: inline-block; margin-top: 10px; }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h2>Konfirmasi Penyerahan Bantuan</h2>
+
+    @if(session('error'))
+        <div class="alert alert-error">{{ session('error') }}</div>
+    @endif
+    @if(isset($pesan_sukses))
+        <div class="alert alert-success">Berhasil! Bukti penyerahan telah disimpan dan menunggu persetujuan Admin.</div>
+    @endif
+
+    <div class="info-box">
+        <p><strong>Penerima:</strong> {{ $warga->nama_kepala_keluarga }}</p>
+        <p><strong>NIK:</strong> {{ substr($warga->nik_kepala_keluarga ?? '', 0, 6) }}**********</p>
+        <p><strong>Alamat:</strong> {{ $warga->alamat }}</p>
+    </div>
+
+    @if($sudah_cair)
+        <div style="text-align: center; margin-bottom: 20px;">
+            <div class="badge-success">✔ Sudah Dicairkan Bulan Ini</div>
+            <p style="color: #666; font-size: 14px; margin-top: 10px;">Bantuan untuk penerima ini telah diproses pada <strong>{{ $log->tanggal_diterima->format('d F Y H:i') }}</strong>.</p>
+        </div>
+    @else
+        <form id="konfirmasiForm" action="{{ route('konfirmasi.process', ['id' => $warga->id, 'signature' => request('signature')]) }}" method="POST" enctype="multipart/form-data">
+            @csrf
+            <div class="form-group">
+                <label for="foto_penyerahan">Unggah Bukti Foto Penyerahan</label>
+                <input type="file" id="foto_penyerahan" name="foto_penyerahan" accept="image/*" required>
+            </div>
+
+            <button type="submit" id="btnSubmit">Konfirmasi Pencairan</button>
+        </form>
+    @endif
+
+</div>
+
+</body>
+</html>
diff --git a/resources/views/kupon.blade.php b/resources/views/kupon.blade.php
new file mode 100644
index 0000000..9270bce
--- /dev/null
+++ b/resources/views/kupon.blade.php
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Cetak Kupon Bantuan</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #2563eb;
+            --primary-dark: #1d4ed8;
+            --secondary: #f8fafc;
+            --text-main: #0f172a;
+            --text-muted: #64748b;
+            --border-color: #e2e8f0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f1f5f9;
+            margin: 0;
+            padding: 40px 20px;
+            color: var(--text-main);
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+        }
+
+        .controls {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        .btn-print {
+            background-color: var(--primary);
+            color: white;
+            padding: 14px 28px;
+            border-radius: 10px;
+            text-decoration: none;
+            font-weight: 600;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 16px;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
+        }
+
+        .btn-print:hover {
+            background-color: var(--primary-dark);
+            transform: translateY(-1px);
+            box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.3);
+        }
+
+        .print-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 24px;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .coupon-card {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
+            display: flex;
+            overflow: hidden;
+            border: 1px solid var(--border-color);
+            position: relative;
+            page-break-inside: avoid;
+        }
+
+        .coupon-left {
+            flex: 1;
+            padding: 32px 24px;
+            border-right: 2px dashed #cbd5e1;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        /* Cutout circles */
+        .coupon-left::before, .coupon-left::after {
+            content: '';
+            position: absolute;
+            right: -11px;
+            width: 20px;
+            height: 20px;
+            background-color: #f1f5f9;
+            border-radius: 50%;
+            border: 1px solid var(--border-color);
+            z-index: 1;
+        }
+        .coupon-left::before { 
+            top: -11px; 
+            border-top-color: transparent; 
+            border-left-color: transparent; 
+            transform: rotate(45deg); 
+        }
+        .coupon-left::after { 
+            bottom: -11px; 
+            border-bottom-color: transparent; 
+            border-left-color: transparent; 
+            transform: rotate(135deg); 
+        }
+
+        .coupon-right {
+            width: 160px;
+            background-color: var(--secondary);
+            padding: 24px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .header-title {
+            text-transform: uppercase;
+            font-size: 11px;
+            letter-spacing: 1.5px;
+            font-weight: 700;
+            color: var(--primary);
+            margin-bottom: 8px;
+        }
+
+        .beneficiary-name {
+            font-size: 22px;
+            font-weight: 800;
+            margin: 0 0 4px 0;
+            color: var(--text-main);
+            line-height: 1.2;
+        }
+
+        .beneficiary-nik {
+            font-size: 14px;
+            color: var(--text-muted);
+            margin: 0 0 20px 0;
+            font-family: monospace;
+            background: #f8fafc;
+            padding: 4px 8px;
+            border-radius: 6px;
+            display: inline-block;
+        }
+
+        .period-badge {
+            display: inline-flex;
+            align-items: center;
+            padding: 6px 14px;
+            background-color: #eff6ff;
+            color: #1e3a8a;
+            border-radius: 20px;
+            font-weight: 600;
+            font-size: 13px;
+            margin-bottom: 16px;
+            border: 1px solid #bfdbfe;
+        }
+
+        .qr-wrapper {
+            background: white;
+            padding: 8px;
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            border: 1px solid var(--border-color);
+        }
+
+        .qr-wrapper img {
+            display: block;
+            width: 110px;
+            height: 110px;
+        }
+
+        .qr-label {
+            font-size: 10px;
+            color: var(--text-muted);
+            margin-top: 12px;
+            text-align: center;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .footer-note {
+            font-size: 11px;
+            color: var(--text-muted);
+            margin-top: auto;
+            line-height: 1.5;
+            display: flex;
+            align-items: flex-start;
+            gap: 6px;
+        }
+
+        .footer-note svg {
+            width: 14px;
+            height: 14px;
+            flex-shrink: 0;
+            color: var(--primary);
+        }
+
+        @media print {
+            body { 
+                background-color: white; 
+                padding: 0; 
+            }
+            .controls { display: none; }
+            .print-container { 
+                display: block;
+                max-width: 100%;
+            }
+            .coupon-card { 
+                box-shadow: none; 
+                border: 2px solid #cbd5e1; 
+                margin-bottom: 24px;
+                break-inside: avoid;
+            }
+            .coupon-left::before, .coupon-left::after {
+                background-color: white;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="controls">
+        <button class="btn-print" onclick="window.print()">
+            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
+            </svg>
+            Cetak Kupon Sekarang
+        </button>
+    </div>
+
+    <div class="print-container">
+        @foreach($kupons as $kupon)
+            <div class="coupon-card">
+                <div class="coupon-left">
+                    <div class="header-title">Voucher Pencairan Bantuan</div>
+                    
+                    <h2 class="beneficiary-name">{{ $kupon['warga']->nama_kepala_keluarga }}</h2>
+                    <div class="beneficiary-nik">NIK: {{ substr($kupon['warga']->nik_kepala_keluarga ?? '', 0, 6) }}&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</div>
+                    
+                    <div>
+                        <span class="period-badge">
+                            <svg width="14" height="14" style="margin-right: 6px;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+                            Periode: {{ $kupon['periode_text'] }}
+                        </span>
+                    </div>
+
+                    <div class="footer-note">
+                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                        Tunjukkan QR Code ini kepada pengurus tempat penyalur untuk proses verifikasi.
+                    </div>
+                </div>
+                
+                <div class="coupon-right">
+                    <div class="qr-wrapper">
+                        <img src="{{ $kupon['qrDataUri'] }}" alt="QR Code Kupon">
+                    </div>
+                    <div class="qr-label">Scan untuk<br>Verifikasi</div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+
+</body>
+</html>
diff --git a/resources/views/laporan/index.blade.php b/resources/views/laporan/index.blade.php
new file mode 100644
index 0000000..490b174
--- /dev/null
+++ b/resources/views/laporan/index.blade.php
@@ -0,0 +1,102 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex justify-between items-center">
+            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+                {{ __('Daftar Laporan Warga') }}
+            </h2>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900 dark:text-gray-100">
+                    
+                    <div class="mb-8 p-4 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl border border-indigo-100 dark:border-indigo-800 flex flex-col md:flex-row items-center justify-between gap-4">
+                        <div>
+                            <h3 class="text-lg font-bold text-indigo-900 dark:text-indigo-300">Tautan Pelaporan Warga</h3>
+                            <p class="text-sm text-indigo-700 dark:text-indigo-400 mt-1">Gunakan tautan ini atau jadikan QR Code agar warga dapat melapor langsung ke wilayah Anda.</p>
+                        </div>
+                        <div class="flex w-full md:w-auto items-center gap-2">
+                            <input type="text" readonly value="{{ url('/lapor/' . $tempatIbadah->kode_lapor) }}" id="link-lapor" class="w-full md:w-80 bg-white dark:bg-gray-800 text-sm border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-gray-700 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
+                            <button onclick="copyLink()" class="flex-shrink-0 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                                Salin
+                            </button>
+                        </div>
+                    </div>
+
+                    <script>
+                        function copyLink() {
+                            var copyText = document.getElementById("link-lapor");
+                            copyText.select();
+                            copyText.setSelectionRange(0, 99999); // For mobile devices
+                            navigator.clipboard.writeText(copyText.value);
+                            alert("Tautan berhasil disalin: " + copyText.value);
+                        }
+                    </script>
+                    @if($laporans->isEmpty())
+                        <div class="text-center py-12">
+                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                            </svg>
+                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Tidak ada laporan baru</h3>
+                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Semua laporan warga telah diproses atau belum ada yang melaporkan.</p>
+                        </div>
+                    @else
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                                    <tr>
+                                        <th scope="col" class="px-6 py-3">Tanggal Lapor</th>
+                                        <th scope="col" class="px-6 py-3">Nama Calon Penerima</th>
+                                        <th scope="col" class="px-6 py-3">Tanggungan</th>
+                                        <th scope="col" class="px-6 py-3">Alamat</th>
+                                        <th scope="col" class="px-6 py-3">Deskripsi</th>
+                                        <th scope="col" class="px-6 py-3">Foto Bukti</th>
+                                        <th scope="col" class="px-6 py-3">Aksi</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @foreach($laporans as $laporan)
+                                        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                            <td class="px-6 py-4">{{ $laporan->created_at->format('d M Y H:i') }}</td>
+                                            <td class="px-6 py-4 font-medium text-gray-900 dark:text-white">{{ $laporan->nama_calon }}</td>
+                                            <td class="px-6 py-4">{{ $laporan->jumlah_tanggungan }} Orang</td>
+                                            <td class="px-6 py-4">
+                                                @if($laporan->alamat)
+                                                    <span class="text-gray-700 dark:text-gray-300">{{ $laporan->alamat }}</span>
+                                                @else
+                                                    <span class="text-gray-400 italic">Tidak ada alamat</span>
+                                                @endif
+                                            </td>
+                                            <td class="px-6 py-4">
+                                                @if($laporan->deskripsi)
+                                                    <span class="text-gray-700 dark:text-gray-300">{{ Str::limit($laporan->deskripsi, 50) }}</span>
+                                                @else
+                                                    <span class="text-gray-400 italic">Tidak ada deskripsi</span>
+                                                @endif
+                                            </td>
+                                            <td class="px-6 py-4">
+                                                @if($laporan->foto)
+                                                    <a href="{{ asset('storage/uploads/' . $laporan->foto) }}" target="_blank" class="text-blue-600 hover:underline">Lihat Foto</a>
+                                                @else
+                                                    <span class="text-gray-400 italic">Tidak ada foto</span>
+                                                @endif
+                                            </td>
+                                            <td class="px-6 py-4">
+                                                <a href="{{ route('dashboard', ['add_laporan' => $laporan->id]) }}" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition">
+                                                    Tambah Data Baru dari Laporan Ini
+                                                </a>
+                                            </td>
+                                        </tr>
+                                    @endforeach
+                                </tbody>
+                            </table>
+                        </div>
+                    @endif
+
+                </div>
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/laporan/lapor.blade.php b/resources/views/laporan/lapor.blade.php
new file mode 100644
index 0000000..51bbf47
--- /dev/null
+++ b/resources/views/laporan/lapor.blade.php
@@ -0,0 +1,120 @@
+<x-guest-layout>
+    <div class="mb-8 text-center">
+        <div class="mx-auto w-16 h-16 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center mb-4 border-4 border-white dark:border-gray-800 shadow-sm">
+            <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
+        </div>
+        <h2 class="text-2xl font-extrabold text-gray-900 dark:text-white tracking-tight">Laporan Warga</h2>
+        <p class="text-sm font-medium text-indigo-600 dark:text-indigo-400 mt-1">Untuk: {{ $tempatIbadah->nama_tempat }}</p>
+        <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm max-w-sm mx-auto">
+            Bantu kami menemukan warga sekitar yang membutuhkan. Masukkan data calon penerima bantuan di bawah ini.
+        </p>
+    </div>
+
+    @if (session('success'))
+        <div class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 p-4 rounded-xl flex items-start shadow-sm" role="alert">
+            <svg class="w-5 h-5 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            <div class="text-sm font-medium">
+                {{ session('success') }}
+            </div>
+        </div>
+    @endif
+
+    <form method="POST" action="{{ route('lapor.store', $tempatIbadah->kode_lapor) }}" enctype="multipart/form-data" class="space-y-6">
+        @csrf
+
+        <!-- Nama Calon -->
+        <div class="relative">
+            <label for="nama_calon" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Nama Kepala Keluarga <span class="text-red-500">*</span></label>
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+                </div>
+                <input id="nama_calon" type="text" name="nama_calon" value="{{ old('nama_calon') }}" required autofocus
+                    class="pl-10 block w-full rounded-xl border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-colors py-3"
+                    placeholder="Contoh: Budi Santoso">
+            </div>
+            <x-input-error :messages="$errors->get('nama_calon')" class="mt-2" />
+        </div>
+
+        <!-- Jumlah Tanggungan -->
+        <div class="relative">
+            <label for="jumlah_tanggungan" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Jumlah Tanggungan <span class="text-red-500">*</span></label>
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+                </div>
+                <input id="jumlah_tanggungan" type="number" name="jumlah_tanggungan" min="0" value="{{ old('jumlah_tanggungan') }}" required
+                    class="pl-10 block w-full rounded-xl border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-colors py-3"
+                    placeholder="Jumlah anggota keluarga">
+            </div>
+            <x-input-error :messages="$errors->get('jumlah_tanggungan')" class="mt-2" />
+        </div>
+
+        <!-- Alamat -->
+        <div class="relative">
+            <label for="alamat" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
+            <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 pt-3 flex items-start pointer-events-none">
+                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                </div>
+                <textarea id="alamat" name="alamat" rows="2" required
+                    class="pl-10 block w-full rounded-xl border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-colors py-3 px-4"
+                    placeholder="Masukkan alamat lengkap RT/RW, Dusun, Desa..."></textarea>
+            </div>
+            <x-input-error :messages="$errors->get('alamat')" class="mt-2" />
+        </div>
+
+        <!-- Deskripsi -->
+        <div class="relative">
+            <label for="deskripsi" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Deskripsi Kondisi Warga <span class="text-gray-400 font-normal">(Opsional)</span></label>
+            <div class="relative">
+                <textarea id="deskripsi" name="deskripsi" rows="3"
+                    class="block w-full rounded-xl border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm transition-colors py-3 px-4"
+                    placeholder="Ceritakan sedikit tentang kondisi ekonomi atau kehidupan warga ini..."></textarea>
+            </div>
+            <x-input-error :messages="$errors->get('deskripsi')" class="mt-2" />
+        </div>
+
+        <!-- Foto Upload (Custom) -->
+        <div>
+            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Foto Kondisi / Rumah <span class="text-gray-400 font-normal">(Opsional namun sangat disarankan)</span></label>
+            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group relative cursor-pointer" onclick="document.getElementById('foto').click()">
+                <div class="space-y-1 text-center">
+                    <svg class="mx-auto h-12 w-12 text-gray-400 group-hover:text-indigo-500 transition-colors" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                    <div class="flex text-sm text-gray-600 dark:text-gray-400 justify-center">
+                        <span class="relative cursor-pointer bg-transparent rounded-md font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                            <span>Upload foto</span>
+                            <input id="foto" name="foto" type="file" class="sr-only" accept="image/*" onchange="updateFileName(this)">
+                        </span>
+                        <p class="pl-1">atau tarik & lepas ke sini</p>
+                    </div>
+                    <p class="text-xs text-gray-500 dark:text-gray-500">
+                        PNG, JPG, JPEG maks 2MB
+                    </p>
+                </div>
+            </div>
+            <p id="file-name" class="mt-2 text-sm text-indigo-600 dark:text-indigo-400 hidden font-medium text-center"></p>
+            <x-input-error :messages="$errors->get('foto')" class="mt-2" />
+        </div>
+
+        <div class="pt-4">
+            <button type="submit" class="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-xl shadow-sm text-sm font-bold text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all transform hover:-translate-y-0.5">
+                Kirim Laporan
+            </button>
+        </div>
+    </form>
+
+    <script>
+        function updateFileName(input) {
+            const fileNameDisplay = document.getElementById('file-name');
+            if (input.files && input.files.length > 0) {
+                fileNameDisplay.textContent = 'File terpilih: ' + input.files[0].name;
+                fileNameDisplay.classList.remove('hidden');
+            } else {
+                fileNameDisplay.classList.add('hidden');
+            }
+        }
+    </script>
+</x-guest-layout>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0a471a4..1187e34 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,34 +1,98 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+        <title>{{ config('app.name', 'WebGIS Pengentasan Kemiskinan') }}</title>
 
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+        <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800|outfit:500,600,700,800" rel="stylesheet" />
 
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+        <style>
+            body {
+                font-family: 'Inter', sans-serif;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                font-family: 'Outfit', sans-serif;
+            }
+            .bg-grid-pattern {
+                background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+                                  linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
+                background-size: 40px 40px;
+            }
+            .dark .bg-grid-pattern {
+                background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+                                  linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+            }
+            .blob-1 {
+                position: absolute;
+                top: -10%;
+                left: -10%;
+                width: 500px;
+                height: 500px;
+                background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(transparent) 70%);
+                border-radius: 50%;
+                filter: blur(40px);
+                z-index: -1;
+            }
+            .blob-2 {
+                position: absolute;
+                bottom: -10%;
+                right: -10%;
+                width: 600px;
+                height: 600px;
+                background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(transparent) 70%);
+                border-radius: 50%;
+                filter: blur(40px);
+                z-index: -1;
+            }
+            .dark .blob-1 { background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(transparent) 70%); }
+            .dark .blob-2 { background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, rgba(transparent) 70%); }
+            
+            .animate-fade-in-up {
+                animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            @keyframes fadeInUp {
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        </style>
     </head>
-    <body class="font-sans antialiased">
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
-            @include('layouts.navigation')
+    <body class="antialiased bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 relative overflow-x-hidden selection:bg-indigo-500 selection:text-white">
+        
+        <!-- Background Elements -->
+        <div class="fixed inset-0 bg-grid-pattern pointer-events-none z-[-2]"></div>
+        <div class="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
+            <div class="blob-1"></div>
+            <div class="blob-2"></div>
+        </div>
+
+        <div class="min-h-screen relative z-0 flex flex-col">
+            <div class="sticky top-0 z-50 backdrop-blur-md bg-white/70 dark:bg-slate-900/70 border-b border-slate-200/50 dark:border-slate-800/50 transition-all duration-300">
+                @include('layouts.navigation')
+            </div>
 
             <!-- Page Heading -->
             @isset($header)
-                <header class="bg-white dark:bg-gray-800 shadow">
-                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                <header class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200/50 dark:border-slate-800/50 shadow-sm relative z-10">
+                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 animate-fade-in-up">
                         {{ $header }}
                     </div>
                 </header>
             @endisset
 
             <!-- Page Content -->
-            <main>
+            <main class="flex-grow">
                 {{ $slot }}
             </main>
         </div>
diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
index 4b369b6..1ba45b6 100644
--- a/resources/views/layouts/guest.blade.php
+++ b/resources/views/layouts/guest.blade.php
@@ -1,28 +1,95 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+        <title>{{ config('app.name', 'WebGIS Pengentasan Kemiskinan') }}</title>
 
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+        <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800|outfit:500,600,700,800" rel="stylesheet" />
 
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+        <style>
+            body {
+                font-family: 'Inter', sans-serif;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                font-family: 'Outfit', sans-serif;
+            }
+            .bg-grid-pattern {
+                background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+                                  linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
+                background-size: 40px 40px;
+            }
+            .dark .bg-grid-pattern {
+                background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+                                  linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+            }
+            .blob-1 {
+                position: absolute;
+                top: -10%;
+                left: -10%;
+                width: 500px;
+                height: 500px;
+                background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(transparent) 70%);
+                border-radius: 50%;
+                filter: blur(40px);
+                z-index: -1;
+            }
+            .blob-2 {
+                position: absolute;
+                bottom: -10%;
+                right: -10%;
+                width: 600px;
+                height: 600px;
+                background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(transparent) 70%);
+                border-radius: 50%;
+                filter: blur(40px);
+                z-index: -1;
+            }
+            .dark .blob-1 { background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(transparent) 70%); }
+            .dark .blob-2 { background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, rgba(transparent) 70%); }
+            
+            .animate-fade-in-up {
+                animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            @keyframes fadeInUp {
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        </style>
     </head>
-    <body class="font-sans text-gray-900 antialiased">
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
-            <div>
-                <a href="/">
-                    <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
+    <body class="antialiased bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 relative overflow-x-hidden selection:bg-indigo-500 selection:text-white min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
+        
+        <!-- Background Elements -->
+        <div class="fixed inset-0 bg-grid-pattern pointer-events-none z-[-2]"></div>
+        <div class="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
+            <div class="blob-1"></div>
+            <div class="blob-2"></div>
+        </div>
+
+        <div class="animate-fade-in-up w-full flex flex-col items-center">
+            <div class="mb-8">
+                <a href="/" class="flex flex-col items-center gap-3 group">
+                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30 group-hover:scale-105 transition-transform duration-300">
+                        <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    </div>
+                    <span class="font-outfit font-bold text-2xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
+                        WebGIS Kesra
+                    </span>
                 </a>
             </div>
 
-            <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
+            <div class="w-full sm:max-w-md px-8 py-10 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200 dark:border-slate-800 shadow-2xl overflow-hidden sm:rounded-2xl">
                 {{ $slot }}
             </div>
         </div>
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 515c4fb..e978fbf 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -1,38 +1,61 @@
-<nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
+<nav x-data="{ open: false }" class="bg-transparent border-none">
     <!-- Primary Navigation Menu -->
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
             <div class="flex">
                 <!-- Logo -->
                 <div class="shrink-0 flex items-center">
-                    <a href="{{ route('dashboard') }}">
-                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" />
+                    <a href="{{ route('dashboard') }}" class="group flex items-center gap-2">
+                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30 group-hover:scale-105 transition-transform duration-300">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                        </div>
+                        <span class="font-outfit font-bold text-xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400 hidden sm:block">
+                            WebGIS Kesra
+                        </span>
                     </a>
                 </div>
 
                 <!-- Navigation Links -->
-                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex font-medium font-outfit">
                     <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                         {{ __('Dashboard') }}
                     </x-nav-link>
+                    @if(Auth::user()->role === 'admin')
                     <x-nav-link :href="route('ibadah.index')" :active="request()->routeIs('ibadah.index')">
                         {{ __('Daftar Tempat Ibadah') }}
                     </x-nav-link>
+                    @endif
                     <x-nav-link :href="route('penerima.index')" :active="request()->routeIs('penerima.index')">
                         {{ __('Daftar Penerima Bantuan') }}
                     </x-nav-link>
+
+                    @if(Auth::user()->role !== 'admin')
+                    <x-nav-link :href="route('laporan.index')" :active="request()->routeIs('laporan.*')">
+                        {{ __('Laporan Warga') }}
+                    </x-nav-link>
+
+                    <x-nav-link :href="route('scan.index')" :active="request()->routeIs('scan.index')">
+                        {{ __('Scan Kupon') }}
+                    </x-nav-link>
+                    @endif
+
+                    <x-nav-link :href="route('riwayat.index')" :active="request()->routeIs('riwayat.*')">
+                        {{ __('Riwayat Penyaluran') }}
+                    </x-nav-link>
+
+
                 </div>
             </div>
 
             <!-- Settings Dropdown -->
-            <div class="hidden sm:flex sm:items-center sm:ms-6">
+            <div class="hidden sm:flex sm:items-center sm:ms-6 font-outfit">
                 <x-dropdown align="right" width="48">
                     <x-slot name="trigger">
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
+                        <button class="inline-flex items-center px-4 py-2 border border-slate-200/50 dark:border-slate-700/50 text-sm leading-4 font-medium rounded-xl text-slate-600 dark:text-slate-300 bg-white/50 dark:bg-slate-800/50 hover:bg-slate-50 hover:text-slate-800 dark:hover:bg-slate-800 dark:hover:text-slate-200 focus:outline-none transition ease-in-out duration-150 backdrop-blur-md shadow-sm">
                             <div>{{ Auth::user()->name }}</div>
 
-                            <div class="ms-1">
-                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                            <div class="ms-2 bg-slate-200/50 dark:bg-slate-700/50 rounded-full p-1">
+                                <svg class="fill-current h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                 </svg>
                             </div>
@@ -60,7 +83,7 @@
 
             <!-- Hamburger -->
             <div class="-me-2 flex items-center sm:hidden">
-                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
+                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-xl text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400 hover:bg-slate-100/50 dark:hover:bg-slate-800/50 focus:outline-none focus:bg-slate-100/50 dark:focus:bg-slate-800/50 focus:text-slate-500 dark:focus:text-slate-400 transition duration-150 ease-in-out backdrop-blur-sm border border-transparent hover:border-slate-200 dark:hover:border-slate-700">
                     <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                         <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                         <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -71,27 +94,43 @@
     </div>
 
     <!-- Responsive Navigation Menu -->
-    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
-        <div class="pt-2 pb-3 space-y-1">
+    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200/50 dark:border-slate-800/50 absolute w-full shadow-lg">
+        <div class="pt-2 pb-3 space-y-1 font-outfit">
             <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                 {{ __('Dashboard') }}
             </x-responsive-nav-link>
             <x-responsive-nav-link :href="route('penerima.index')" :active="request()->routeIs('penerima.index')">
                 {{ __('Daftar Penerima Bantuan') }}
             </x-responsive-nav-link>
+            @if(Auth::user()->role !== 'admin')
+            <x-responsive-nav-link :href="route('laporan.index')" :active="request()->routeIs('laporan.*')">
+                {{ __('Laporan Warga') }}
+            </x-responsive-nav-link>
+            <x-responsive-nav-link :href="route('scan.index')" :active="request()->routeIs('scan.index')">
+                {{ __('Scan Kupon') }}
+            </x-responsive-nav-link>
+            @endif
+            @if(Auth::user()->role === 'admin')
             <x-responsive-nav-link :href="route('ibadah.index')" :active="request()->routeIs('ibadah.index')">
                 {{ __('Daftar Tempat Ibadah') }}
             </x-responsive-nav-link>
+            @endif
+
+            <x-responsive-nav-link :href="route('riwayat.index')" :active="request()->routeIs('riwayat.*')">
+                {{ __('Riwayat Penyaluran') }}
+            </x-responsive-nav-link>
+
+
         </div>
 
         <!-- Responsive Settings Options -->
-        <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
-                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
+        <div class="pt-4 pb-1 border-t border-slate-200/50 dark:border-slate-700/50">
+            <div class="px-4 pb-2">
+                <div class="font-bold font-outfit text-base text-slate-800 dark:text-slate-200">{{ Auth::user()->name }}</div>
+                <div class="font-medium text-sm text-slate-500 dark:text-slate-400">{{ Auth::user()->email }}</div>
             </div>
 
-            <div class="mt-3 space-y-1">
+            <div class="mt-3 space-y-1 font-outfit">
                 <x-responsive-nav-link :href="route('profile.edit')">
                     {{ __('Profile') }}
                 </x-responsive-nav-link>
diff --git a/resources/views/riwayat.blade.php b/resources/views/riwayat.blade.php
new file mode 100644
index 0000000..7598605
--- /dev/null
+++ b/resources/views/riwayat.blade.php
@@ -0,0 +1,127 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Riwayat Penyaluran Bantuan') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-8">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8">
+            
+            <!-- Description & Filter Card -->
+            <div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl overflow-hidden shadow-xl sm:rounded-3xl border border-slate-200/50 dark:border-slate-800/50 p-6 md:p-8">
+                <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+                    <div>
+                        <h3 class="text-2xl font-bold font-outfit text-slate-900 dark:text-white mb-1 tracking-tight">Daftar Pencairan Bantuan</h3>
+                        <p class="text-slate-500 dark:text-slate-400 text-sm mt-1">
+                            Catatan waktu dan identitas penerima yang telah berhasil mencairkan bantuan melalui pemindaian QR Code.
+                        </p>
+                    </div>
+
+                    <form method="GET" action="" class="flex flex-wrap items-center gap-3">
+                        <div class="relative w-full sm:w-auto">
+                            <input type="month" name="filter_periode" id="filter_periode" 
+                                value="{{ request('filter_periode', '') }}"
+                                onchange="this.form.submit()"
+                                class="bg-white dark:bg-slate-800/50 border border-slate-300 text-slate-900 text-sm rounded-xl focus:ring-indigo-500 focus:border-indigo-500 block w-full px-4 py-2.5 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white shadow-sm transition-colors cursor-pointer appearance-none">
+                        </div>
+                        
+                        @if(request('filter_periode'))
+                            <a href="{{ route('riwayat.cetakPdf', ['periode' => request('filter_periode')]) }}" target="_blank" class="w-full sm:w-auto inline-flex items-center justify-center px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 text-white rounded-xl font-medium shadow-lg shadow-emerald-500/30 hover:-translate-y-0.5 transition-all text-sm whitespace-nowrap">
+                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path></svg>
+                                Cetak PDF
+                            </a>
+                        @endif
+                    </form>
+                </div>
+            </div>
+
+            <!-- Cards Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                @forelse($riwayats as $r)
+                    @php
+                        $nama_kk = $r->penerimaBantuan->nama_kepala_keluarga ?? 'Data Terhapus';
+                        $nik = $r->penerimaBantuan && $r->penerimaBantuan->nik_kepala_keluarga
+                            ? substr($r->penerimaBantuan->nik_kepala_keluarga, 0, 6) . '**********'
+                            : '-';
+                        $alamat = $r->penerimaBantuan->alamat ?? '-';
+                        $penyalur = $r->penerimaBantuan && $r->penerimaBantuan->tempat_ibadah
+                            ? $r->penerimaBantuan->tempat_ibadah->nama_tempat : '-';
+                        $isMenunggu = $r->status == 'Menunggu';
+                    @endphp
+                    
+                    <div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-md border {{ $isMenunggu ? 'border-amber-300/50 dark:border-amber-700/50' : 'border-slate-200/80 dark:border-slate-700/80' }} rounded-3xl shadow-lg shadow-slate-200/50 dark:shadow-slate-900/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col overflow-hidden group">
+                        
+                        <!-- Card Header -->
+                        <div class="px-6 py-5 border-b {{ $isMenunggu ? 'border-amber-100 dark:border-amber-800/30 bg-amber-50/80 dark:bg-amber-900/20' : 'border-indigo-100 dark:border-indigo-800/30 bg-indigo-50/80 dark:bg-indigo-900/30' }} flex justify-between items-center transition-colors">
+                            <div class="flex items-center text-sm font-semibold text-slate-900 dark:text-white">
+                                <svg class="w-4 h-4 mr-2 {{ $isMenunggu ? 'text-amber-500' : 'text-indigo-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+                                {{ $r->tanggal_diterima->format('d M Y, H:i') }}
+                            </div>
+                            <span class="px-3 py-1.5 text-xs font-bold rounded-lg {{ $isMenunggu ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300 border border-amber-200 dark:border-amber-800' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800' }}">
+                                {{ $r->status }}
+                            </span>
+                        </div>
+
+                        <!-- Card Body -->
+                        <div class="p-6 flex-grow space-y-4 text-sm">
+                            <div>
+                                <p class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold mb-1">Nama Kepala Keluarga</p>
+                                <p class="text-base font-bold font-outfit text-slate-900 dark:text-white">{{ $nama_kk }}</p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <p class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold mb-1">NIK</p>
+                                    <p class="text-slate-800 dark:text-slate-200 font-mono font-medium">{{ $nik }}</p>
+                                </div>
+                                <div>
+                                    <p class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold mb-1">Penyalur</p>
+                                    <p class="text-slate-800 dark:text-slate-200 truncate font-medium" title="{{ $penyalur }}">{{ $penyalur }}</p>
+                                </div>
+                            </div>
+                            <div class="border-t border-slate-100 dark:border-slate-700/50 pt-3">
+                                <p class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold mb-1">Alamat</p>
+                                <p class="text-slate-800 dark:text-slate-300 line-clamp-2 leading-relaxed" title="{{ $alamat }}">{{ $alamat }}</p>
+                            </div>
+
+                            @if(!empty($r->foto_penyerahan))
+                                <div class="pt-3 border-t border-slate-100 dark:border-slate-700/50">
+                                    <p class="text-xs text-slate-500 dark:text-slate-400 uppercase tracking-wider font-semibold mb-2">Bukti Foto Penyerahan</p>
+                                    <a href="{{ asset('storage/uploads/' . $r->foto_penyerahan) }}" target="_blank" class="block rounded-xl overflow-hidden border border-slate-200 dark:border-slate-700 bg-slate-100 dark:bg-slate-900 hover:opacity-90 transition-all shadow-inner aspect-video relative group">
+                                        <img src="{{ asset('storage/uploads/' . $r->foto_penyerahan) }}" class="w-full h-full object-cover" alt="Bukti Penyerahan">
+                                        <div class="absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-all backdrop-blur-[2px]">
+                                            <div class="bg-white/20 p-2 rounded-full backdrop-blur-md">
+                                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </div>
+                            @endif
+                        </div>
+
+                        <!-- Card Footer -->
+                        @if($isMenunggu)
+                            <div class="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/30 border-t border-slate-200/50 dark:border-slate-700/50 flex justify-end">
+                                <a href="{{ route('riwayat.konfirmasi', $r->id) }}" 
+                                   onclick="return confirm('Setujui bukti ini dan selesaikan penyaluran?')" 
+                                   class="w-full flex justify-center items-center px-5 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl hover:from-indigo-600 hover:to-purple-700 hover:-translate-y-0.5 transition-all shadow-lg shadow-indigo-500/30">
+                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                                    Setujui Penyaluran
+                                </a>
+                            </div>
+                        @endif
+
+                    </div>
+                @empty
+                    <div class="col-span-full flex flex-col items-center justify-center py-16 px-4 bg-white/40 dark:bg-slate-800/40 backdrop-blur-sm rounded-3xl border border-slate-200/50 dark:border-slate-700/50 shadow-sm text-center">
+                        <div class="bg-slate-100 dark:bg-slate-700 rounded-full w-20 h-20 flex items-center justify-center mb-4 shadow-inner">
+                            <svg class="w-10 h-10 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
+                        </div>
+                        <h3 class="text-lg font-bold text-slate-600 dark:text-slate-400 mb-1">Belum ada riwayat pencairan</h3>
+                    </div>
+                @endforelse
+            </div>
+
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/scan.blade.php b/resources/views/scan.blade.php
new file mode 100644
index 0000000..8ccbfd1
--- /dev/null
+++ b/resources/views/scan.blade.php
@@ -0,0 +1,111 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('Scan Kupon Bantuan') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
+                <div class="p-6 text-gray-900 dark:text-gray-100 flex flex-col items-center">
+                    
+                    <div class="text-center mb-6">
+                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Scanner Kupon QR Code</h3>
+                        <p class="text-gray-500 dark:text-gray-400">Arahkan kamera ke QR Code kupon milik penerima bantuan untuk memverifikasi dan memproses pencairan.</p>
+                    </div>
+
+                    <div id="reader-container" class="w-full max-w-lg mx-auto bg-gray-50 dark:bg-gray-900 rounded-2xl overflow-hidden border-2 border-dashed border-gray-300 dark:border-gray-700 p-2">
+                        <div id="reader" style="width: 100%;"></div>
+                    </div>
+
+                    <div id="scan-result" class="mt-6 w-full max-w-lg hidden">
+                        <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center">
+                            <div class="bg-green-100 text-green-600 rounded-full p-2 mr-4">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-green-800">QR Code Ditemukan!</h4>
+                                <p class="text-sm text-green-700 mt-1">Mengarahkan ke halaman konfirmasi...</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="scan-error" class="mt-6 w-full max-w-lg hidden">
+                        <div class="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center">
+                            <div class="bg-red-100 text-red-600 rounded-full p-2 mr-4">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-red-800">QR Code Tidak Valid</h4>
+                                <p class="text-sm text-red-700 mt-1" id="error-message">Ini bukan kupon bantuan yang valid.</p>
+                            </div>
+                        </div>
+                        <button onclick="resumeScanning()" class="mt-3 w-full py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg font-medium transition-colors">
+                            Coba Scan Lagi
+                        </button>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Include html5-qrcode library -->
+    <script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            let html5QrcodeScanner = null;
+
+            function onScanSuccess(decodedText, decodedResult) {
+                // Hentikan scanner sementara
+                if (html5QrcodeScanner) {
+                    html5QrcodeScanner.pause();
+                }
+
+                try {
+                    // Validasi apakah ini URL dari sistem kita (mengandung /konfirmasi)
+                    const url = new URL(decodedText);
+                    
+                    if (url.pathname.includes('/konfirmasi')) {
+                        // Tampilkan sukses
+                        document.getElementById('scan-result').classList.remove('hidden');
+                        document.getElementById('scan-error').classList.add('hidden');
+                        
+                        // Redirect ke URL konfirmasi setelah 1 detik
+                        setTimeout(() => {
+                            window.location.href = decodedText;
+                        }, 1000);
+                    } else {
+                        throw new Error("Bukan QR Code Kupon dari sistem ini.");
+                    }
+                } catch (e) {
+                    // Tampilkan error
+                    document.getElementById('scan-result').classList.add('hidden');
+                    document.getElementById('scan-error').classList.remove('hidden');
+                }
+            }
+
+            function onScanFailure(error) {
+                // handle scan failure, usually better to ignore and keep scanning
+                // console.warn(`Code scan error = ${error}`);
+            }
+
+            html5QrcodeScanner = new Html5QrcodeScanner(
+                "reader",
+                { fps: 10, qrbox: {width: 250, height: 250} },
+                /* verbose= */ false
+            );
+            
+            html5QrcodeScanner.render(onScanSuccess, onScanFailure);
+
+            window.resumeScanning = function() {
+                document.getElementById('scan-error').classList.add('hidden');
+                if (html5QrcodeScanner) {
+                    html5QrcodeScanner.resume();
+                }
+            };
+        });
+    </script>
+</x-app-layout>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index b7355d7..d38edc9 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -1,277 +1,238 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ config('app.name', 'WebGIS Pengentasan Kemiskinan') }}</title>
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800|outfit:500,600,700,800" rel="stylesheet" />
 
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+    <!-- Scripts / Styles -->
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 
-        <!-- Styles / Scripts -->
-        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
-            @vite(['resources/css/app.css', 'resources/js/app.js'])
-        @else
-            <style>
-                /*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(.971 .013 17.38);--color-red-100:oklch(.936 .032 17.717);--color-red-200:oklch(.885 .062 18.334);--color-red-300:oklch(.808 .114 19.571);--color-red-400:oklch(.704 .191 22.216);--color-red-500:oklch(.637 .237 25.331);--color-red-600:oklch(.577 .245 27.325);--color-red-700:oklch(.505 .213 27.518);--color-red-800:oklch(.444 .177 26.899);--color-red-900:oklch(.396 .141 25.723);--color-red-950:oklch(.258 .092 26.042);--color-orange-50:oklch(.98 .016 73.684);--color-orange-100:oklch(.954 .038 75.164);--color-orange-200:oklch(.901 .076 70.697);--color-orange-300:oklch(.837 .128 66.29);--color-orange-400:oklch(.75 .183 55.934);--color-orange-500:oklch(.705 .213 47.604);--color-orange-600:oklch(.646 .222 41.116);--color-orange-700:oklch(.553 .195 38.402);--color-orange-800:oklch(.47 .157 37.304);--color-orange-900:oklch(.408 .123 38.172);--color-orange-950:oklch(.266 .079 36.259);--color-amber-50:oklch(.987 .022 95.277);--color-amber-100:oklch(.962 .059 95.617);--color-amber-200:oklch(.924 .12 95.746);--color-amber-300:oklch(.879 .169 91.605);--color-amber-400:oklch(.828 .189 84.429);--color-amber-500:oklch(.769 .188 70.08);--color-amber-600:oklch(.666 .179 58.318);--color-amber-700:oklch(.555 .163 48.998);--color-amber-800:oklch(.473 .137 46.201);--color-amber-900:oklch(.414 .112 45.904);--color-amber-950:oklch(.279 .077 45.635);--color-yellow-50:oklch(.987 .026 102.212);--color-yellow-100:oklch(.973 .071 103.193);--color-yellow-200:oklch(.945 .129 101.54);--color-yellow-300:oklch(.905 .182 98.111);--color-yellow-400:oklch(.852 .199 91.936);--color-yellow-500:oklch(.795 .184 86.047);--color-yellow-600:oklch(.681 .162 75.834);--color-yellow-700:oklch(.554 .135 66.442);--color-yellow-800:oklch(.476 .114 61.907);--color-yellow-900:oklch(.421 .095 57.708);--color-yellow-950:oklch(.286 .066 53.813);--color-lime-50:oklch(.986 .031 120.757);--color-lime-100:oklch(.967 .067 122.328);--color-lime-200:oklch(.938 .127 124.321);--color-lime-300:oklch(.897 .196 126.665);--color-lime-400:oklch(.841 .238 128.85);--color-lime-500:oklch(.768 .233 130.85);--color-lime-600:oklch(.648 .2 131.684);--color-lime-700:oklch(.532 .157 131.589);--color-lime-800:oklch(.453 .124 130.933);--color-lime-900:oklch(.405 .101 131.063);--color-lime-950:oklch(.274 .072 132.109);--color-green-50:oklch(.982 .018 155.826);--color-green-100:oklch(.962 .044 156.743);--color-green-200:oklch(.925 .084 155.995);--color-green-300:oklch(.871 .15 154.449);--color-green-400:oklch(.792 .209 151.711);--color-green-500:oklch(.723 .219 149.579);--color-green-600:oklch(.627 .194 149.214);--color-green-700:oklch(.527 .154 150.069);--color-green-800:oklch(.448 .119 151.328);--color-green-900:oklch(.393 .095 152.535);--color-green-950:oklch(.266 .065 152.934);--color-emerald-50:oklch(.979 .021 166.113);--color-emerald-100:oklch(.95 .052 163.051);--color-emerald-200:oklch(.905 .093 164.15);--color-emerald-300:oklch(.845 .143 164.978);--color-emerald-400:oklch(.765 .177 163.223);--color-emerald-500:oklch(.696 .17 162.48);--color-emerald-600:oklch(.596 .145 163.225);--color-emerald-700:oklch(.508 .118 165.612);--color-emerald-800:oklch(.432 .095 166.913);--color-emerald-900:oklch(.378 .077 168.94);--color-emerald-950:oklch(.262 .051 172.552);--color-teal-50:oklch(.984 .014 180.72);--color-teal-100:oklch(.953 .051 180.801);--color-teal-200:oklch(.91 .096 180.426);--color-teal-300:oklch(.855 .138 181.071);--color-teal-400:oklch(.777 .152 181.912);--color-teal-500:oklch(.704 .14 182.503);--color-teal-600:oklch(.6 .118 184.704);--color-teal-700:oklch(.511 .096 186.391);--color-teal-800:oklch(.437 .078 188.216);--color-teal-900:oklch(.386 .063 188.416);--color-teal-950:oklch(.277 .046 192.524);--color-cyan-50:oklch(.984 .019 200.873);--color-cyan-100:oklch(.956 .045 203.388);--color-cyan-200:oklch(.917 .08 205.041);--color-cyan-300:oklch(.865 .127 207.078);--color-cyan-400:oklch(.789 .154 211.53);--color-cyan-500:oklch(.715 .143 215.221);--color-cyan-600:oklch(.609 .126 221.723);--color-cyan-700:oklch(.52 .105 223.128);--color-cyan-800:oklch(.45 .085 224.283);--color-cyan-900:oklch(.398 .07 227.392);--color-cyan-950:oklch(.302 .056 229.695);--color-sky-50:oklch(.977 .013 236.62);--color-sky-100:oklch(.951 .026 236.824);--color-sky-200:oklch(.901 .058 230.902);--color-sky-300:oklch(.828 .111 230.318);--color-sky-400:oklch(.746 .16 232.661);--color-sky-500:oklch(.685 .169 237.323);--color-sky-600:oklch(.588 .158 241.966);--color-sky-700:oklch(.5 .134 242.749);--color-sky-800:oklch(.443 .11 240.79);--color-sky-900:oklch(.391 .09 240.876);--color-sky-950:oklch(.293 .066 243.157);--color-blue-50:oklch(.97 .014 254.604);--color-blue-100:oklch(.932 .032 255.585);--color-blue-200:oklch(.882 .059 254.128);--color-blue-300:oklch(.809 .105 251.813);--color-blue-400:oklch(.707 .165 254.624);--color-blue-500:oklch(.623 .214 259.815);--color-blue-600:oklch(.546 .245 262.881);--color-blue-700:oklch(.488 .243 264.376);--color-blue-800:oklch(.424 .199 265.638);--color-blue-900:oklch(.379 .146 265.522);--color-blue-950:oklch(.282 .091 267.935);--color-indigo-50:oklch(.962 .018 272.314);--color-indigo-100:oklch(.93 .034 272.788);--color-indigo-200:oklch(.87 .065 274.039);--color-indigo-300:oklch(.785 .115 274.713);--color-indigo-400:oklch(.673 .182 276.935);--color-indigo-500:oklch(.585 .233 277.117);--color-indigo-600:oklch(.511 .262 276.966);--color-indigo-700:oklch(.457 .24 277.023);--color-indigo-800:oklch(.398 .195 277.366);--color-indigo-900:oklch(.359 .144 278.697);--color-indigo-950:oklch(.257 .09 281.288);--color-violet-50:oklch(.969 .016 293.756);--color-violet-100:oklch(.943 .029 294.588);--color-violet-200:oklch(.894 .057 293.283);--color-violet-300:oklch(.811 .111 293.571);--color-violet-400:oklch(.702 .183 293.541);--color-violet-500:oklch(.606 .25 292.717);--color-violet-600:oklch(.541 .281 293.009);--color-violet-700:oklch(.491 .27 292.581);--color-violet-800:oklch(.432 .232 292.759);--color-violet-900:oklch(.38 .189 293.745);--color-violet-950:oklch(.283 .141 291.089);--color-purple-50:oklch(.977 .014 308.299);--color-purple-100:oklch(.946 .033 307.174);--color-purple-200:oklch(.902 .063 306.703);--color-purple-300:oklch(.827 .119 306.383);--color-purple-400:oklch(.714 .203 305.504);--color-purple-500:oklch(.627 .265 303.9);--color-purple-600:oklch(.558 .288 302.321);--color-purple-700:oklch(.496 .265 301.924);--color-purple-800:oklch(.438 .218 303.724);--color-purple-900:oklch(.381 .176 304.987);--color-purple-950:oklch(.291 .149 302.717);--color-fuchsia-50:oklch(.977 .017 320.058);--color-fuchsia-100:oklch(.952 .037 318.852);--color-fuchsia-200:oklch(.903 .076 319.62);--color-fuchsia-300:oklch(.833 .145 321.434);--color-fuchsia-400:oklch(.74 .238 322.16);--color-fuchsia-500:oklch(.667 .295 322.15);--color-fuchsia-600:oklch(.591 .293 322.896);--color-fuchsia-700:oklch(.518 .253 323.949);--color-fuchsia-800:oklch(.452 .211 324.591);--color-fuchsia-900:oklch(.401 .17 325.612);--color-fuchsia-950:oklch(.293 .136 325.661);--color-pink-50:oklch(.971 .014 343.198);--color-pink-100:oklch(.948 .028 342.258);--color-pink-200:oklch(.899 .061 343.231);--color-pink-300:oklch(.823 .12 346.018);--color-pink-400:oklch(.718 .202 349.761);--color-pink-500:oklch(.656 .241 354.308);--color-pink-600:oklch(.592 .249 .584);--color-pink-700:oklch(.525 .223 3.958);--color-pink-800:oklch(.459 .187 3.815);--color-pink-900:oklch(.408 .153 2.432);--color-pink-950:oklch(.284 .109 3.907);--color-rose-50:oklch(.969 .015 12.422);--color-rose-100:oklch(.941 .03 12.58);--color-rose-200:oklch(.892 .058 10.001);--color-rose-300:oklch(.81 .117 11.638);--color-rose-400:oklch(.712 .194 13.428);--color-rose-500:oklch(.645 .246 16.439);--color-rose-600:oklch(.586 .253 17.585);--color-rose-700:oklch(.514 .222 16.935);--color-rose-800:oklch(.455 .188 13.697);--color-rose-900:oklch(.41 .159 10.272);--color-rose-950:oklch(.271 .105 12.094);--color-slate-50:oklch(.984 .003 247.858);--color-slate-100:oklch(.968 .007 247.896);--color-slate-200:oklch(.929 .013 255.508);--color-slate-300:oklch(.869 .022 252.894);--color-slate-400:oklch(.704 .04 256.788);--color-slate-500:oklch(.554 .046 257.417);--color-slate-600:oklch(.446 .043 257.281);--color-slate-700:oklch(.372 .044 257.287);--color-slate-800:oklch(.279 .041 260.031);--color-slate-900:oklch(.208 .042 265.755);--color-slate-950:oklch(.129 .042 264.695);--color-gray-50:oklch(.985 .002 247.839);--color-gray-100:oklch(.967 .003 264.542);--color-gray-200:oklch(.928 .006 264.531);--color-gray-300:oklch(.872 .01 258.338);--color-gray-400:oklch(.707 .022 261.325);--color-gray-500:oklch(.551 .027 264.364);--color-gray-600:oklch(.446 .03 256.802);--color-gray-700:oklch(.373 .034 259.733);--color-gray-800:oklch(.278 .033 256.848);--color-gray-900:oklch(.21 .034 264.665);--color-gray-950:oklch(.13 .028 261.692);--color-zinc-50:oklch(.985 0 0);--color-zinc-100:oklch(.967 .001 286.375);--color-zinc-200:oklch(.92 .004 286.32);--color-zinc-300:oklch(.871 .006 286.286);--color-zinc-400:oklch(.705 .015 286.067);--color-zinc-500:oklch(.552 .016 285.938);--color-zinc-600:oklch(.442 .017 285.786);--color-zinc-700:oklch(.37 .013 285.805);--color-zinc-800:oklch(.274 .006 286.033);--color-zinc-900:oklch(.21 .006 285.885);--color-zinc-950:oklch(.141 .005 285.823);--color-neutral-50:oklch(.985 0 0);--color-neutral-100:oklch(.97 0 0);--color-neutral-200:oklch(.922 0 0);--color-neutral-300:oklch(.87 0 0);--color-neutral-400:oklch(.708 0 0);--color-neutral-500:oklch(.556 0 0);--color-neutral-600:oklch(.439 0 0);--color-neutral-700:oklch(.371 0 0);--color-neutral-800:oklch(.269 0 0);--color-neutral-900:oklch(.205 0 0);--color-neutral-950:oklch(.145 0 0);--color-stone-50:oklch(.985 .001 106.423);--color-stone-100:oklch(.97 .001 106.424);--color-stone-200:oklch(.923 .003 48.717);--color-stone-300:oklch(.869 .005 56.366);--color-stone-400:oklch(.709 .01 56.259);--color-stone-500:oklch(.553 .013 58.071);--color-stone-600:oklch(.444 .011 73.639);--color-stone-700:oklch(.374 .01 67.558);--color-stone-800:oklch(.268 .007 34.298);--color-stone-900:oklch(.216 .006 56.043);--color-stone-950:oklch(.147 .004 49.25);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-4xl:2rem;--shadow-2xs:0 1px #0000000d;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--inset-shadow-2xs:inset 0 1px #0000000d;--inset-shadow-xs:inset 0 1px 1px #0000000d;--inset-shadow-sm:inset 0 2px 4px #0000000d;--drop-shadow-xs:0 1px 1px #0000000d;--drop-shadow-sm:0 1px 2px #00000026;--drop-shadow-md:0 3px 3px #0000001f;--drop-shadow-lg:0 4px 4px #00000026;--drop-shadow-xl:0 9px 7px #0000001a;--drop-shadow-2xl:0 25px 25px #00000026;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-xs:4px;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--perspective-dramatic:100px;--perspective-near:300px;--perspective-normal:500px;--perspective-midrange:800px;--perspective-distant:1200px;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.-mt-\[4\.9rem\]{margin-top:-4.9rem}.-mb-px{margin-bottom:-1px}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.-ml-8{margin-left:calc(var(--spacing)*-8)}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-\[335\/376\]{aspect-ratio:335/376}.h-1{height:calc(var(--spacing)*1)}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-2\.5{height:calc(var(--spacing)*2.5)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-14{height:calc(var(--spacing)*14)}.h-14\.5{height:calc(var(--spacing)*14.5)}.min-h-screen{min-height:100vh}.w-1{width:calc(var(--spacing)*1)}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-2{width:calc(var(--spacing)*2)}.w-2\.5{width:calc(var(--spacing)*2.5)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-\[448px\]{width:448px}.w-full{width:100%}.max-w-\[335px\]{max-width:335px}.max-w-none{max-width:none}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-br-lg{border-bottom-right-radius:var(--radius-lg)}.rounded-bl-lg{border-bottom-left-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\[\#19140035\]{border-color:#19140035}.border-\[\#e3e3e0\]{border-color:#e3e3e0}.border-black{border-color:var(--color-black)}.border-transparent{border-color:#0000}.bg-\[\#1b1b18\]{background-color:#1b1b18}.bg-\[\#FDFDFC\]{background-color:#fdfdfc}.bg-\[\#dbdbd7\]{background-color:#dbdbd7}.bg-\[\#fff2f2\]{background-color:#fff2f2}.bg-white{background-color:var(--color-white)}.p-6{padding:calc(var(--spacing)*6)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.pb-12{padding-bottom:calc(var(--spacing)*12)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[13px\]{font-size:13px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-\[\#1b1b18\]{color:#1b1b18}.text-\[\#706f6c\]{color:#706f6c}.text-\[\#F53003\],.text-\[\#f53003\]{color:#f53003}.text-white{color:var(--color-white)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-100{opacity:1}.shadow-\[0px_0px_1px_0px_rgba\(0\,0\,0\,0\.03\)\,0px_1px_2px_0px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0px 0px 1px 0px var(--tw-shadow-color,#00000008),0px 1px 2px 0px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[inset_0px_0px_0px_1px_rgba\(26\,26\,0\,0\.16\)\]{--tw-shadow:inset 0px 0px 0px 1px var(--tw-shadow-color,#1a1a0029);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.\!filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)!important}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-300{transition-delay:.3s}.duration-750{--tw-duration:.75s;transition-duration:.75s}.not-has-\[nav\]\:hidden:not(:has(:is(nav))){display:none}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-0:before{content:var(--tw-content);top:calc(var(--spacing)*0)}.before\:top-1\/2:before{content:var(--tw-content);top:50%}.before\:bottom-0:before{content:var(--tw-content);bottom:calc(var(--spacing)*0)}.before\:bottom-1\/2:before{content:var(--tw-content);bottom:50%}.before\:left-\[0\.4rem\]:before{content:var(--tw-content);left:.4rem}.before\:border-l:before{content:var(--tw-content);border-left-style:var(--tw-border-style);border-left-width:1px}.before\:border-\[\#e3e3e0\]:before{content:var(--tw-content);border-color:#e3e3e0}@media (hover:hover){.hover\:border-\[\#1915014a\]:hover{border-color:#1915014a}.hover\:border-\[\#19140035\]:hover{border-color:#19140035}.hover\:border-black:hover{border-color:var(--color-black)}.hover\:bg-black:hover{background-color:var(--color-black)}}@media (width>=64rem){.lg\:-mt-\[6\.6rem\]{margin-top:-6.6rem}.lg\:mb-0{margin-bottom:calc(var(--spacing)*0)}.lg\:mb-6{margin-bottom:calc(var(--spacing)*6)}.lg\:-ml-px{margin-left:-1px}.lg\:ml-0{margin-left:calc(var(--spacing)*0)}.lg\:block{display:block}.lg\:aspect-auto{aspect-ratio:auto}.lg\:w-\[438px\]{width:438px}.lg\:max-w-4xl{max-width:var(--container-4xl)}.lg\:grow{flex-grow:1}.lg\:flex-row{flex-direction:row}.lg\:justify-center{justify-content:center}.lg\:rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.lg\:rounded-tl-lg{border-top-left-radius:var(--radius-lg)}.lg\:rounded-r-lg{border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.lg\:rounded-br-none{border-bottom-right-radius:0}.lg\:p-8{padding:calc(var(--spacing)*8)}.lg\:p-20{padding:calc(var(--spacing)*20)}}@media (prefers-color-scheme:dark){.dark\:block{display:block}.dark\:hidden{display:none}.dark\:border-\[\#3E3E3A\]{border-color:#3e3e3a}.dark\:border-\[\#eeeeec\]{border-color:#eeeeec}.dark\:bg-\[\#0a0a0a\]{background-color:#0a0a0a}.dark\:bg-\[\#1D0002\]{background-color:#1d0002}.dark\:bg-\[\#3E3E3A\]{background-color:#3e3e3a}.dark\:bg-\[\#161615\]{background-color:#161615}.dark\:bg-\[\#eeeeec\]{background-color:#eeeeec}.dark\:text-\[\#1C1C1A\]{color:#1c1c1a}.dark\:text-\[\#A1A09A\]{color:#a1a09a}.dark\:text-\[\#EDEDEC\]{color:#ededec}.dark\:text-\[\#F61500\]{color:#f61500}.dark\:text-\[\#FF4433\]{color:#f43}.dark\:shadow-\[inset_0px_0px_0px_1px_\#fffaed2d\]{--tw-shadow:inset 0px 0px 0px 1px var(--tw-shadow-color,#fffaed2d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dark\:before\:border-\[\#3E3E3A\]:before{content:var(--tw-content);border-color:#3e3e3a}@media (hover:hover){.dark\:hover\:border-\[\#3E3E3A\]:hover{border-color:#3e3e3a}.dark\:hover\:border-\[\#62605b\]:hover{border-color:#62605b}.dark\:hover\:border-white:hover{border-color:var(--color-white)}.dark\:hover\:bg-white:hover{background-color:var(--color-white)}}}@starting-style{.starting\:translate-y-4{--tw-translate-y:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}}@starting-style{.starting\:translate-y-6{--tw-translate-y:calc(var(--spacing)*6);translate:var(--tw-translate-x)var(--tw-translate-y)}}@starting-style{.starting\:opacity-0{opacity:0}}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"*";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"*";inherits:false;initial-value:rotateZ(0)}@property --tw-skew-x{syntax:"*";inherits:false;initial-value:skewX(0)}@property --tw-skew-y{syntax:"*";inherits:false;initial-value:skewY(0)}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
-            </style>
-        @endif
-    </head>
-    <body class="bg-[#FDFDFC] dark:bg-[#0a0a0a] text-[#1b1b18] flex p-6 lg:p-8 items-center lg:justify-center min-h-screen flex-col">
-        <header class="w-full lg:max-w-4xl max-w-[335px] text-sm mb-6 not-has-[nav]:hidden">
-            @if (Route::has('login'))
-                <nav class="flex items-center justify-end gap-4">
-                    @auth
-                        <a
-                            href="{{ url('/dashboard') }}"
-                            class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal"
-                        >
-                            Dashboard
-                        </a>
-                    @else
-                        <a
-                            href="{{ route('login') }}"
-                            class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] text-[#1b1b18] border border-transparent hover:border-[#19140035] dark:hover:border-[#3E3E3A] rounded-sm text-sm leading-normal"
-                        >
-                            Log in
-                        </a>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: 'Outfit', sans-serif;
+        }
+        .bg-grid-pattern {
+            background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
+                              linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        .dark .bg-grid-pattern {
+            background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+                              linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
+        }
+        .blob-1 {
+            position: absolute;
+            top: -10%;
+            left: -10%;
+            width: 500px;
+            height: 500px;
+            background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(transparent) 70%);
+            border-radius: 50%;
+            filter: blur(40px);
+            z-index: -1;
+        }
+        .blob-2 {
+            position: absolute;
+            bottom: -10%;
+            right: -10%;
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, rgba(transparent) 70%);
+            border-radius: 50%;
+            filter: blur(40px);
+            z-index: -1;
+        }
+        .dark .blob-1 { background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, rgba(transparent) 70%); }
+        .dark .blob-2 { background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, rgba(transparent) 70%); }
+        
+        .animate-fade-in-up {
+            animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        .delay-100 { animation-delay: 100ms; }
+        .delay-200 { animation-delay: 200ms; }
+        .delay-300 { animation-delay: 300ms; }
 
-                        @if (Route::has('register'))
-                            <a
-                                href="{{ route('register') }}"
-                                class="inline-block px-5 py-1.5 dark:text-[#EDEDEC] border-[#19140035] hover:border-[#1915014a] border text-[#1b1b18] dark:border-[#3E3E3A] dark:hover:border-[#62605b] rounded-sm text-sm leading-normal">
-                                Register
-                            </a>
-                        @endif
-                    @endauth
-                </nav>
-            @endif
-        </header>
-        <div class="flex items-center justify-center w-full transition-opacity opacity-100 duration-750 lg:grow starting:opacity-0">
-            <main class="flex max-w-[335px] w-full flex-col-reverse lg:max-w-4xl lg:flex-row">
-                <div class="text-[13px] leading-[20px] flex-1 p-6 pb-12 lg:p-20 bg-white dark:bg-[#161615] dark:text-[#EDEDEC] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d] rounded-bl-lg rounded-br-lg lg:rounded-tl-lg lg:rounded-br-none">
-                    <h1 class="mb-1 font-medium">Let's get started</h1>
-                    <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">Laravel has an incredibly rich ecosystem. <br>We suggest starting with the following.</p>
-                    <ul class="flex flex-col mb-4 lg:mb-6">
-                        <li class="flex items-center gap-4 py-2 relative before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A] before:top-1/2 before:bottom-0 before:left-[0.4rem] before:absolute">
-                            <span class="relative py-1 bg-white dark:bg-[#161615]">
-                                <span class="flex items-center justify-center rounded-full bg-[#FDFDFC] dark:bg-[#161615] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] w-3.5 h-3.5 border dark:border-[#3E3E3A] border-[#e3e3e0]">
-                                    <span class="rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A] w-1.5 h-1.5"></span>
-                                </span>
-                            </span>
-                            <span>
-                                Read the
-                                <a href="https://laravel.com/docs" target="_blank" class="inline-flex items-center space-x-1 font-medium underline underline-offset-4 text-[#f53003] dark:text-[#FF4433] ml-1">
-                                    <span>Documentation</span>
-                                    <svg
-                                        width="10"
-                                        height="11"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="w-2.5 h-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                        <li class="flex items-center gap-4 py-2 relative before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A] before:bottom-1/2 before:top-0 before:left-[0.4rem] before:absolute">
-                            <span class="relative py-1 bg-white dark:bg-[#161615]">
-                                <span class="flex items-center justify-center rounded-full bg-[#FDFDFC] dark:bg-[#161615] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] w-3.5 h-3.5 border dark:border-[#3E3E3A] border-[#e3e3e0]">
-                                    <span class="rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A] w-1.5 h-1.5"></span>
-                                </span>
-                            </span>
-                            <span>
-                                Watch video tutorials at
-                                <a href="https://laracasts.com" target="_blank" class="inline-flex items-center space-x-1 font-medium underline underline-offset-4 text-[#f53003] dark:text-[#FF4433] ml-1">
-                                    <span>Laracasts</span>
-                                    <svg
-                                        width="10"
-                                        height="11"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="w-2.5 h-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                    </ul>
-                    <ul class="flex gap-3 text-sm leading-normal">
-                        <li>
-                            <a href="https://cloud.laravel.com" target="_blank" class="inline-block dark:bg-[#eeeeec] dark:border-[#eeeeec] dark:text-[#1C1C1A] dark:hover:bg-white dark:hover:border-white hover:bg-black hover:border-black px-5 py-1.5 bg-[#1b1b18] rounded-sm border border-black text-white text-sm leading-normal">
-                                Deploy now
-                            </a>
-                        </li>
-                    </ul>
+        @keyframes fadeInUp {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+<body class="antialiased bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 relative overflow-x-hidden selection:bg-indigo-500 selection:text-white">
+
+    <!-- Background Elements -->
+    <div class="fixed inset-0 bg-grid-pattern pointer-events-none z-[-2]"></div>
+    <div class="fixed inset-0 pointer-events-none z-[-1] overflow-hidden">
+        <div class="blob-1"></div>
+        <div class="blob-2"></div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 backdrop-blur-md bg-white/70 dark:bg-slate-900/70 border-b border-slate-200/50 dark:border-slate-800/50 transition-all duration-300">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between items-center h-20">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                    </div>
+                    <span class="font-outfit font-bold text-xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
+                        WebGIS Kesra
+                    </span>
                 </div>
-                <div class="bg-[#fff2f2] dark:bg-[#1D0002] relative lg:-ml-px -mb-px lg:mb-0 rounded-t-lg lg:rounded-t-none lg:rounded-r-lg aspect-[335/376] lg:aspect-auto w-full lg:w-[438px] shrink-0 overflow-hidden">
-                    {{-- Laravel Logo --}}
-                    <svg class="w-full text-[#F53003] dark:text-[#F61500] transition-all translate-y-0 opacity-100 max-w-none duration-750 starting:opacity-0 starting:translate-y-6" viewBox="0 0 438 104" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z" fill="currentColor" />
-                        <path d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z" fill="currentColor" />
-                        <path d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z" fill="currentColor" />
-                        <path d="M438 -3H421.694V102.197H438V-3Z" fill="currentColor" />
-                        <path d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z" fill="currentColor" />
-                        <path d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z" fill="currentColor" />
-                        <path d="M376.571 30.3656C356.603 30.3656 340.797 46.8497 340.797 67.1828C340.797 89.6597 356.094 104 378.661 104C391.29 104 399.354 99.1488 409.206 88.5848L398.189 80.0226C398.183 80.031 389.874 90.9895 377.468 90.9895C363.048 90.9895 356.977 79.3111 356.977 73.269H411.075C413.917 50.1328 398.775 30.3656 376.571 30.3656ZM357.02 61.0967C357.145 59.7487 359.023 43.3761 376.442 43.3761C393.861 43.3761 395.978 59.7464 396.099 61.0967H357.02Z" fill="currentColor" />
-                    </svg>
+                
+                @if (Route::has('login'))
+                    <div class="flex items-center gap-4">
+                        @auth
+                            <a href="{{ url('/dashboard') }}" class="px-5 py-2.5 rounded-full bg-slate-900 text-white dark:bg-white dark:text-slate-900 font-medium hover:scale-105 hover:shadow-lg transition-all duration-300">
+                                Dashboard
+                            </a>
+                        @else
+                            <a href="{{ route('login') }}" class="px-5 py-2.5 rounded-full font-medium text-slate-700 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                                Masuk
+                            </a>
+                            @if (Route::has('register'))
+                                <a href="{{ route('register') }}" class="px-6 py-2.5 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium hover:shadow-lg hover:shadow-indigo-500/30 hover:-translate-y-0.5 transition-all duration-300">
+                                    Daftar Sekarang
+                                </a>
+                            @endif
+                        @endauth
+                    </div>
+                @endif
+            </div>
+        </div>
+    </nav>
 
-                    {{-- Light Mode 12 SVG --}}
-                    <svg class="w-[448px] max-w-none relative -mt-[4.9rem] -ml-8 lg:ml-0 lg:-mt-[6.6rem] dark:hidden" viewBox="0 0 440 376" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z" fill="black" />
-                            <path d="M9.11884 226.339L-13.7396 226.338L-42.7286 176.132L43.0733 176.135L175.595 405.649L112.651 405.647L9.11884 226.339Z" fill="black" />
-                            <path d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z" stroke="#1B1B18" stroke-width="1" />
-                            <path d="M9.11884 226.339L-13.7396 226.338L-42.7286 176.132L43.0733 176.135L175.595 405.649L112.651 405.647L9.11884 226.339Z" stroke="#1B1B18" stroke-width="1" />
-                            <path d="M204.592 327.449L204.923 327.449C211.769 320.564 222.094 311.479 235.897 300.196C249.258 288.912 259.306 279.923 266.042 273.23C272.668 266.345 277.195 259.077 279.624 251.427C282.053 243.777 280.893 235.839 276.145 227.615C270.844 218.435 263.39 211.071 253.782 205.524C244.285 199.786 234.236 196.917 223.635 196.916C213.255 196.916 206.464 199.689 203.262 205.235C199.949 210.59 201.054 218.049 206.575 227.612L141.975 227.61C132.699 211.544 128.723 197.2 130.048 184.577C131.593 171.954 137.887 162.2 148.93 155.315C160.083 148.239 174.935 144.701 193.487 144.702C212.922 144.703 232.192 148.242 251.296 155.319C270.289 162.205 287.627 171.96 303.308 184.583C318.989 197.207 331.468 211.552 340.745 227.618C349.358 242.536 353.169 255.637 352.175 266.921C351.403 278.205 347.704 288.055 341.078 296.47C334.674 304.885 324.736 315.213 311.264 327.453L393.422 327.456L422.246 377.375L233.415 377.368L204.592 327.449Z" fill="#F8B803" />
-                            <path d="M25.447 198.058L2.58852 198.057L-26.4005 147.851L59.4015 147.854L191.923 377.368L128.979 377.365L25.447 198.058Z" fill="#F8B803" />
-                            <path d="M204.592 327.449L204.923 327.449C211.769 320.564 222.094 311.479 235.897 300.196C249.258 288.912 259.306 279.923 266.042 273.23C272.668 266.345 277.195 259.077 279.624 251.427C282.053 243.777 280.893 235.839 276.145 227.615C270.844 218.435 263.39 211.071 253.782 205.524C244.285 199.786 234.236 196.917 223.635 196.916C213.255 196.916 206.464 199.689 203.262 205.235C199.949 210.59 201.054 218.049 206.575 227.612L141.975 227.61C132.699 211.544 128.723 197.2 130.048 184.577C131.593 171.954 137.887 162.2 148.93 155.315C160.083 148.239 174.935 144.701 193.487 144.702C212.922 144.703 232.192 148.242 251.296 155.319C270.289 162.205 287.627 171.96 303.308 184.583C318.989 197.207 331.468 211.552 340.745 227.618C349.358 242.536 353.169 255.637 352.175 266.921C351.403 278.205 347.704 288.055 341.078 296.47C334.674 304.885 324.736 315.213 311.264 327.453L393.422 327.456L422.246 377.375L233.415 377.368L204.592 327.449Z" stroke="#1B1B18" stroke-width="1" />
-                            <path d="M25.447 198.058L2.58852 198.057L-26.4005 147.851L59.4015 147.854L191.923 377.368L128.979 377.365L25.447 198.058Z" stroke="#1B1B18" stroke-width="1" />
-                        </g>
-                        <g style="mix-blend-mode: hard-light" class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z" fill="#F0ACB8" />
-                            <path d="M38.197 175.972L15.3385 175.971L-13.6505 125.765L72.1515 125.768L204.673 355.282L141.729 355.279L38.197 175.972Z" fill="#F0ACB8" />
-                            <path d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z" stroke="#1B1B18" stroke-width="1" />
-                            <path d="M38.197 175.972L15.3385 175.971L-13.6505 125.765L72.1515 125.768L204.673 355.282L141.729 355.279L38.197 175.972Z" stroke="#1B1B18" stroke-width="1" />
-                        </g>
-                        <g style="mix-blend-mode: plus-darker" class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z" fill="#F3BEC7" />
-                            <path d="M51.8063 152.402L28.9479 152.401L-0.0411453 102.195L85.7608 102.198L218.282 331.711L155.339 331.709L51.8063 152.402Z" fill="#F3BEC7" />
-                            <path d="M230.951 281.792L231.282 281.793C238.128 274.907 248.453 265.823 262.256 254.539C275.617 243.256 285.666 234.267 292.402 227.573C299.027 220.688 303.554 213.421 305.983 205.771C308.412 198.12 307.253 190.183 302.504 181.959C297.203 172.778 289.749 165.415 280.142 159.868C270.645 154.13 260.596 151.26 249.995 151.26C239.615 151.26 232.823 154.033 229.621 159.579C226.309 164.934 227.413 172.393 232.935 181.956L168.335 181.954C159.058 165.888 155.082 151.543 156.407 138.92C157.953 126.298 164.247 116.544 175.289 109.659C186.442 102.583 201.294 99.045 219.846 99.0457C239.281 99.0464 258.551 102.585 277.655 109.663C296.649 116.549 313.986 126.303 329.667 138.927C345.349 151.551 357.827 165.895 367.104 181.961C375.718 196.88 379.528 209.981 378.535 221.265C377.762 232.549 374.063 242.399 367.438 250.814C361.033 259.229 351.095 269.557 337.624 281.796L419.782 281.8L448.605 331.719L259.774 331.712L230.951 281.792Z" stroke="#1B1B18" stroke-width="1" />
-                            <path d="M51.8063 152.402L28.9479 152.401L-0.0411453 102.195L85.7608 102.198L218.282 331.711L155.339 331.709L51.8063 152.402Z" stroke="#1B1B18" stroke-width="1" />
-                        </g>
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M9.32197 225.972L-13.5365 225.971L-42.5255 175.765L43.2765 175.768L175.798 405.282L112.854 405.279L9.32197 225.972Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M345.247 111.915C329.566 99.2919 312.229 89.5371 293.235 82.6512L235.167 183.228C254.161 190.114 271.498 199.869 287.179 212.492L345.247 111.915Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M382.686 154.964C373.41 138.898 360.931 124.553 345.25 111.93L287.182 212.506C302.863 225.13 315.342 239.475 324.618 255.541L382.686 154.964Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M293.243 82.6472C274.139 75.57 254.869 72.031 235.434 72.0303L177.366 172.607C196.801 172.608 216.071 176.147 235.175 183.224L293.243 82.6472Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M394.118 194.257C395.112 182.973 391.301 169.872 382.688 154.953L324.619 255.53C333.233 270.448 337.044 283.55 336.05 294.834L394.118 194.257Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M235.432 72.0311C216.88 72.0304 202.027 75.5681 190.875 82.6442L132.806 183.221C143.959 176.145 158.812 172.607 177.363 172.608L235.432 72.0311Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M265.59 124.25C276.191 124.251 286.24 127.12 295.737 132.858L237.669 233.435C228.172 227.697 218.123 224.828 207.522 224.827L265.59 124.25Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M295.719 132.859C305.326 138.406 312.78 145.77 318.081 154.95L260.013 255.527C254.712 246.347 247.258 238.983 237.651 233.436L295.719 132.859Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M387.218 217.608C391.227 210.66 393.527 202.874 394.117 194.25L336.049 294.827C335.459 303.451 333.159 311.237 329.15 318.185L387.218 217.608Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M245.211 132.577C248.413 127.03 255.204 124.257 265.584 124.258L207.516 224.835C197.136 224.834 190.345 227.607 187.143 233.154L245.211 132.577Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M318.094 154.945C322.842 163.17 324.002 171.107 321.573 178.757L263.505 279.334C265.934 271.684 264.774 263.746 260.026 255.522L318.094 154.945Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M176.925 96.6737C180.127 91.1249 184.776 86.4503 190.871 82.6499L132.803 183.227C126.708 187.027 122.059 191.702 118.857 197.25L176.925 96.6737Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M387.226 217.606C385.989 219.749 384.59 221.813 383.028 223.797L324.96 324.373C326.522 322.39 327.921 320.326 329.157 318.183L387.226 217.606Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M317.269 188.408C319.087 185.262 320.519 182.045 321.562 178.758L263.494 279.335C262.451 282.622 261.019 285.839 259.201 288.985L317.269 188.408Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M245.208 132.573C241.895 137.928 243 145.387 248.522 154.95L190.454 255.527C184.932 245.964 183.827 238.505 187.14 233.15L245.208 132.573Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M176.93 96.6719C174.331 101.175 172.686 106.255 171.993 111.91L113.925 212.487C114.618 206.831 116.263 201.752 118.862 197.249L176.93 96.6719Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M317.266 188.413C314.853 192.589 311.757 196.64 307.978 200.566L249.91 301.143C253.689 297.216 256.785 293.166 259.198 288.99L317.266 188.413Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M464.198 304.708L435.375 254.789L377.307 355.366L406.13 405.285L464.198 304.708Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M353.209 254.787C366.68 242.548 376.618 232.22 383.023 223.805L324.955 324.382C318.55 332.797 308.612 343.124 295.141 355.364L353.209 254.787Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M435.37 254.787L353.212 254.784L295.144 355.361L377.302 355.364L435.37 254.787Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M183.921 154.947L248.521 154.95L190.453 255.527L125.853 255.524L183.921 154.947Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M171.992 111.914C170.668 124.537 174.643 138.881 183.92 154.947L125.852 255.524C116.575 239.458 112.599 225.114 113.924 212.491L171.992 111.914Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M307.987 200.562C301.251 207.256 291.203 216.244 277.842 227.528L219.774 328.105C233.135 316.821 243.183 307.832 249.919 301.139L307.987 200.562Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M15.5469 75.1797L44.5359 125.386L-13.5321 225.963L-42.5212 175.756L15.5469 75.1797Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M277.836 227.536C264.033 238.82 253.708 247.904 246.862 254.789L188.794 355.366C195.64 348.481 205.965 339.397 219.768 328.113L277.836 227.536Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M275.358 304.706L464.189 304.713L406.12 405.29L217.29 405.283L275.358 304.706Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M44.5279 125.39L67.3864 125.39L9.31834 225.967L-13.5401 225.966L44.5279 125.39Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M101.341 75.1911L233.863 304.705L175.795 405.282L43.2733 175.768L101.341 75.1911ZM15.5431 75.19L-42.525 175.767L43.277 175.77L101.345 75.1932L15.5431 75.19Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M246.866 254.784L246.534 254.784L188.466 355.361L188.798 355.361L246.866 254.784Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M246.539 254.781L275.362 304.701L217.294 405.277L188.471 355.358L246.539 254.781Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M67.3906 125.391L170.923 304.698L112.855 405.275L9.32257 225.967L67.3906 125.391Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                            <path d="M170.921 304.699L233.865 304.701L175.797 405.278L112.853 405.276L170.921 304.699Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="bevel" />
-                        </g>
-                        <g style="mix-blend-mode: hard-light" class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z" fill="#F0ACB8" />
-                            <path d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z" stroke="#1B1B18" stroke-width="1" stroke-linejoin="round" />
-                        </g>
-                        <g style="mix-blend-mode: hard-light" class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z" fill="#F0ACB8" />
-                            <path d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z" stroke="#1B1B18" stroke-width="1" />
-                        </g>
-                    </svg>
-
-                    {{-- Dark Mode 12 SVG --}}
-                    <svg class="w-[448px] max-w-none relative -mt-[4.9rem] -ml-8 lg:ml-0 lg:-mt-[6.6rem] hidden dark:block" viewBox="0 0 440 376" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z" fill="black"/>
-                            <path d="M9.11884 226.339L-13.7396 226.338L-42.7286 176.132L43.0733 176.135L175.595 405.649L112.651 405.647L9.11884 226.339Z" fill="black"/>
-                            <path d="M188.263 355.73L188.595 355.73C195.441 348.845 205.766 339.761 219.569 328.477C232.93 317.193 242.978 308.205 249.714 301.511C256.34 294.626 260.867 287.358 263.296 279.708C265.725 272.058 264.565 264.121 259.816 255.896C254.516 246.716 247.062 239.352 237.454 233.805C227.957 228.067 217.908 225.198 207.307 225.198C196.927 225.197 190.136 227.97 186.934 233.516C183.621 238.872 184.726 246.331 190.247 255.894L125.647 255.891C116.371 239.825 112.395 225.481 113.72 212.858C115.265 200.235 121.559 190.481 132.602 183.596C143.754 176.52 158.607 172.982 177.159 172.983C196.594 172.984 215.863 176.523 234.968 183.6C253.961 190.486 271.299 200.241 286.98 212.864C302.661 225.488 315.14 239.833 324.416 255.899C333.03 270.817 336.841 283.918 335.847 295.203C335.075 306.487 331.376 316.336 324.75 324.751C318.346 333.167 308.408 343.494 294.936 355.734L377.094 355.737L405.917 405.656L217.087 405.649L188.263 355.73Z" stroke="#FF750F" stroke-width="1"/>
-                            <path d="M9.11884 226.339L-13.7396 226.338L-42.7286 176.132L43.0733 176.135L175.595 405.649L112.651 405.647L9.11884 226.339Z" stroke="#FF750F" stroke-width="1"/>
-                            <path d="M204.592 327.449L204.923 327.449C211.769 320.564 222.094 311.479 235.897 300.196C249.258 288.912 259.306 279.923 266.042 273.23C272.668 266.345 277.195 259.077 279.624 251.427C282.053 243.777 280.893 235.839 276.145 227.615C270.844 218.435 263.39 211.071 253.782 205.524C244.285 199.786 234.236 196.917 223.635 196.916C213.255 196.916 206.464 199.689 203.262 205.235C199.949 210.59 201.054 218.049 206.575 227.612L141.975 227.61C132.699 211.544 128.723 197.2 130.048 184.577C131.593 171.954 137.887 162.2 148.93 155.315C160.083 148.239 174.935 144.701 193.487 144.702C212.922 144.703 232.192 148.242 251.296 155.319C270.289 162.205 287.627 171.96 303.308 184.583C318.989 197.207 331.468 211.552 340.745 227.618C349.358 242.536 353.169 255.637 352.175 266.921C351.403 278.205 347.704 288.055 341.078 296.47C334.674 304.885 324.736 315.213 311.264 327.453L393.422 327.456L422.246 377.375L233.415 377.368L204.592 327.449Z" fill="#391800"/>
-                            <path d="M25.447 198.058L2.58852 198.057L-26.4005 147.851L59.4015 147.854L191.923 377.368L128.979 377.365L25.447 198.058Z" fill="#391800"/>
-                            <path d="M204.592 327.449L204.923 327.449C211.769 320.564 222.094 311.479 235.897 300.196C249.258 288.912 259.306 279.923 266.042 273.23C272.668 266.345 277.195 259.077 279.624 251.427C282.053 243.777 280.893 235.839 276.145 227.615C270.844 218.435 263.39 211.071 253.782 205.524C244.285 199.786 234.236 196.917 223.635 196.916C213.255 196.916 206.464 199.689 203.262 205.235C199.949 210.59 201.054 218.049 206.575 227.612L141.975 227.61C132.699 211.544 128.723 197.2 130.048 184.577C131.593 171.954 137.887 162.2 148.93 155.315C160.083 148.239 174.935 144.701 193.487 144.702C212.922 144.703 232.192 148.242 251.296 155.319C270.289 162.205 287.627 171.96 303.308 184.583C318.989 197.207 331.468 211.552 340.745 227.618C349.358 242.536 353.169 255.637 352.175 266.921C351.403 278.205 347.704 288.055 341.078 296.47C334.674 304.885 324.736 315.213 311.264 327.453L393.422 327.456L422.246 377.375L233.415 377.368L204.592 327.449Z" stroke="#FF750F" stroke-width="1"/>
-                            <path d="M25.447 198.058L2.58852 198.057L-26.4005 147.851L59.4015 147.854L191.923 377.368L128.979 377.365L25.447 198.058Z" stroke="#FF750F" stroke-width="1"/>
-                        </g>
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4" style="mix-blend-mode:hard-light">
-                            <path d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z" fill="#733000"/>
-                            <path d="M38.197 175.972L15.3385 175.971L-13.6505 125.765L72.1515 125.768L204.673 355.282L141.729 355.279L38.197 175.972Z" fill="#733000"/>
-                            <path d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.725 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z" stroke="#FF750F" stroke-width="1"/>
-                            <path d="M38.197 175.972L15.3385 175.971L-13.6505 125.765L72.1515 125.768L204.673 355.282L141.729 355.279L38.197 175.972Z" stroke="#FF750F" stroke-width="1"/>
-                        </g>
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M217.342 305.363L217.673 305.363C224.519 298.478 234.844 289.393 248.647 278.11C262.008 266.826 272.056 257.837 278.792 251.144C285.418 244.259 289.945 236.991 292.374 229.341C294.803 221.691 293.643 213.753 288.895 205.529C283.594 196.349 276.14 188.985 266.532 183.438C257.035 177.7 246.986 174.831 236.385 174.83C226.005 174.83 219.214 177.603 216.012 183.149C212.699 188.504 213.804 195.963 219.325 205.527L154.726 205.524C145.449 189.458 141.473 175.114 142.798 162.491C144.343 149.868 150.637 140.114 161.68 133.229C172.833 126.153 187.685 122.615 206.237 122.616C225.672 122.617 244.942 126.156 264.046 133.233C283.039 140.119 300.377 149.874 316.058 162.497C331.739 175.121 344.218 189.466 353.495 205.532C362.108 220.45 365.919 233.551 364.925 244.835C364.153 256.12 360.454 265.969 353.828 274.384C347.424 282.799 337.486 293.127 324.014 305.367L406.172 305.37L434.996 355.289L246.165 355.282L217.342 305.363Z" stroke="#FF750F" stroke-width="1"/>
-                            <path d="M38.197 175.972L15.3385 175.971L-13.6505 125.765L72.1515 125.768L204.673 355.282L141.729 355.279L38.197 175.972Z" stroke="#FF750F" stroke-width="1"/>
-                        </g>
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4">
-                            <path d="M188.467 355.363L188.798 355.363C195.644 348.478 205.969 339.393 219.772 328.11C233.133 316.826 243.181 307.837 249.917 301.144C253.696 297.217 256.792 293.166 259.205 288.991C261.024 285.845 262.455 282.628 263.499 279.341C265.928 271.691 264.768 263.753 260.02 255.529C254.719 246.349 247.265 238.985 237.657 233.438C228.16 227.7 218.111 224.831 207.51 224.83C197.13 224.83 190.339 227.603 187.137 233.149C183.824 238.504 184.929 245.963 190.45 255.527L125.851 255.524C116.574 239.458 112.598 225.114 113.923 212.491C114.615 206.836 116.261 201.756 118.859 197.253C122.061 191.704 126.709 187.03 132.805 183.229C143.958 176.153 158.81 172.615 177.362 172.616C196.797 172.617 216.067 176.156 235.171 183.233C254.164 190.119 271.502 199.874 287.183 212.497C302.864 225.121 315.343 239.466 324.62 255.532C333.233 270.45 337.044 283.551 336.05 294.835C335.46 303.459 333.16 311.245 329.151 318.194C327.915 320.337 326.515 322.4 324.953 324.384C318.549 332.799 308.611 343.127 295.139 355.367L377.297 355.37L406.121 405.289L217.29 405.282L188.467 355.363Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M9.32197 225.972L-13.5365 225.971L-42.5255 175.765L43.2765 175.768L175.798 405.282L112.854 405.279L9.32197 225.972Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M345.247 111.915C329.566 99.2919 312.229 89.5371 293.235 82.6512L235.167 183.228C254.161 190.114 271.498 199.869 287.179 212.492L345.247 111.915Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M382.686 154.964C373.41 138.898 360.931 124.553 345.25 111.93L287.182 212.506C302.863 225.13 315.342 239.475 324.618 255.541L382.686 154.964Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M293.243 82.6472C274.139 75.57 254.869 72.031 235.434 72.0303L177.366 172.607C196.801 172.608 216.071 176.147 235.175 183.224L293.243 82.6472Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M394.118 194.257C395.112 182.973 391.301 169.872 382.688 154.953L324.619 255.53C333.233 270.448 337.044 283.55 336.05 294.834L394.118 194.257Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M235.432 72.0311C216.88 72.0304 202.027 75.5681 190.875 82.6442L132.806 183.221C143.959 176.145 158.812 172.607 177.363 172.608L235.432 72.0311Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M265.59 124.25C276.191 124.251 286.24 127.12 295.737 132.858L237.669 233.435C228.172 227.697 218.123 224.828 207.522 224.827L265.59 124.25Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M295.719 132.859C305.326 138.406 312.78 145.77 318.081 154.95L260.013 255.527C254.712 246.347 247.258 238.983 237.651 233.436L295.719 132.859Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M387.218 217.608C391.227 210.66 393.527 202.874 394.117 194.25L336.049 294.827C335.459 303.451 333.159 311.237 329.15 318.185L387.218 217.608Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M245.211 132.577C248.413 127.03 255.204 124.257 265.584 124.258L207.516 224.835C197.136 224.834 190.345 227.607 187.143 233.154L245.211 132.577Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M318.094 154.945C322.842 163.17 324.002 171.107 321.573 178.757L263.505 279.334C265.934 271.684 264.774 263.746 260.026 255.522L318.094 154.945Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M176.925 96.6737C180.127 91.1249 184.776 86.4503 190.871 82.6499L132.803 183.227C126.708 187.027 122.059 191.702 118.857 197.25L176.925 96.6737Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M387.226 217.606C385.989 219.749 384.59 221.813 383.028 223.797L324.96 324.373C326.522 322.39 327.921 320.326 329.157 318.183L387.226 217.606Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M317.269 188.408C319.087 185.262 320.519 182.045 321.562 178.758L263.494 279.335C262.451 282.622 261.019 285.839 259.201 288.985L317.269 188.408Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M245.208 132.573C241.895 137.928 243 145.387 248.522 154.95L190.454 255.527C184.932 245.964 183.827 238.505 187.14 233.15L245.208 132.573Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M176.93 96.6719C174.331 101.175 172.686 106.255 171.993 111.91L113.925 212.487C114.618 206.831 116.263 201.752 118.862 197.249L176.93 96.6719Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M317.266 188.413C314.853 192.589 311.757 196.64 307.978 200.566L249.91 301.143C253.689 297.216 256.785 293.166 259.198 288.99L317.266 188.413Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M464.198 304.708L435.375 254.789L377.307 355.366L406.13 405.285L464.198 304.708Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M353.209 254.787C366.68 242.548 376.618 232.22 383.023 223.805L324.955 324.382C318.55 332.797 308.612 343.124 295.141 355.364L353.209 254.787Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M435.37 254.787L353.212 254.784L295.144 355.361L377.302 355.364L435.37 254.787Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M183.921 154.947L248.521 154.95L190.453 255.527L125.853 255.524L183.921 154.947Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M171.992 111.914C170.668 124.537 174.643 138.881 183.92 154.947L125.852 255.524C116.575 239.458 112.599 225.114 113.924 212.491L171.992 111.914Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M307.987 200.562C301.251 207.256 291.203 216.244 277.842 227.528L219.774 328.105C233.135 316.821 243.183 307.832 249.919 301.139L307.987 200.562Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M15.5469 75.1797L44.5359 125.386L-13.5321 225.963L-42.5212 175.756L15.5469 75.1797Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M277.836 227.536C264.033 238.82 253.708 247.904 246.862 254.789L188.794 355.366C195.64 348.481 205.965 339.397 219.768 328.113L277.836 227.536Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M275.358 304.706L464.189 304.713L406.12 405.29L217.29 405.283L275.358 304.706Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M44.5279 125.39L67.3864 125.39L9.31834 225.967L-13.5401 225.966L44.5279 125.39Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M101.341 75.1911L233.863 304.705L175.795 405.282L43.2733 175.768L101.341 75.1911ZM15.5431 75.19L-42.525 175.767L43.277 175.77L101.345 75.1932L15.5431 75.19Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M246.866 254.784L246.534 254.784L188.466 355.361L188.798 355.361L246.866 254.784Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M246.539 254.781L275.362 304.701L217.294 405.277L188.471 355.358L246.539 254.781Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M67.3906 125.391L170.923 304.698L112.855 405.275L9.32257 225.967L67.3906 125.391Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                            <path d="M170.921 304.699L233.865 304.701L175.797 405.278L112.853 405.276L170.921 304.699Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="bevel"/>
-                        </g>
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4" style="mix-blend-mode:hard-light">
-                            <path d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z" fill="#4B0600"/>
-                            <path d="M246.544 254.79L246.875 254.79C253.722 247.905 264.046 238.82 277.849 227.537C291.21 216.253 301.259 207.264 307.995 200.57C314.62 193.685 319.147 186.418 321.577 178.768C324.006 171.117 322.846 163.18 318.097 154.956C312.796 145.775 305.342 138.412 295.735 132.865C286.238 127.127 276.189 124.258 265.588 124.257C255.208 124.257 248.416 127.03 245.214 132.576C241.902 137.931 243.006 145.39 248.528 154.953L183.928 154.951C174.652 138.885 170.676 124.541 172 111.918C173.546 99.2946 179.84 89.5408 190.882 82.6559C202.035 75.5798 216.887 72.0421 235.439 72.0428C254.874 72.0435 274.144 75.5825 293.248 82.6598C312.242 89.5457 329.579 99.3005 345.261 111.924C360.942 124.548 373.421 138.892 382.697 154.958C391.311 169.877 395.121 182.978 394.128 194.262C393.355 205.546 389.656 215.396 383.031 223.811C376.627 232.226 366.688 242.554 353.217 254.794L435.375 254.797L464.198 304.716L275.367 304.709L246.544 254.79Z" stroke="#FF750F" stroke-width="1" stroke-linejoin="round"/>
-                        </g>
-                        <g class="transition-all delay-300 translate-y-0 opacity-100 duration-750 starting:opacity-0 starting:translate-y-4" style="mix-blend-mode:hard-light">
-                            <path d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z" fill="#4B0600"/>
-                            <path d="M67.41 125.402L44.5515 125.401L15.5625 75.1953L101.364 75.1985L233.886 304.712L170.942 304.71L67.41 125.402Z" stroke="#FF750F" stroke-width="1"/>
-                        </g>
-                    </svg>
-                    <div class="absolute inset-0 rounded-t-lg lg:rounded-t-none lg:rounded-r-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"></div>
-                </div>
-            </main>
+    <!-- Hero Section -->
+    <main class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 flex flex-col items-center justify-center min-h-screen text-center px-4">
+        
+        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-8 animate-fade-in-up">
+            <span class="flex w-2 h-2 rounded-full bg-indigo-600 dark:bg-indigo-400 animate-pulse"></span>
+            Sistem Pemetaan Bantuan Sosial
         </div>
 
-        @if (Route::has('login'))
-            <div class="h-14.5 hidden lg:block"></div>
-        @endif
-    </body>
+        <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 max-w-4xl animate-fade-in-up delay-100">
+            Penyaluran Bantuan <br class="hidden md:block"/>
+            <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
+                Tepat Sasaran & Transparan
+            </span>
+        </h1>
+
+        <p class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-10 leading-relaxed animate-fade-in-up delay-200">
+            Sistem Informasi Geografis terpadu untuk mendata, memetakan, dan menyalurkan bantuan kepada warga yang membutuhkan melalui jaringan penyalur yang tepercaya.
+        </p>
+
+        <div class="flex flex-col sm:flex-row items-center gap-4 animate-fade-in-up delay-300">
+            @auth
+                <a href="{{ url('/dashboard') }}" class="w-full sm:w-auto px-8 py-4 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold text-lg hover:shadow-xl hover:shadow-indigo-500/30 hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2">
+                    Buka Dashboard
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
+                </a>
+            @else
+                <a href="{{ route('login') }}" class="w-full sm:w-auto px-8 py-4 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-semibold text-lg hover:shadow-xl hover:shadow-indigo-500/30 hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2">
+                    Mulai Sekarang
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
+                </a>
+                <a href="#features" class="w-full sm:w-auto px-8 py-4 rounded-full bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-300 backdrop-blur-sm flex items-center justify-center gap-2">
+                    Pelajari Fitur
+                </a>
+            @endauth
+        </div>
+
+        <!-- Dashboard Preview (Mockup Image) -->
+        <div class="mt-20 w-full max-w-5xl relative animate-fade-in-up delay-300">
+            <div class="absolute inset-0 bg-gradient-to-t from-slate-50 dark:from-slate-950 via-transparent to-transparent z-10 bottom-0 h-1/2"></div>
+            <div class="relative rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-white/50 dark:bg-slate-900/50 backdrop-blur-xl shadow-2xl p-2 sm:p-4 overflow-hidden">
+                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
+                <!-- Mockup Browser Header -->
+                <div class="flex items-center gap-2 p-3 border-b border-slate-200 dark:border-slate-800 mb-4">
+                    <div class="w-3 h-3 rounded-full bg-red-400"></div>
+                    <div class="w-3 h-3 rounded-full bg-amber-400"></div>
+                    <div class="w-3 h-3 rounded-full bg-green-400"></div>
+                </div>
+                <!-- Abstract Map UI Mockup -->
+                <div class="aspect-video bg-slate-100 dark:bg-slate-800 rounded-lg overflow-hidden relative border border-slate-200 dark:border-slate-700 flex items-center justify-center">
+                    <svg class="w-full h-full text-slate-200 dark:text-slate-700 absolute inset-0" preserveAspectRatio="none" viewBox="0 0 100 100"><path d="M0,50 Q25,25 50,50 T100,50 V100 H0 Z" fill="currentColor" opacity="0.5"/><path d="M0,70 Q25,45 50,70 T100,70 V100 H0 Z" fill="currentColor" opacity="0.3"/></svg>
+                    
+                    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PHBhdGggZD0iTTIwIDBMNDAgMjBMMjAgNDBMMCAyMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9IjAuMDUiLz48L3N2Zz4=')] dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PHBhdGggZD0iTTIwIDBMNDAgMjBMMjAgNDBMMCAyMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW9wYWNpdHk9IjAuMDUiLz48L3N2Zz4=')] opacity-50"></div>
+
+                    <!-- Pins -->
+                    <div class="absolute top-1/4 left-1/3 w-6 h-6 text-indigo-500 animate-bounce"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg></div>
+                    <div class="absolute top-1/2 left-1/2 w-8 h-8 text-purple-500 drop-shadow-lg"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg></div>
+                    <div class="absolute bottom-1/3 right-1/4 w-6 h-6 text-pink-500"><svg fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg></div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Features Section -->
+    <section id="features" class="py-24 relative z-10 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center max-w-3xl mx-auto mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">Fitur Unggulan Sistem</h2>
+                <p class="text-slate-600 dark:text-slate-400 text-lg">Platform ini dirancang khusus untuk memudahkan koordinasi antara pemerintah, penyalur bantuan, dan masyarakat.</p>
+            </div>
+
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="p-8 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+                    <div class="w-14 h-14 rounded-xl bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 flex items-center justify-center mb-6">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Pemetaan Interaktif</h3>
+                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
+                        Visualisasi lokasi warga penerima bantuan secara akurat di atas peta digital, lengkap dengan radius pelayanan setiap penyalur.
+                    </p>
+                </div>
+
+                <!-- Feature 2 -->
+                <div class="p-8 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+                    <div class="w-14 h-14 rounded-xl bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 flex items-center justify-center mb-6">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Sistem Kupon Digital</h3>
+                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
+                        Penyaluran bantuan dilakukan melalui teknologi pemindaian kupon (QR Code) untuk memastikan transparansi dan mencegah duplikasi.
+                    </p>
+                </div>
+
+                <!-- Feature 3 -->
+                <div class="p-8 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+                    <div class="w-14 h-14 rounded-xl bg-pink-100 dark:bg-pink-500/20 text-pink-600 dark:text-pink-400 flex items-center justify-center mb-6">
+                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Laporan Partisipatif</h3>
+                    <p class="text-slate-600 dark:text-slate-400 leading-relaxed">
+                        Masyarakat dapat melaporkan warga yang berhak menerima bantuan melalui tautan aman spesifik per masing-masing tempat ibadah.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-slate-50 dark:bg-slate-950 py-12 border-t border-slate-200 dark:border-slate-800 relative z-10 text-center text-slate-500 dark:text-slate-400">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="flex items-center justify-center gap-2 mb-4">
+                <div class="w-6 h-6 rounded bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+                </div>
+                <span class="font-outfit font-bold text-slate-800 dark:text-slate-200">WebGIS Kesra</span>
+            </div>
+            <p>&copy; {{ date('Y') }} WebGIS Pengentasan Kemiskinan. All rights reserved.</p>
+        </div>
+    </footer>
+
+</body>
 </html>
diff --git a/routes/web.php b/routes/web.php
index b468fc3..f13fa66 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,11 +4,24 @@ use App\Http\Controllers\ProfileController;
 use Illuminate\Support\Facades\Route;
 
 use App\Http\Controllers\MapController;
+use App\Http\Controllers\PersetujuanController;
+
+use App\Http\Controllers\RiwayatController;
+use App\Http\Controllers\KuponController;
+use App\Http\Controllers\KonfirmasiController;
 
 Route::get('/', function () {
     return view('welcome');
 });
 
+// Public routes (tanpa auth) - Konfirmasi penyerahan via QR
+Route::get('/konfirmasi', [KonfirmasiController::class, 'show'])->name('konfirmasi.show');
+Route::post('/konfirmasi', [KonfirmasiController::class, 'process'])->name('konfirmasi.process');
+
+// Public routes (tanpa auth) - Pelaporan Warga
+Route::get('/lapor/{kode_lapor}', [\App\Http\Controllers\LaporanController::class, 'create'])->name('lapor.create');
+Route::post('/lapor/{kode_lapor}', [\App\Http\Controllers\LaporanController::class, 'store'])->name('lapor.store');
+
 Route::middleware(['auth', 'verified'])->group(function () {
     Route::get('/dashboard', [MapController::class, 'index'])->name('dashboard');
     Route::get('/daftar-penerima-bantuan', [MapController::class, 'daftarPenerimaBantuan'])->name('penerima.index');
@@ -17,6 +30,24 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::post('/map/update-radius', [MapController::class, 'updateRadius'])->name('map.updateRadius');
     Route::post('/map/edit', [MapController::class, 'edit'])->name('map.edit');
     Route::get('/map/delete', [MapController::class, 'delete'])->name('map.delete');
+
+
+    Route::post('/persetujuan/{id}', [PersetujuanController::class, 'updateStatus'])->name('persetujuan.update');
+
+    // Riwayat
+    Route::get('/riwayat', [RiwayatController::class, 'index'])->name('riwayat.index');
+    Route::get('/riwayat/konfirmasi/{id_log}', [RiwayatController::class, 'konfirmasiPenyaluran'])->name('riwayat.konfirmasi');
+    Route::get('/riwayat/cetak-pdf', [RiwayatController::class, 'cetakPdf'])->name('riwayat.cetakPdf');
+
+    // Kupon
+    Route::get('/kupon/{id}', [KuponController::class, 'show'])->name('kupon.show');
+    Route::post('/kupon/cetak', [KuponController::class, 'cetak'])->name('kupon.cetak');
+
+    // Scan Kupon
+    Route::get('/scan', [KonfirmasiController::class, 'scan'])->name('scan.index');
+
+    // Laporan Warga
+    Route::get('/laporan-warga', [\App\Http\Controllers\LaporanController::class, 'index'])->name('laporan.index');
 });
 
 Route::middleware('auth')->group(function () {
diff --git a/temp_update.php b/temp_update.php
new file mode 100644
index 0000000..c278f0e
--- /dev/null
+++ b/temp_update.php
@@ -0,0 +1,13 @@
+<?php
+
+require 'vendor/autoload.php';
+$app = require_once 'bootstrap/app.php';
+$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
+$kernel->bootstrap();
+
+foreach (\App\Models\TempatIbadah::all() as $t) {
+    if (!$t->kode_lapor) {
+        $t->update(['kode_lapor' => \Illuminate\Support\Str::random(10)]);
+        echo "Updated {$t->id} with {$t->kode_lapor}\n";
+    }
+}