diff --git a/resources/views/data.blade.php b/resources/views/data.blade.php
index 14b48ae..516c8c9 100644
--- a/resources/views/data.blade.php
+++ b/resources/views/data.blade.php
@@ -3,7 +3,8 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Data Tabular - WebGIS Miskin & Ibadah</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>Data Tabular - WebGIS Pemetaan Kemiskinan</title>
 
     <!-- DaisyUI + Tailwind -->
     <link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet">
@@ -28,7 +29,7 @@
         <div class="flex-1">
             <a href="{{ url('/') }}" class="btn btn-ghost text-lg font-bold gap-2 text-primary">
                 <i class="fa-solid fa-house-chimney-crack"></i>
-                WebGIS Miskin & Ibadah
+                WebGIS Pemetaan Kemiskinan
             </a>
         </div>
         <div class="flex-none">
@@ -36,6 +37,32 @@
                 <li><a href="{{ url('/map') }}" class="font-medium"><i class="fa-solid fa-map"></i> Peta</a></li>
                 <li><a href="{{ url('/data') }}" class="font-semibold bg-primary/10 text-primary rounded-lg"><i class="fa-solid fa-table-list"></i> Data Tabular</a></li>
             </ul>
+            <!-- User dropdown -->
+            <div class="dropdown dropdown-end ml-2">
+                <div tabindex="0" role="button" class="btn btn-ghost gap-2">
+                    <div class="avatar placeholder">
+                        <div class="bg-primary text-primary-content rounded-full w-8">
+                            <span class="text-xs font-bold">{{ substr(auth()->user()->name, 0, 1) }}</span>
+                        </div>
+                    </div>
+                    <span class="hidden sm:inline text-sm font-semibold">{{ auth()->user()->name }}</span>
+                    <i class="fa-solid fa-chevron-down text-xs opacity-50"></i>
+                </div>
+                <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg border border-base-200 mt-2">
+                    <li class="menu-title">
+                        <span class="text-xs text-base-content/50 capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? 'user') }}</span>
+                    </li>
+                    <li>
+                        <form method="POST" action="{{ route('logout') }}">
+                            @csrf
+                            <button type="submit" class="text-error w-full text-left flex items-center gap-2">
+                                <i class="fa-solid fa-right-from-bracket"></i>
+                                Keluar
+                            </button>
+                        </form>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 
@@ -51,8 +78,19 @@
                 </h1>
                 <p class="text-base-content/50 mt-1">Daftar rumah ibadah dan keluarga miskin dalam matriks tabular.</p>
             </div>
-            <div class="flex gap-2">
-                <a href="{{ url('/map') }}" class="btn btn-primary shadow-lg"><i class="fa-solid fa-plus"></i> Tambah Data di Peta</a>
+            <div class="flex flex-wrap gap-2">
+                <div class="join">
+                    <input class="input input-bordered join-item input-md w-64" placeholder="Cari data..." id="searchInput" onkeyup="filterData()"/>
+                    <button class="btn btn-md join-item btn-ghost border-base-300"><i class="fa-solid fa-search"></i></button>
+                </div>
+                @if(in_array(auth()->user()->getRoleNames()->first(), ['administrator', 'petugas_pendataan', 'pengurus_ibadah', 'pemangku_kebijakan']))
+                <button onclick="exportCSV()" class="btn btn-md btn-outline border-base-300 gap-2">
+                    <i class="fa-solid fa-file-csv"></i> Ekspor CSV
+                </button>
+                @endif
+                <a href="{{ url('/map') }}" class="btn btn-md btn-primary shadow-lg gap-2">
+                    <i class="fa-solid fa-plus"></i> Tambah Data
+                </a>
             </div>
         </div>
 
@@ -84,9 +122,10 @@
                         <thead>
                             <tr class="text-xs font-bold uppercase opacity-50">
                                 <th>#</th>
-                                <th>Nama Rumah Ibadah</th>
-                                <th>Alamat</th>
-                                <th>Radius Analisis</th>
+                                <th>Nama</th>
+                                <th>Jenis</th>
+                                <th>Pengurus/Telp</th>
+                                <th>Radius</th>
                                 <th>Koordinat</th>
                                 <th class="text-center">Aksi</th>
                             </tr>
@@ -102,10 +141,11 @@
                     <table class="table table-zebra w-full" id="tableMiskin">
                         <thead>
                             <tr class="text-xs font-bold uppercase opacity-50">
-                                <th>ID Rumah</th>
-                                <th>Alamat</th>
-                                <th>Jumlah KK</th>
-                                <th>Jumlah Jiwa</th>
+                                <th>ID</th>
+                                <th>Nama KK</th>
+                                <th>KK/Jiwa</th>
+                                <th>Pekerjaan</th>
+                                <th>Kondisi</th>
                                 <th>Koordinat</th>
                                 <th class="text-center">Aksi</th>
                             </tr>
@@ -134,7 +174,14 @@
     <div class="toast toast-end toast-bottom z-[9999]" id="toastBox"></div>
 
     <script>
+        const authUserRole = '{{ auth()->user()->getRoleNames()->first() ?? '' }}';
+        const canEditIbadah = ['administrator', 'pengurus_ibadah'].includes(authUserRole);
+        const canEditMiskin = ['administrator', 'petugas_pendataan'].includes(authUserRole);
+        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
+        let ibadahData = [], miskinData = [];
         document.addEventListener('DOMContentLoaded', loadAllData);
+        const searchInput = document.getElementById('searchInput');
 
         async function loadAllData() {
             try {
@@ -142,45 +189,110 @@
                     fetch('{{ url('/api/ibadah') }}').then(r => r.json()),
                     fetch('{{ url('/api/miskin') }}').then(r => r.json())
                 ]);
-
-                // Stats
-                document.getElementById('countIbadah').innerText = ri.length;
-                document.getElementById('countMiskin').innerText = rm.length;
-                document.getElementById('countJiwa').innerText = rm.reduce((acc, h) => acc + parseInt(h.jumlah_orang), 0);
-
-                // Ibadah Table
-                const bodyI = document.getElementById('bodyIbadah');
-                bodyI.innerHTML = ri.length ? ri.map((item, i) => `
-                    <tr>
-                        <td class="text-xs font-bold opacity-30">${i + 1}</td>
-                        <td class="font-bold text-primary">${item.nama}</td>
-                        <td class="text-sm opacity-70 max-w-xs truncate">${item.alamat}</td>
-                        <td><span class="badge badge-outline badge-sm">${item.radius}m</span></td>
-                        <td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(6)}, ${parseFloat(item.longitude).toFixed(6)}</td>
-                        <td class="text-center">
-                            <button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('ibadah', ${item.id})"><i class="fa-solid fa-trash"></i></button>
-                        </td>
-                    </tr>
-                `).join('') : '<tr><td colspan="6" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
-
-                // Miskin Table
-                const bodyM = document.getElementById('bodyMiskin');
-                bodyM.innerHTML = rm.length ? rm.map(item => `
-                    <tr>
-                        <td class="font-bold text-error">${item.id_rumah}</td>
-                        <td class="text-xs opacity-70 max-w-xs truncate">${item.alamat || '-'}</td>
-                        <td><span class="badge badge-warning badge-sm">${item.jumlah_kk} KK</span></td>
-                        <td><span class="badge badge-info badge-sm">${item.jumlah_orang} Jiwa</span></td>
-                        <td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(6)}, ${parseFloat(item.longitude).toFixed(6)}</td>
-                        <td class="text-center">
-                            <button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('miskin', '${item.id_rumah}')"><i class="fa-solid fa-trash"></i></button>
-                        </td>
-                    </tr>
-                `).join('') : '<tr><td colspan="6" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
-
+                ibadahData = ri;
+                miskinData = rm;
+                renderTables();
             } catch (e) { showToast('Gagal memuat data', 'error'); }
         }
 
+        function renderTables(filteredI = null, filteredM = null) {
+            const dataI = filteredI || ibadahData;
+            const dataM = filteredM || miskinData;
+
+            // Stats
+            document.getElementById('countIbadah').innerText = ibadahData.length;
+            document.getElementById('countMiskin').innerText = miskinData.length;
+            document.getElementById('countJiwa').innerText = miskinData.reduce((acc, h) => acc + parseInt(h.jumlah_orang), 0);
+
+            // Ibadah Table
+            const bodyI = document.getElementById('bodyIbadah');
+            bodyI.innerHTML = dataI.length ? dataI.map((item, i) => `
+                <tr>
+                    <td class="text-xs font-bold opacity-30">${i + 1}</td>
+                    <td>
+                        <div class="font-bold text-primary">${item.nama}</div>
+                        <div class="text-[10px] opacity-50 truncate max-w-[200px]">${item.alamat}</div>
+                    </td>
+                    <td class="capitalize text-xs">${item.jenis || '-'}</td>
+                    <td class="text-xs">
+                        <div class="font-semibold">${item.pengurus || '-'}</div>
+                        <div class="opacity-50">${item.telepon || '-'}</div>
+                    </td>
+                    <td><span class="badge badge-outline badge-sm">${item.radius}m</span></td>
+                    <td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(4)}, ${parseFloat(item.longitude).toFixed(4)}</td>
+                    <td class="text-center">
+                        ${canEditIbadah ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('ibadah', ${item.id})"><i class="fa-solid fa-trash"></i></button>` : ''}
+                    </td>
+                </tr>
+            `).join('') : '<tr><td colspan="7" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
+
+            // Miskin Table
+            const bodyM = document.getElementById('bodyMiskin');
+            bodyM.innerHTML = dataM.length ? dataM.map(item => `
+                <tr>
+                    <td class="font-bold text-error">${item.id_rumah}</td>
+                    <td>
+                        <div class="font-bold">${item.nama_kk || '-'}</div>
+                        <div class="text-[10px] opacity-50 truncate max-w-[200px]">${item.alamat || '-'}</div>
+                    </td>
+                    <td>
+                        <div class="badge badge-warning badge-xs">${item.jumlah_kk} KK</div>
+                        <div class="badge badge-info badge-xs">${item.jumlah_orang} Jiwa</div>
+                    </td>
+                    <td class="text-xs">${item.pekerjaan || '-'}</td>
+                    <td class="capitalize text-xs">${item.kondisi_rumah || '-'}</td>
+                    <td class="font-mono text-[10px]">${parseFloat(item.latitude).toFixed(4)}, ${parseFloat(item.longitude).toFixed(4)}</td>
+                    <td class="text-center">
+                        ${canEditMiskin ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('miskin', '${item.id_rumah}')"><i class="fa-solid fa-trash"></i></button>` : ''}
+                    </td>
+                </tr>
+            `).join('') : '<tr><td colspan="7" class="text-center py-10 opacity-30 italic">Belum ada data</td></tr>';
+        }
+
+        function filterData() {
+            const query = searchInput.value.toLowerCase();
+            const filteredI = ibadahData.filter(i => 
+                i.nama.toLowerCase().includes(query) || 
+                (i.alamat && i.alamat.toLowerCase().includes(query)) ||
+                (i.pengurus && i.pengurus.toLowerCase().includes(query))
+            );
+            const filteredM = miskinData.filter(m => 
+                (m.nama_kk && m.nama_kk.toLowerCase().includes(query)) || 
+                (m.alamat && m.alamat.toLowerCase().includes(query)) ||
+                m.id_rumah.toLowerCase().includes(query)
+            );
+            renderTables(filteredI, filteredM);
+        }
+
+        function exportCSV() {
+            const activeTab = document.querySelector('input[name="data_tabs"]:checked').getAttribute('aria-label');
+            let csvContent = "data:text/csv;charset=utf-8,";
+            
+            if (activeTab.includes("Ibadah")) {
+                csvContent += "ID,Nama,Jenis,Alamat,Radius,Jemaah,Pengurus,Telepon,Lat,Lon\n";
+                ibadahData.forEach(i => {
+                    csvContent += `${i.id},"${i.nama}","${i.jenis}","${i.alamat}",${i.radius},${i.jumlah_jemaah},"${i.pengurus}","${i.telepon}",${i.latitude},${i.longitude}\n`;
+                });
+                downloadFile(csvContent, "data_rumah_ibadah.csv");
+            } else {
+                csvContent += "ID Rumah,Nama KK,Alamat,KK,Jiwa,Pekerjaan,Pendapatan,Kondisi,Lat,Lon\n";
+                miskinData.forEach(m => {
+                    csvContent += `"${m.id_rumah}","${m.nama_kk}","${m.alamat}",${m.jumlah_kk},${m.jumlah_orang},"${m.pekerjaan}",${m.pendapatan},"${m.kondisi_rumah}",${m.latitude},${m.longitude}\n`;
+                });
+                downloadFile(csvContent, "data_rumah_miskin.csv");
+            }
+        }
+
+        function downloadFile(content, filename) {
+            const encodedUri = encodeURI(content);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", filename);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
         let deleteTarget = null;
         function prepDelete(type, id) {
             deleteTarget = { type, id };
@@ -189,9 +301,9 @@
 
         document.getElementById('confirmDeleteBtn').onclick = async () => {
             const { type, id } = deleteTarget;
-            const res = await fetch(`{{ url('/api') }}/${type}/${id}`, { 
+            const res = await fetch(`{{ url('/api') }}/${type}/${id}`, {
                 method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' }
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }
             });
             const resJson = await res.json();
             if (resJson.success) {
@@ -205,7 +317,7 @@
             const t = document.createElement('div');
             const alertCls = type === 'success' ? 'alert-success' : type === 'error' ? 'alert-error' : 'alert-info';
             t.className = `alert ${alertCls} shadow-lg py-3 text-xs font-bold`;
-            t.innerHTML = `<span>${msg}</span>`;
+            t.innerHTML = `<span><i class="fa-solid fa-circle-info mr-2"></i>${msg}</span>`;
             document.getElementById('toastBox').appendChild(t);
             setTimeout(() => t.remove(), 3000);
         }
diff --git a/resources/views/map.blade.php b/resources/views/map.blade.php
index de1d643..6439022 100644
--- a/resources/views/map.blade.php
+++ b/resources/views/map.blade.php
@@ -3,7 +3,8 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Peta Interaktif - WebGIS Miskin & Ibadah</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>Peta Interaktif - WebGIS Pemetaan Kemiskinan</title>
 
     <!-- Leaflet -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@@ -72,7 +73,7 @@
         <div class="flex-1">
             <a href="{{ url('/') }}" class="btn btn-ghost text-lg font-bold gap-2 text-primary">
                 <i class="fa-solid fa-house-chimney-crack"></i>
-                WebGIS Miskin & Ibadah
+                WebGIS Pemetaan Kemiskinan
             </a>
         </div>
         <div class="flex-none">
@@ -88,6 +89,32 @@
                     </a>
                 </li>
             </ul>
+            <!-- User dropdown -->
+            <div class="dropdown dropdown-end ml-2">
+                <div tabindex="0" role="button" class="btn btn-ghost gap-2">
+                    <div class="avatar placeholder">
+                        <div class="bg-primary text-primary-content rounded-full w-8">
+                            <span class="text-xs font-bold">{{ substr(auth()->user()->name, 0, 1) }}</span>
+                        </div>
+                    </div>
+                    <span class="hidden sm:inline text-sm font-semibold">{{ auth()->user()->name }}</span>
+                    <i class="fa-solid fa-chevron-down text-xs opacity-50"></i>
+                </div>
+                <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg border border-base-200 mt-2">
+                    <li class="menu-title">
+                        <span class="text-xs text-base-content/50 capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? 'user') }}</span>
+                    </li>
+                    <li>
+                        <form method="POST" action="{{ route('logout') }}">
+                            @csrf
+                            <button type="submit" class="text-error w-full text-left flex items-center gap-2">
+                                <i class="fa-solid fa-right-from-bracket"></i>
+                                Keluar
+                            </button>
+                        </form>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 
@@ -177,17 +204,49 @@
             </h3>
             <div class="form-control gap-3">
                 <div class="bg-base-200 p-2 rounded text-xs font-mono" id="ib_coords">Lat: -, Lng: -</div>
-                <label class="form-control w-full">
-                    <div class="label"><span class="label-text font-bold">Nama Rumah Ibadah</span></div>
-                    <input type="text" id="ib_nama" placeholder="Contoh: Masjid Nurul Iman" class="input input-bordered w-full" />
-                </label>
+                <div class="grid grid-cols-2 gap-3">
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Nama Rumah Ibadah</span></div>
+                        <input type="text" id="ib_nama" placeholder="Contoh: Masjid Nurul Iman" class="input input-bordered w-full" />
+                    </label>
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Jenis</span></div>
+                        <select id="ib_jenis" class="select select-bordered w-full">
+                            <option value="masjid">Masjid</option>
+                            <option value="gereja">Gereja</option>
+                            <option value="pura">Pura</option>
+                            <option value="klenteng">Klenteng</option>
+                            <option value="vihara">Vihara</option>
+                        </select>
+                    </label>
+                </div>
                 <label class="form-control w-full">
                     <div class="label"><span class="label-text font-bold">Alamat</span></div>
-                    <textarea id="ib_alamat" class="textarea textarea-bordered h-20" placeholder="Alamat lengkap..."></textarea>
+                    <textarea id="ib_alamat" class="textarea textarea-bordered h-16" placeholder="Alamat lengkap..."></textarea>
                 </label>
+                <div class="grid grid-cols-2 gap-3">
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Pengurus</span></div>
+                        <input type="text" id="ib_pengurus" placeholder="Nama ketua/pengurus" class="input input-bordered w-full" />
+                    </label>
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Telepon</span></div>
+                        <input type="text" id="ib_telepon" placeholder="08..." class="input input-bordered w-full" />
+                    </label>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Jumlah Jemaah</span></div>
+                        <input type="number" id="ib_jemaah" value="100" class="input input-bordered w-full" />
+                    </label>
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Radius Analisis (m)</span></div>
+                        <input type="number" id="ib_radius" value="500" class="input input-bordered w-full" />
+                    </label>
+                </div>
                 <label class="form-control w-full">
-                    <div class="label"><span class="label-text font-bold">Radius Default Analysis (Meter)</span></div>
-                    <input type="number" id="ib_radius" value="500" class="input input-bordered w-full" />
+                    <div class="label"><span class="label-text font-bold">Keterangan</span></div>
+                    <textarea id="ib_ket" class="textarea textarea-bordered h-16" placeholder="Catatan tambahan..."></textarea>
                 </label>
             </div>
             <div class="modal-action">
@@ -205,13 +264,19 @@
             </h3>
             <div class="form-control gap-3">
                 <div class="bg-base-200 p-2 rounded text-xs font-mono" id="rm_coords">Lat: -, Lng: -</div>
+                <div class="grid grid-cols-2 gap-3">
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">ID Rumah</span></div>
+                        <input type="text" id="rm_id" placeholder="Contoh: RM-001" class="input input-bordered w-full" />
+                    </label>
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Nama Kepala Keluarga</span></div>
+                        <input type="text" id="rm_nama_kk" placeholder="Nama lengkap KK" class="input input-bordered w-full" />
+                    </label>
+                </div>
                 <label class="form-control w-full">
                     <div class="label"><span class="label-text font-bold">Alamat</span></div>
-                    <textarea id="rm_alamat" class="textarea textarea-bordered h-20" placeholder="Alamat lengkap..."></textarea>
-                </label>
-                <label class="form-control w-full">
-                    <div class="label"><span class="label-text font-bold">ID Rumah / Nama Pemilik</span></div>
-                    <input type="text" id="rm_id" placeholder="Contoh: RM-001" class="input input-bordered w-full" />
+                    <textarea id="rm_alamat" class="textarea textarea-bordered h-16" placeholder="Alamat lengkap..."></textarea>
                 </label>
                 <div class="grid grid-cols-2 gap-3">
                     <label class="form-control w-full">
@@ -223,6 +288,28 @@
                         <input type="number" id="rm_jiwa" value="4" class="input input-bordered w-full" />
                     </label>
                 </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Pekerjaan</span></div>
+                        <input type="text" id="rm_kerja" placeholder="Pekerjaan KK" class="input input-bordered w-full" />
+                    </label>
+                    <label class="form-control w-full">
+                        <div class="label"><span class="label-text font-bold">Pendapatan (Rp)</span></div>
+                        <input type="number" id="rm_duit" placeholder="Estimasi per bulan" class="input input-bordered w-full" />
+                    </label>
+                </div>
+                <label class="form-control w-full">
+                    <div class="label"><span class="label-text font-bold">Kondisi Rumah</span></div>
+                    <select id="rm_kondisi" class="select select-bordered w-full">
+                        <option value="sedang">Sedang</option>
+                        <option value="buruk">Buruk</option>
+                        <option value="sangat_buruk">Sangat Buruk</option>
+                    </select>
+                </label>
+                <label class="form-control w-full">
+                    <div class="label"><span class="label-text font-bold">Keterangan</span></div>
+                    <textarea id="rm_ket" class="textarea textarea-bordered h-16" placeholder="Catatan tambahan..."></textarea>
+                </label>
             </div>
             <div class="modal-action">
                 <button class="btn btn-ghost" onclick="modalMiskin.close()">Batal</button>
@@ -249,6 +336,11 @@
 
     <!-- ═══ JAVASCRIPT ════════════════════════════════════════════════════════ -->
     <script>
+        const authUserRole = '{{ auth()->user()->getRoleNames()->first() ?? '' }}';
+        const canEditIbadah = ['administrator', 'pengurus_ibadah'].includes(authUserRole);
+        const canEditMiskin = ['administrator', 'petugas_pendataan'].includes(authUserRole);
+        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+
         // ── CONFIG & STATE ──────────────────────────────────────────────────
         let map, currentMode = 'view';
         let layerIbadah = L.layerGroup(), layerMiskin = L.layerGroup();
@@ -261,10 +353,13 @@
 
         const icons = {
             ibadah: (color = '#22c55e') => L.divIcon({
-                html: `<div style="background:${color};width:32px;height:32px;border-radius:32px 32px 0 32px;border:3px solid white;transform:rotate(-45deg);display:flex;align-items:center;justify-center;box-shadow:0 4px 10px rgba(0,0,0,0.3);position:relative">
-                        <i class="fa-solid fa-mosque" style="transform:rotate(45deg);color:white;font-size:14px;margin-left:6px;margin-top:2px"></i>
+                html: `<div style="display:flex;flex-direction:column;align-items:center;width:36px;height:50px;">
+                        <div style="background:${color};width:36px;height:36px;border-radius:50%;border:3px solid white;box-shadow:0 4px 12px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+                            <i class="fa-solid fa-mosque" style="color:white;font-size:15px;"></i>
+                        </div>
+                        <div style="width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid ${color};margin-top:-1px;flex-shrink:0;"></div>
                        </div>`,
-                className: '', iconSize: [32, 32], iconAnchor: [0, 32], popupAnchor: [16, -35]
+                className: '', iconSize: [36, 50], iconAnchor: [18, 50], popupAnchor: [0, -52]
             }),
             miskin: (color = '#ef4444', glow = false) => L.divIcon({
                 html: `<div style="background:${color};width:24px;height:24px;border-radius:24px;border:2px solid white;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,0.3);${glow ? 'box-shadow: 0 0 15px ' + color : ''}">
@@ -282,6 +377,14 @@
         document.addEventListener('DOMContentLoaded', () => {
             initMap();
             loadData();
+
+            // Hide add buttons for roles that can't edit
+            if (!canEditIbadah) {
+                document.querySelectorAll('[data-mode="ibadah"], #btnModeIbadah, .btn-add-ibadah').forEach(el => el.classList.add('hidden'));
+            }
+            if (!canEditMiskin) {
+                document.querySelectorAll('[data-mode="miskin"], #btnModeMiskin, .btn-add-miskin').forEach(el => el.classList.add('hidden'));
+            }
         });
 
         function initMap() {
@@ -505,7 +608,7 @@
             try {
                 const res = await fetch(`{{ url('/api/ibadah') }}/${activeIbadah.id}`, {
                     method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
+                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                     body: JSON.stringify({
                         id: activeIbadah.id,
                         nama: activeIbadah.nama,
@@ -530,22 +633,31 @@
 
         // ── POPUPS ──────────────────────────────────────────────────────────
         function buildPopupIbadah(item) {
-            return `<div class="p-1">
-                <div class="font-bold text-sm">🕌 ${item.nama}</div>
-                <div class="text-[10px] text-gray-500 mb-2">${item.alamat}</div>
+            return `<div class="p-2 min-w-[200px]">
+                <div class="font-bold text-base text-primary">🕌 ${item.nama}</div>
+                <div class="badge badge-sm badge-outline mb-2 capitalize">${item.jenis || 'Ibadah'}</div>
+                <div class="text-[10px] text-gray-500 mb-1"><i class="fa-solid fa-location-dot"></i> ${item.alamat}</div>
+                <div class="grid grid-cols-2 gap-2 my-2 text-[10px] bg-base-200 p-2 rounded">
+                    <div><strong>Pengurus:</strong><br>${item.pengurus || '-'}</div>
+                    <div><strong>Jemaah:</strong><br>${item.jumlah_jemaah || 0}</div>
+                </div>
                 <div class="flex gap-1 border-t pt-2 mt-1">
-                    <button class="btn btn-xs btn-outline btn-error" onclick="prepDelete('ibadah', ${item.id})">Hapus</button>
+                    ${canEditIbadah ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('ibadah', ${item.id})">Hapus</button>` : ''}
                 </div>
             </div>`;
         }
 
         function buildPopupMiskin(item) {
-            return `<div class="p-1">
-                <div class="font-bold text-sm">🏠 ID: ${item.id_rumah}</div>
-                <div class="text-[10px] text-gray-500 mb-1">${item.alamat || 'Alamat tidak tersedia'}</div>
-                <div class="text-[10px] text-gray-400">KK: ${item.jumlah_kk} | Jiwa: ${item.jumlah_orang}</div>
+            return `<div class="p-2 min-w-[200px]">
+                <div class="font-bold text-base text-error">🏠 ${item.nama_kk || 'Keluarga Miskin'}</div>
+                <div class="text-[10px] text-gray-400 mb-1">ID: ${item.id_rumah}</div>
+                <div class="text-[10px] text-gray-500 mb-1"><i class="fa-solid fa-location-dot"></i> ${item.alamat || '-'}</div>
+                <div class="grid grid-cols-2 gap-2 my-2 text-[10px] bg-base-200 p-2 rounded">
+                    <div><strong>KK/Jiwa:</strong><br>${item.jumlah_kk}/${item.jumlah_orang}</div>
+                    <div><strong>Kondisi:</strong><br><span class="capitalize">${item.kondisi_rumah || '-'}</span></div>
+                </div>
                 <div class="flex gap-1 border-t pt-2 mt-1">
-                    <button class="btn btn-xs btn-outline btn-error" onclick="prepDelete('miskin', '${item.id_rumah}')">Hapus</button>
+                    ${canEditMiskin ? `<button class="btn btn-xs btn-error btn-outline" onclick="prepDelete('miskin', '${item.id_rumah}')">Hapus</button>` : ''}
                 </div>
             </div>`;
         }
@@ -555,17 +667,22 @@
             const pos = tempMarker.getLatLng();
             const data = {
                 nama: document.getElementById('ib_nama').value,
+                jenis: document.getElementById('ib_jenis').value,
                 alamat: document.getElementById('ib_alamat').value,
                 latitude: pos.lat, longitude: pos.lng,
-                radius: document.getElementById('ib_radius').value
+                radius: document.getElementById('ib_radius').value,
+                jumlah_jemaah: document.getElementById('ib_jemaah').value,
+                pengurus: document.getElementById('ib_pengurus').value,
+                telepon: document.getElementById('ib_telepon').value,
+                keterangan: document.getElementById('ib_ket').value
             };
             const btn = document.getElementById('btnSaveIbadah');
             btn.disabled = true;
             
-            const res = await fetch('{{ url('/api/ibadah') }}', { 
-                method: 'POST', 
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data) 
+            const res = await fetch('{{ url('/api/ibadah') }}', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify(data)
             });
             const resJson = await res.json();
             if (resJson.success) {
@@ -580,18 +697,23 @@
             const pos = tempMarker.getLatLng();
             const data = {
                 id_rumah: document.getElementById('rm_id').value,
+                nama_kk: document.getElementById('rm_nama_kk').value,
                 alamat: document.getElementById('rm_alamat').value,
                 jumlah_kk: document.getElementById('rm_kk').value,
                 jumlah_orang: document.getElementById('rm_jiwa').value,
-                latitude: pos.lat, longitude: pos.lng
+                latitude: pos.lat, longitude: pos.lng,
+                pekerjaan: document.getElementById('rm_kerja').value,
+                pendapatan: document.getElementById('rm_duit').value,
+                kondisi_rumah: document.getElementById('rm_kondisi').value,
+                keterangan: document.getElementById('rm_ket').value
             };
             const btn = document.getElementById('btnSaveMiskin');
             btn.disabled = true;
 
-            const res = await fetch('{{ url('/api/miskin') }}', { 
-                method: 'POST', 
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(data) 
+            const res = await fetch('{{ url('/api/miskin') }}', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                body: JSON.stringify(data)
             });
             const resJson = await res.json();
             if (resJson.success) {
@@ -609,10 +731,10 @@
                 : { id_rumah: id, alamat: oldData.alamat, jumlah_kk: oldData.jumlah_kk, jumlah_orang: oldData.jumlah_orang, latitude: latlng.lat, longitude: latlng.lng };
             
             try {
-                const res = await fetch(endpoint, { 
-                    method: 'PUT', 
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(payload) 
+                const res = await fetch(endpoint, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+                    body: JSON.stringify(payload)
                 });
                 const resJson = await res.json();
                 if (resJson.success) {
@@ -637,9 +759,9 @@
 
         document.getElementById('confirmDeleteBtn').onclick = async () => {
             const { type, id } = deleteTarget;
-            const res = await fetch(`{{ url('/api') }}/${type}/${id}`, { 
-                method: 'DELETE', 
-                headers: { 'Content-Type': 'application/json' }
+            const res = await fetch(`{{ url('/api') }}/${type}/${id}`, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken }
             });
             const resJson = await res.json();
             if (resJson.success) {
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index ba810da..4bac9b0 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -3,7 +3,8 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>WebGIS Miskin & Ibadah</title>
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>WebGIS Pemetaan Kemiskinan</title>
 
     <!-- Leaflet -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@@ -68,7 +69,7 @@
         <div class="hero-content text-center flex-col gap-2">
             <!-- Logo -->
             <div class="text-7xl mb-2">🏘️</div>
-            <h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Miskin & Ibadah</h1>
+            <h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Pemetaan Kemiskinan</h1>
             <p class="max-w-md text-base-content/60 mt-2 mb-6 leading-relaxed">
                 Sistem Informasi Geografis untuk pemetaan rumah ibadah dan 
                 analisis sebaran keluarga kurang mampu.
@@ -86,6 +87,19 @@
                 </a>
             </div>
 
+            <!-- User info -->
+            <div class="flex items-center gap-2 text-sm text-base-content/50 mt-2">
+                <i class="fa-solid fa-user text-xs"></i>
+                <span>{{ auth()->user()->name }}</span>
+                <span class="opacity-30">•</span>
+                <span class="capitalize">{{ str_replace('_', ' ', auth()->user()->getRoleNames()->first() ?? '') }}</span>
+                <span class="opacity-30">•</span>
+                <form method="POST" action="{{ route('logout') }}" class="inline">
+                    @csrf
+                    <button type="submit" class="hover:text-error transition-colors underline underline-offset-2">Keluar</button>
+                </form>
+            </div>
+
             <!-- Redirect progress -->
             <div class="mt-8 w-72">
                 <p class="text-xs text-base-content/40 mb-2">Mengarahkan ke halaman Peta dalam 5 detik...</p>
diff --git a/tests/Feature/AuthTest.php b/tests/Feature/AuthTest.php
index 8709ca0..21ed0a2 100644
--- a/tests/Feature/AuthTest.php
+++ b/tests/Feature/AuthTest.php
@@ -105,4 +105,27 @@ class AuthTest extends TestCase
         $response = $this->actingAs($viewer)->delete('/api/ibadah/999');
         $response->assertStatus(403);
     }
+
+    public function test_data_page_shows_user_name_and_logout(): void
+    {
+        $this->artisan('db:seed', ['--class' => 'RolesAndAdminSeeder']);
+        $user = User::where('email', 'admin@webgis.local')->first();
+
+        $response = $this->actingAs($user)->get('/data');
+
+        $response->assertStatus(200);
+        $response->assertSee('Keluar');
+        $response->assertSee($user->name);
+    }
+
+    public function test_map_page_passes_user_role_to_js(): void
+    {
+        $this->artisan('db:seed', ['--class' => 'RolesAndAdminSeeder']);
+        $user = User::where('email', 'admin@webgis.local')->first();
+
+        $response = $this->actingAs($user)->get('/map');
+
+        $response->assertStatus(200);
+        $response->assertSee("authUserRole = 'administrator'", false);
+    }
 }
