fixing download admin

2026-05-05 10:12:25 +07:00 · 2026-05-05 10:12:25 +07:00 · 5786369973
commit 5786369973
parent 8c0aecd4aa
5 changed files with 568 additions and 170 deletions
--- a/app/Http/Controllers/AuthController.php
+++ b/app/Http/Controllers/AuthController.php
@ -39,7 +39,6 @@ class AuthController extends Controller
            $request->session()->regenerate();
            return redirect()->intended('/');
        }
-
        // =====================
        // Login Admin
        // =====================
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@ -226,7 +226,6 @@ class DashboardController extends Controller
                ->where('statusenabled', true)
                ->where('status_action', 'approved');

-        if (!$isAdmin) {
            if (in_array(22, $unitIds, true)) {
                // akses semua unit
            } elseif (($user?->username === 'admin.turt')) {
@ -234,7 +233,6 @@ class DashboardController extends Controller
            } else {
                $baseQuery = $baseQuery->whereIn('id_unit_kerja', $unitIds);
            }
-        }

        $query = (clone $baseQuery)
                ->when(!empty($kategoriIds) || !empty($kategoriTypes) || !empty($kategoriHukumValues), function ($q) use ($kategoriIds, $kategoriTypes, $kategoriHukumValues) {
@ -963,6 +961,7 @@ class DashboardController extends Controller
        }

        $user = auth()->user()->dataUser;
+        if($user){
        $mapping = MappingUnitKerjaPegawai::where('statusenabled', true)
            ->where('objectpegawaifk', $user->id)->where('isprimary', true)
            ->first();
@ -979,6 +978,8 @@ class DashboardController extends Controller
                    'id_unit_kerja' => $mapping ? $mapping->objectunitkerjapegawaifk : null,
                    'id_sub_unit_kerja' => $mapping ? $mapping->objectsubunitkerjapegawaifk : null,
                ]);
+        }
+        

        $tempDir = storage_path('app/temp');
        if (!is_dir($tempDir)) {
@ -2711,7 +2712,20 @@ class DashboardController extends Controller
    {
        $keyword = $request->query('keyword');
        $perPage = (int) $request->query('per_page', 10);
-        $query = FileDirectory::where('statusenabled', true)
+        $perPage = max(1, min(100, $perPage));
+
+        $query = FileDirectory::query()
+            ->select([
+                'file_directory_id',
+                'nama_dokumen',
+                'no_dokumen',
+                'file',
+                'entry_at',
+                'id_unit_kerja',
+                'is_akre',
+            ])
+            ->with(['unit:id,name'])
+            ->where('statusenabled', true)
            ->where('status_action', 'approved')
            ->where('is_akre', true);

@ -2723,7 +2737,9 @@ class DashboardController extends Controller
                    ->orWhere('file', 'ILIKE', "%{$keyword}%"); // Cari juga berdasarkan nama file di path
            });
        });
-        $data = $query->orderBy('entry_at', 'desc')->paginate($perPage);
+        $data = $query
+            ->orderBy('entry_at', 'desc')
+            ->paginate($perPage);

        return response()->json([
            'status' => true,
@ -2731,10 +2747,14 @@ class DashboardController extends Controller
            'data' => $data->items(),
            'pagination' => [
                'current_page' => $data->currentPage(),
+                'next_page'    => $data->hasMorePages() ? $data->currentPage() + 1 : null,
+                'prev_page'    => $data->currentPage() > 1 ? $data->currentPage() - 1 : null,
                'total'        => $data->total(),
                'per_page'     => $data->perPage(),
                'last_page'    => $data->lastPage(),
                'has_more'     => $data->hasMorePages(),
+                'from'         => $data->firstItem(),
+                'to'           => $data->lastItem(),
            ]
        ]);
    }
--- a/resources/views/dataAkreditasi/index.blade.php
+++ b/resources/views/dataAkreditasi/index.blade.php
@ -144,6 +144,8 @@
    let expandedFolders = new Set();
    let searchTimer;
    const btn = document.getElementById('btnDownloadMultiple');
+    const tableState = { page: 1, pageSize: 10, lastPage: 1, total: 0, from: 0, to: 0, search: '' };
+    const paginationEl = document.getElementById('paginationControls');
    // === INITIALIZATION ===
    document.addEventListener('DOMContentLoaded', () => {
        fetchData();
@ -156,6 +158,7 @@
        document.getElementById('tableSearch').addEventListener('input', (e) => {
            clearTimeout(searchTimer);
            searchTimer = setTimeout(() => {
+                tableState.page = 1;
                fetchData(e.target.value, 1);
            }, 500);
        });
@ -163,6 +166,7 @@
        // Per Page Change
        document.getElementById('tablePageSize').addEventListener('change', (e) => {
            const keyword = document.getElementById('tableSearch').value;
+            tableState.page = 1;
            fetchData(keyword, 1);
        });

@ -185,7 +189,11 @@
     */
    function fetchData(keyword = '', page = 1) {
        const tbody = document.getElementById('tableDataAkreditasi');
-        const perPage = document.getElementById('tablePageSize').value;
+        const perPage = parseInt(document.getElementById('tablePageSize').value, 10) || 10;
+
+        tableState.search = keyword;
+        tableState.pageSize = perPage;
+        tableState.page = page;

        tbody.innerHTML = '<tr><td colspan="6" class="text-center">Memuat data...</td></tr>';

@ -195,7 +203,13 @@
                if (response.status) {
                    currentData = response.data || [];
                    renderTable(keyword);
-                    updateSummary(response.pagination.total);
+                    const pag = response.pagination || {};
+                    tableState.total = pag.total || 0;
+                    tableState.lastPage = pag.last_page || 1;
+                    tableState.from = pag.from || 0;
+                    tableState.to = pag.to || 0;
+                    renderPagination(tableState.lastPage);
+                    updateSummary();
                } else {
                    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger">${response.message}</td></tr>`;
                }
@ -427,9 +441,63 @@
        countLabel.innerText = `${selectedIds.length} dipilih`;
    }

-    function updateSummary(total) {
+    function updateSummary() {
        const summary = document.getElementById('tableSummary');
-        if (summary) summary.innerText = `Total: ${total} data`;
+        if (!summary) return;
+
+        if (!tableState.total) {
+            summary.innerText = 'Tidak ada data';
+            return;
+        }
+
+        const from = tableState.from || 0;
+        const to = tableState.to || 0;
+        summary.innerText = `Menampilkan ${from} - ${to} dari ${tableState.total} data`;
+    }
+
+    function renderPagination(totalPages){
+        if(!paginationEl) return;
+        if(totalPages <= 1){
+            paginationEl.innerHTML = '';
+            return;
+        }
+
+        const maxButtons = 5;
+        let start = Math.max(1, tableState.page - Math.floor(maxButtons/2));
+        let end = Math.min(totalPages, start + maxButtons - 1);
+        start = Math.max(1, end - maxButtons + 1);
+
+        let buttons = '';
+        buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="prev" ${tableState.page === 1 ? 'disabled' : ''}>‹ Sebelumnya</button>`;
+
+        for(let i=start; i<=end; i++){
+            buttons += `<button class="btn btn-sm ${i === tableState.page ? 'btn-primary' : 'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
+        }
+
+        buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="next" ${tableState.page === totalPages ? 'disabled' : ''}>Berikutnya ›</button>`;
+
+        paginationEl.innerHTML = `
+            <div class="d-flex align-items-center gap-2 flex-wrap">
+                <div class="btn-group" role="group">${buttons}</div>
+                <span class="small text-muted">Halaman ${tableState.page} dari ${totalPages}</span>
+            </div>
+        `;
+    }
+
+    if(paginationEl){
+        paginationEl.addEventListener('click', (e) => {
+            const page = e.target.getAttribute('data-page');
+            if(!page) return;
+
+            if(page === 'prev' && tableState.page > 1) tableState.page--;
+            else if(page === 'next'){
+                if(tableState.page < tableState.lastPage) tableState.page++;
+            }else{
+                tableState.page = parseInt(page, 10) || 1;
+            }
+
+            fetchData(tableState.search || '', tableState.page);
+        });
    }

    const downloadBtn = document.getElementById('btnDownloadMultiple');
--- a/resources/views/layout/partials/topnav.blade.php
+++ b/resources/views/layout/partials/topnav.blade.php
@ -181,128 +181,354 @@
 document.addEventListener('DOMContentLoaded', function() {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';

-    function setList(listEl, items, itemClass = '') {
-        if (!listEl) return;
+    /*
+    |--------------------------------------------------------------------------
+    | HELPER
+    |--------------------------------------------------------------------------
+    */

-        if (!items.length) {
-        listEl.innerHTML = '<div class="dropdown-item text-muted small">Tidak ada notifikasi</div>';
+    function escapeHtml(value) {
+        return String(value ?? '')
+            .replaceAll('&', '&amp;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('"', '&quot;')
+            .replaceAll("'", '&#039;');
+    }
+
+    function ajaxGet(url) {
+        return fetch(url, {
+            method: 'GET',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            }
+        });
+    }
+
+    function ajaxPost(url) {
+        return fetch(url, {
+            method: 'POST',
+            headers: {
+                'X-CSRF-TOKEN': csrfToken,
+                'X-Requested-With': 'XMLHttpRequest',
+                'Accept': 'application/json'
+            }
+        });
+    }
+
+    /*
+    |--------------------------------------------------------------------------
+    | NOTIFIKASI BIASA
+    |--------------------------------------------------------------------------
+    */
+
+    const notifListEl = document.getElementById('notifList');
+    const notifCountTextEl = document.getElementById('notifCountText');
+    const notifBadgeEl = document.getElementById('notifCountBadge');
+    const notifToggle = document.getElementById('dropNotif') || document.getElementById('drop1');
+
+    function setNotifList(items) {
+        if (!notifListEl) return;
+
+        if (!items || !items.length) {
+            notifListEl.innerHTML = `
+                <div class="dropdown-item text-muted small">
+                    Tidak ada notifikasi
+                </div>
+            `;
            return;
        }

-        listEl.innerHTML = items.map(item => `
-        <a href="${item.url || '#'}" class="dropdown-item d-flex align-items-start gap-2 ${itemClass}" data-notif-id="${item.id ?? ''}">
-            <span class="badge ${item.is_read ? 'bg-secondary' : 'bg-primary'} rounded-circle"
+        notifListEl.innerHTML = items.map(item => {
+            const url = item.url || '#';
+            const text = escapeHtml(item.text_notifikasi || '-');
+            const createdAt = escapeHtml(item.created_at || '');
+            const isRead = item.is_read ? true : false;
+
+            return `
+                <a href="${url}" class="dropdown-item d-flex align-items-start gap-2">
+                    <span class="badge ${isRead ? 'bg-secondary' : 'bg-primary'} rounded-circle"
                          style="width:10px;height:10px;margin-top:6px;"></span>
                    <div>
-            <div class="fw-semibold">${item.text_notifikasi || '-'}</div>
-            <div class="small text-muted">${item.created_at || ''}</div>
+                        <div class="fw-semibold">${text}</div>
+                        <div class="small text-muted">${createdAt}</div>
                    </div>
                </a>
-        `).join('');
+            `;
+        }).join('');
    }

-    function hydrateNotification(endpoint, els, errorText) {
-        fetch(endpoint)
+    function setNotifBadge(unread) {
+        unread = Number(unread || 0);
+
+        if (notifCountTextEl) {
+            notifCountTextEl.textContent = `${unread} baru`;
+        }
+
+        if (!notifBadgeEl) return;
+
+        if (unread > 0) {
+            notifBadgeEl.classList.remove('d-none');
+            notifBadgeEl.textContent = unread > 99 ? '99+' : unread;
+        } else {
+            notifBadgeEl.classList.add('d-none');
+            notifBadgeEl.textContent = '0';
+        }
+    }
+
+    function loadNotifications() {
+        ajaxGet('/data/notifications')
            .then(r => r.json())
            .then(res => {
                const unread = res?.status ? Number(res.unread || 0) : 0;
                const items = res?.status ? (res.data || []) : [];

-            // 🔴 HANDLE DOT
-            if (els.dotEl) {
-            if (unread > 0) {
-                els.dotEl.classList.remove('d-none');
-            } else {
-                els.dotEl.classList.add('d-none');
-            }
-            }
-
-            setList(els.listEl, items, els.itemClass || '');
+                setNotifBadge(unread);
+                setNotifList(items);
            })
            .catch(() => {
-            if (els.listEl) {
-            els.listEl.innerHTML = `<div class="dropdown-item text-muted small">${errorText}</div>`;
+                if (notifListEl) {
+                    notifListEl.innerHTML = `
+                        <div class="dropdown-item text-muted small">
+                            Gagal memuat notifikasi
+                        </div>
+                    `;
                }
+
+                setNotifBadge(0);
            });
    }

-    function attachMarkRead(toggleEl, els, endpoint) {
-        if (!toggleEl) return;
+    function markNotificationsAsRead() {
+        ajaxPost('/data/notifications/read')
+            .then(() => {
+                setNotifBadge(0);

-        toggleEl.addEventListener('show.bs.dropdown', () => {
-        fetch(endpoint, {
-            method: 'POST',
-            headers: {
-            'X-CSRF-TOKEN': csrfToken,
-            'X-Requested-With': 'XMLHttpRequest'
+                if (notifListEl) {
+                    notifListEl.querySelectorAll('.badge').forEach(badge => {
+                        badge.classList.remove('bg-primary');
+                        badge.classList.add('bg-secondary');
+                    });
                }
-        }).then(() => {
-            if (els.dotEl) els.dotEl.classList.add('d-none');
-        }).catch(() => {});
+            })
+            .catch(() => {});
+    }
+
+    if (notifToggle) {
+        notifToggle.addEventListener('show.bs.dropdown', function() {
+            markNotificationsAsRead();
        });
    }

-    // 🔴 EXPIRED
-    const expiredEls = {
-        listEl: document.getElementById('expiredNotifList'),
-        dotEl: document.getElementById('expiredDot'),
-        itemClass: 'js-expired-notif-item'
-    };
+    /*
+    |--------------------------------------------------------------------------
+    | NOTIFIKASI EXPIRED
+    |--------------------------------------------------------------------------
+    */

-    hydrateNotification('/data/expired-notifications', expiredEls, 'Gagal memuat notifikasi expired');
-    attachMarkRead(
-        document.getElementById('dropExpired'),
-        expiredEls,
-        '/data/expired-notifications/read'
-    );
+    const expiredListEl = document.getElementById('expiredNotifList');
+    const expiredDotEl = document.getElementById('expiredDot');
+    const expiredToggle = document.getElementById('dropExpired');

-    // 🔔 NOTIF
-    const notifEls = {
-        listEl: document.getElementById('notifList'),
-        dotEl: document.getElementById('notifDot')
-    };
+    function setExpiredList(items) {
+        if (!expiredListEl) return;

-    hydrateNotification('/data/notifications', notifEls, 'Gagal memuat notifikasi');
-    attachMarkRead(
-        document.getElementById('dropNotif'),
-        notifEls,
-        '/data/notifications/read'
-    );
+        if (!items || !items.length) {
+            expiredListEl.innerHTML = `
+                <div class="dropdown-item text-muted small">
+                    Tidak ada notifikasi expired
+                </div>
+            `;
+            return;
+        }
+
+        expiredListEl.innerHTML = items.map(item => {
+            const url = item.url || '#';
+            const text = escapeHtml(item.text_notifikasi || '-');
+            const createdAt = escapeHtml(item.created_at || '');
+            const isRead = item.is_read ? true : false;
+
+            const docId = item.doc_id || item.document_id || item.dokumen_id || item.id || '';
+
+            return `
+                <a href="${url}"
+                   class="dropdown-item d-flex align-items-start gap-2 js-expired-notif-item"
+                   data-doc-id="${docId}">
+                    <span class="badge ${isRead ? 'bg-secondary' : 'bg-warning'} rounded-circle"
+                          style="width:10px;height:10px;margin-top:6px;"></span>
+                    <div>
+                        <div class="fw-semibold">${text}</div>
+                        <div class="small text-muted">${createdAt}</div>
+                    </div>
+                </a>
+            `;
+        }).join('');
+    }
+
+    function setExpiredDot(unread) {
+        unread = Number(unread || 0);
+
+        if (!expiredDotEl) return;
+
+        if (unread > 0) {
+            expiredDotEl.classList.remove('d-none');
+        } else {
+            expiredDotEl.classList.add('d-none');
+        }
+    }
+
+    function loadExpiredNotifications() {
+        ajaxGet('/data/expired-notifications')
+            .then(r => r.json())
+            .then(res => {
+                const unread = res?.status ? Number(res.unread || 0) : 0;
+                const items = res?.status ? (res.data || []) : [];
+
+                setExpiredDot(unread);
+                setExpiredList(items);
+            })
+            .catch(() => {
+                if (expiredListEl) {
+                    expiredListEl.innerHTML = `
+                        <div class="dropdown-item text-muted small">
+                            Gagal memuat notifikasi expired
+                        </div>
+                    `;
+                }
+
+                setExpiredDot(0);
+            });
+    }
+
+    function markExpiredNotificationsAsRead() {
+        ajaxPost('/data/expired-notifications/read')
+            .then(() => {
+                setExpiredDot(0);
+
+                if (expiredListEl) {
+                    expiredListEl.querySelectorAll('.badge').forEach(badge => {
+                        badge.classList.remove('bg-warning');
+                        badge.classList.add('bg-secondary');
+                    });
+                }
+            })
+            .catch(() => {});
+    }
+
+    if (expiredToggle) {
+        expiredToggle.addEventListener('show.bs.dropdown', function() {
+            markExpiredNotificationsAsRead();
+        });
+    }
+
+    /*
+    |--------------------------------------------------------------------------
+    | MODAL DETAIL EXPIRED
+    |--------------------------------------------------------------------------
+    */

-    // 📋 DETAIL MODAL (EXPIRED)
    const expiredDetailModalEl = document.getElementById('expiredDetailModal');
-    const expiredDetailModal = (expiredDetailModalEl && window.bootstrap?.Modal)
-        ? new bootstrap.Modal(expiredDetailModalEl)
-        : null;
+
+    let expiredDetailModal = null;
+
+    if (expiredDetailModalEl && window.bootstrap && window.bootstrap.Modal) {
+        expiredDetailModal = new bootstrap.Modal(expiredDetailModalEl);
+    }

    const expiredState = {
        docId: null,
        page: 1,
-        perPage: 10,
+        perPage: 10
    };

    const expiredDetailTbody = document.getElementById('expiredDetailTbody');
    const expiredDetailInfo = document.getElementById('expiredDetailInfo');
    const expiredDetailPageText = document.getElementById('expiredDetailPageText');

-    function setExpiredLoading(text = 'Memuat...') {
+    const expiredOpenDetailBtn = document.getElementById('expiredOpenDetailBtn');
+    const expiredFilterDaysMax = document.getElementById('expiredFilterDaysMax');
+    const expiredApplyFilterBtn = document.getElementById('expiredApplyFilterBtn');
+    const expiredResetFilterBtn = document.getElementById('expiredResetFilterBtn');
+    const expiredDetailPrevBtn = document.getElementById('expiredDetailPrevBtn');
+    const expiredDetailNextBtn = document.getElementById('expiredDetailNextBtn');
+
+    function showExpiredModal() {
+        if (expiredDetailModal) {
+            expiredDetailModal.show();
+            return;
+        }
+
+        /**
+         * Fallback kalau bootstrap.Modal tidak terbaca.
+         * Ini berguna kalau Bootstrap JS belum include.
+         */
+        if (expiredDetailModalEl) {
+            expiredDetailModalEl.classList.add('show');
+            expiredDetailModalEl.style.display = 'block';
+            expiredDetailModalEl.removeAttribute('aria-hidden');
+            expiredDetailModalEl.setAttribute('aria-modal', 'true');
+
+            document.body.classList.add('modal-open');
+
+            let backdrop = document.createElement('div');
+            backdrop.className = 'modal-backdrop fade show';
+            backdrop.id = 'manualExpiredBackdrop';
+            document.body.appendChild(backdrop);
+        } else {
+            alert('Modal expiredDetailModal tidak ditemukan di HTML.');
+        }
+    }
+
+    function hideExpiredModalFallback() {
+        if (!expiredDetailModalEl) return;
+
+        expiredDetailModalEl.classList.remove('show');
+        expiredDetailModalEl.style.display = 'none';
+        expiredDetailModalEl.setAttribute('aria-hidden', 'true');
+        expiredDetailModalEl.removeAttribute('aria-modal');
+
+        document.body.classList.remove('modal-open');
+
+        const backdrop = document.getElementById('manualExpiredBackdrop');
+        if (backdrop) {
+            backdrop.remove();
+        }
+    }
+
+    expiredDetailModalEl?.querySelectorAll('[data-bs-dismiss="modal"]').forEach(btn => {
+        btn.addEventListener('click', function() {
+            if (!expiredDetailModal) {
+                hideExpiredModalFallback();
+            }
+        });
+    });
+
+    function setExpiredDetailLoading(text = 'Memuat...') {
        if (!expiredDetailTbody) return;
+
        expiredDetailTbody.innerHTML = `
            <tr>
-                <td colspan="7" class="text-muted small">${text}</td>
+                <td colspan="7" class="text-muted small">${escapeHtml(text)}</td>
            </tr>
        `;
    }

    function buildExpiredDetailParams() {
-        const daysMax = document.getElementById('expiredFilterDaysMax')?.value ?? '';
-
        const params = new URLSearchParams();
+
        params.set('page', String(expiredState.page));
        params.set('per_page', String(expiredState.perPage));

-        if (expiredState.docId) params.set('doc_id', String(expiredState.docId));
-        if (daysMax !== '' && daysMax !== null) params.set('days_left_max', String(daysMax));
+        if (expiredState.docId) {
+            params.set('doc_id', String(expiredState.docId));
+        }
+
+        const daysMax = expiredFilterDaysMax?.value ?? '';
+
+        if (daysMax !== '' && daysMax !== null) {
+            params.set('days_left_max', String(daysMax));
+        }

        return params;
    }
@ -313,20 +539,30 @@
        const page = Number(meta?.page || expiredState.page);
        const maxPage = total ? Math.ceil(total / perPage) : 1;

-        if (expiredDetailPageText) expiredDetailPageText.textContent = String(page);
+        if (expiredDetailPageText) {
+            expiredDetailPageText.textContent = String(page);
+        }
+
        if (expiredDetailInfo) {
            const start = total ? ((page - 1) * perPage + 1) : 0;
            const end = Math.min(page * perPage, total);
-            expiredDetailInfo.textContent = total ? `Menampilkan ${start}-${end} dari ${total} data` : 'Tidak ada data';
+
+            expiredDetailInfo.textContent = total
+                ? `Menampilkan ${start}-${end} dari ${total} data`
+                : 'Tidak ada data';
        }

-        const prevBtn = document.getElementById('expiredDetailPrevBtn');
-        const nextBtn = document.getElementById('expiredDetailNextBtn');
-        if (prevBtn) prevBtn.disabled = page <= 1;
-        if (nextBtn) nextBtn.disabled = page >= maxPage;
+        if (expiredDetailPrevBtn) {
+            expiredDetailPrevBtn.disabled = page <= 1;
+        }
+
+        if (expiredDetailNextBtn) {
+            expiredDetailNextBtn.disabled = page >= maxPage;
+        }

        if (!expiredDetailTbody) return;
-        if (!rows?.length) {
+
+        if (!rows || !rows.length) {
            expiredDetailTbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-muted small">Tidak ada data</td>
@ -337,12 +573,18 @@

        expiredDetailTbody.innerHTML = rows.map((row, idx) => {
            const no = (page - 1) * perPage + (idx + 1);
-            const unit = row.unit_name || '-';
-            const noDok = row.no_dokumen || '-';
-            const nama = row.nama_dokumen || '-';
-            const tgl = row.tgl_expired_label || '-';
-            const daysLeft = (row.days_left === null || row.days_left === undefined) ? '-' : String(row.days_left);
-            const previewUrl = row.preview_url || '#';
+
+            const unit = escapeHtml(row.unit_name || row.nama_unit || '-');
+            const noDok = escapeHtml(row.no_dokumen || row.nomor_dokumen || '-');
+            const nama = escapeHtml(row.nama_dokumen || row.nama_document || row.nama || '-');
+            const tgl = escapeHtml(row.tgl_expired_label || row.tgl_expired || row.expired_date || '-');
+
+            const daysLeft = row.days_left === null || row.days_left === undefined
+                ? '-'
+                : escapeHtml(row.days_left);
+
+            const previewUrl = row.preview_url || row.url || '#';
+
            return `
                <tr>
                    <td>${no}</td>
@ -352,76 +594,145 @@
                    <td>${tgl}</td>
                    <td>${daysLeft}</td>
                    <td>
-                        <a class="btn btn-sm btn-outline-primary" href="${previewUrl}" target="_blank" rel="noopener">Preview</a>
+                        <a class="btn btn-sm btn-outline-primary"
+                           href="${previewUrl}"
+                           target="_blank"
+                           rel="noopener">
+                            Preview
+                        </a>
                    </td>
                </tr>
            `;
        }).join('');
    }

-    async function loadExpiredDetail() {
-        setExpiredLoading();
+    function loadExpiredDetail() {
+        setExpiredDetailLoading();
+
        const params = buildExpiredDetailParams();

-        try {
-            const r = await fetch(`/data/expired-notifications/detail?${params.toString()}`, {
-                headers: { 'X-Requested-With': 'XMLHttpRequest' }
-            });
-            const res = await r.json();
+        ajaxGet(`/data/expired-notifications/detail?${params.toString()}`)
+            .then(r => r.json())
+            .then(res => {
                if (!res?.status) {
-                setExpiredLoading(res?.message || 'Gagal memuat data');
+                    setExpiredDetailLoading(res?.message || 'Gagal memuat data');
                    return;
                }
+
                renderExpiredDetail(res.data || [], res.meta || {});
-        } catch (e) {
-            setExpiredLoading('Gagal memuat data');
-        }
+            })
+            .catch(() => {
+                setExpiredDetailLoading('Gagal memuat data detail expired');
+            });
    }

    function openExpiredDetail(docId = null) {
        expiredState.docId = docId ? Number(docId) : null;
        expiredState.page = 1;

-        if (expiredState.docId) {
-            const daysMaxEl = document.getElementById('expiredFilterDaysMax');
-            if (daysMaxEl) daysMaxEl.value = '';
+        /**
+         * Kalau klik dari item expired tertentu,
+         * filter hari dikosongkan supaya data berdasarkan doc_id tetap muncul.
+         */
+        if (expiredState.docId && expiredFilterDaysMax) {
+            expiredFilterDaysMax.value = '';
        }

-        if (expiredDetailModal) expiredDetailModal.show();
+        showExpiredModal();
        loadExpiredDetail();
    }

-    document.getElementById('expiredOpenDetailBtn')?.addEventListener('click', () => openExpiredDetail(null));
-
-    document.getElementById('expiredNotifList')?.addEventListener('click', (e) => {
-        const item = e.target.closest('a.js-expired-notif-item');
-        if (!item) return;
+    /**
+     * Tombol "Detail" di header expired.
+     */
+    if (expiredOpenDetailBtn) {
+        expiredOpenDetailBtn.addEventListener('click', function(e) {
            e.preventDefault();
-        openExpiredDetail(item.dataset.notifId || null);
-    });

-    document.getElementById('expiredApplyFilterBtn')?.addEventListener('click', () => {
+            expiredState.docId = null;
            expiredState.page = 1;
-        loadExpiredDetail();
-    });

-    document.getElementById('expiredResetFilterBtn')?.addEventListener('click', () => {
-        const daysMaxEl = document.getElementById('expiredFilterDaysMax');
-        if (daysMaxEl) daysMaxEl.value = '30';
+            if (expiredFilterDaysMax) {
+                expiredFilterDaysMax.value = '30';
+            }
+
+            openExpiredDetail(null);
+        });
+    }
+
+    /**
+     * Klik salah satu item expired dari dropdown.
+     * Nanti langsung buka modal detail sesuai dokumen.
+     */
+    if (expiredListEl) {
+        expiredListEl.addEventListener('click', function(e) {
+            const item = e.target.closest('a.js-expired-notif-item');
+
+            if (!item) return;
+
+            e.preventDefault();
+
+            const docId = item.dataset.docId || null;
+
+            openExpiredDetail(docId);
+        });
+    }
+
+    if (expiredApplyFilterBtn) {
+        expiredApplyFilterBtn.addEventListener('click', function() {
            expiredState.docId = null;
            expiredState.page = 1;
            loadExpiredDetail();
        });
+    }

-    document.getElementById('expiredDetailPrevBtn')?.addEventListener('click', () => {
+    if (expiredResetFilterBtn) {
+        expiredResetFilterBtn.addEventListener('click', function() {
+            expiredState.docId = null;
+            expiredState.page = 1;
+
+            if (expiredFilterDaysMax) {
+                expiredFilterDaysMax.value = '30';
+            }
+
+            loadExpiredDetail();
+        });
+    }
+
+    if (expiredDetailPrevBtn) {
+        expiredDetailPrevBtn.addEventListener('click', function() {
            if (expiredState.page <= 1) return;
+
            expiredState.page -= 1;
            loadExpiredDetail();
        });
+    }

-    document.getElementById('expiredDetailNextBtn')?.addEventListener('click', () => {
+    if (expiredDetailNextBtn) {
+        expiredDetailNextBtn.addEventListener('click', function() {
            expiredState.page += 1;
            loadExpiredDetail();
        });
+    }
+
+    /*
+    |--------------------------------------------------------------------------
+    | LOAD PERTAMA
+    |--------------------------------------------------------------------------
+    */
+
+    loadNotifications();
+    loadExpiredNotifications();
+
+    /*
+    |--------------------------------------------------------------------------
+    | REFRESH OTOMATIS
+    |--------------------------------------------------------------------------
+    */
+
+    setInterval(function() {
+        loadNotifications();
+        loadExpiredNotifications();
+    }, 60000);
 });
 </script>
--- a/routes/web.php
+++ b/routes/web.php
@ -55,7 +55,7 @@ Route::middleware(['auth:admin,web'])->group(function(){
    Route::get('/log-activity', [LogActivityController::class, 'index']);
    Route::get('/datatable/log-activity', [LogActivityController::class, 'datatable']);
    Route::get('/datatable/log-activity/{fileDirectoryId}', [LogActivityController::class, 'detailByFile']);
-    Route::get('/datatable/log-activity-pengajuan', [LogActivityController::class, 'datatableHistoryPengajuan']);
+    Route::get('/datatable/log-activity-pengajuapn', [LogActivityController::class, 'datatableHistoryPengajuan']);

    Route::get('/recap', [DashboardController::class, 'recapView']);
    Route::get('/data/recap', [DashboardController::class, 'recapData']);