diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index b56bac9..d0280d1 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -195,6 +195,10 @@ class DashboardController extends Controller
                 ->when(!empty($unitFilter), function($q) use($unitFilter){
                     $q->whereIn('id_unit_kerja', $unitFilter);
                 })
+                ->where(function ($q) {
+                    $q->whereNull('tgl_expired')
+                        ->orWhereDate('tgl_expired', '>=', now()->toDateString());
+                })
                 ->where('statusenabled', true)
                 ->where('status_action', 'approved');
 
@@ -1041,6 +1045,10 @@ class DashboardController extends Controller
         }
         $baseQuery = FileDirectory::with('kategori')
                 ->where('statusenabled', true)->where('status_action', 'approved')
+                ->where(function ($q) {
+                    $q->whereNull('tgl_expired')
+                        ->orWhereDate('tgl_expired', '>=', now()->toDateString());
+                })
                 ->when(!empty($unitIds), function ($q) use ($unitIds) {
                     $q->whereIn('id_unit_kerja', $unitIds);
                 });
@@ -1336,8 +1344,8 @@ class DashboardController extends Controller
             $mapping = MappingUnitKerjaPegawai::where('statusenabled', true)
                     ->where('objectpegawaifk', $user->id)->where('isprimary', true)
                     ->first();
-        
-        
+
+
         $payloadLog = [
             'file_directory_id' => $fileDirectoryId,
             'pegawai_id_entry' => auth()->user()->dataUser->id,
@@ -1560,7 +1568,6 @@ class DashboardController extends Controller
                 ]
             ]);
         } catch (\Throwable $th) {
-            dd($th);
             return response()->json([
                 'status' => false,
                 'message' => 'Gagal! mendapatkan data'
@@ -1571,7 +1578,11 @@ class DashboardController extends Controller
     private function buildRecapData(array $unitIds, string $keyword = ''): array
     {
         $rows = FileDirectory::where('statusenabled', true)
-            ->whereNotNull('status_action')->where('status_action', 'approved');
+                 ->where(function ($q) {
+                        $q->whereNull('tgl_expired')
+                            ->orWhereDate('tgl_expired', '>=', now()->toDateString());
+                    })
+                 ->whereNotNull('status_action')->where('status_action', 'approved');
         if(in_array(22, $unitIds)){
             $rows = $rows->pluck('file');
         }elseif(auth()->user()->username === "admin.turt"){
@@ -2455,4 +2466,249 @@ class DashboardController extends Controller
             ]
         ]);
     }
+
+    public function expDokumen(){
+        $katDok = MasterKategori::where('statusenabled', true)->select('master_kategori_directory_id', 'nama_kategori_directory')->get();
+        $authMapping = auth()->user()?->dataUser?->mappingUnitKerjaPegawai[0];
+        $authUnitKerja = $authMapping->objectunitkerjapegawaifk ?? null;
+        $authSubUnitKerja = $authMapping->objectsubunitkerjapegawaifk ?? null;
+        $data = [
+            'title' => 'Dashboard',
+            'katDok' => $katDok,
+            'authUnitKerja' => $authUnitKerja,
+            'authSubUnitKerja' => $authSubUnitKerja,
+        ];
+        return view('expDokumen.index', $data);
+    }
+
+    public function dataUnitExp(){
+        $perPage = (int) request('per_page', 10);
+        // $authUnitId = auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->objectunitkerjapegawaifk;
+        $userId = auth()->user()->dataUser->id ?? 937;
+        $mapping = MappingUnitKerjaPegawai::where('statusenabled', true)
+                ->where('objectpegawaifk', $userId)
+                ->get(['objectunitkerjapegawaifk']);
+        $unitIds = $mapping->pluck('objectunitkerjapegawaifk')
+            ->filter()      // buang null
+            ->unique()
+            ->values()
+            ->toArray();
+        $keyword = request('keyword');
+        $kategori = request('kategori');
+        $kategoriHeader = request('kategori_header');
+        $unitFilter = request('unit');
+        $kategoriValues = is_array($kategori)
+            ? array_values(array_filter($kategori))
+            : array_values(array_filter(explode(',', (string) $kategori)));
+        $kategoriHeaderValues = is_array($kategoriHeader)
+            ? array_values(array_filter($kategoriHeader))
+            : array_values(array_filter(explode(',', (string) $kategoriHeader)));
+        $allKategoriValues = array_values(array_filter(array_merge($kategoriValues, $kategoriHeaderValues)));
+        $kategoriTypes = [];
+        $kategoriIds = [];
+        $kategoriHukumValues = [];
+        foreach ($allKategoriValues as $val) {
+            $lower = strtolower(trim((string) $val));
+            if (str_starts_with($lower, 'hukum:')) {
+                $hukumVal = trim(substr((string) $val, strlen('hukum:')));
+                if ($hukumVal !== '') {
+                    $kategoriHukumValues[] = $hukumVal;
+                }
+                continue;
+            }
+            if (in_array($lower, ['akreditasi', 'akre'], true)) {
+                $kategoriTypes[] = 'akreditasi';
+                continue;
+            }
+            if ($lower === 'hukum') {
+                $kategoriTypes[] = 'hukum';
+                continue;
+            }
+            if ($lower === 'lainnya') {
+                $kategoriTypes[] = 'lainnya';
+                continue;
+            }
+            $kategoriIds[] = $val;
+        }
+        $baseQuery = FileDirectory::with('kategori')
+                    ->when(!empty($unitFilter), function($q) use($unitFilter){
+                        $q->whereIn('id_unit_kerja', $unitFilter);
+                    })
+                    ->whereNotNull('tgl_expired')
+                    ->whereDate('tgl_expired', '<', now()->toDateString())
+                    ->where('statusenabled', true)
+                    ->where('status_action', 'approved');
+
+        if(in_array(22,  $unitIds)){
+        }elseif(auth()->user()->username === "admin.turt"){
+
+        }else{
+            $baseQuery = $baseQuery->whereIn('id_unit_kerja', $unitIds);
+        }
+
+        $query = (clone $baseQuery)
+                ->when(!empty($kategoriIds) || !empty($kategoriTypes) || !empty($kategoriHukumValues), function ($q) use ($kategoriIds, $kategoriTypes, $kategoriHukumValues) {
+                    $q->where(function ($sub) use ($kategoriIds, $kategoriTypes, $kategoriHukumValues) {
+                        $hasClause = false;
+                        if (!empty($kategoriIds)) {
+                            $sub->whereIn('master_kategori_directory_id', $kategoriIds);
+                            $hasClause = true;
+                        }
+                        if (!empty($kategoriHukumValues)) {
+                            $hasClause ? $sub->orWhereIn('kategori_hukum', $kategoriHukumValues) : $sub->whereIn('kategori_hukum', $kategoriHukumValues);
+                            $hasClause = true;
+                        }
+                        if (in_array('akreditasi', $kategoriTypes, true)) {
+                            $sub->where('is_akre', true);
+                            $hasClause = true;
+                        }
+                        if (in_array('hukum', $kategoriTypes, true)) {
+                            $hasClause ? $sub->orWhereNotNull('kategori_hukum') : $sub->whereNotNull('kategori_hukum');
+                            $hasClause = true;
+                        }
+                        if (in_array('lainnya', $kategoriTypes, true)) {
+                            $hasClause ? $sub->orWhereNotNull('master_kategori_directory_id') : $sub->whereNotNull('master_kategori_directory_id');
+                        }
+                    });
+                })
+                ->when($keyword, function ($q) use ($keyword) {
+                    $q->where(function ($sub) use ($keyword) {
+                        $sub->where('nama_dokumen', 'ILIKE', "%{$keyword}%")
+                            ->orWhere('no_dokumen', 'ILIKE', "%{$keyword}%");
+                    });
+                });
+
+        $data = $query->orderBy('entry_at', 'desc')
+                ->paginate($perPage);
+
+        $items = collect($data->items())->map(function($item){
+            $item->nama_kategori = $item->kategori->nama_kategori_directory ?? $item->kategori_hukum ?? null;
+            return $item;
+        });
+        $kategoriList = (clone $baseQuery)->get()->map(function($item){
+            if (!empty($item->kategori_hukum)) {
+                return ['id' => 'hukum:' . $item->kategori_hukum, 'label' => $item->kategori_hukum];
+            }
+            $label = $item->kategori->nama_kategori_directory ?? $item->nama_kategori_directory ?? 'Kategori';
+            $id = $item->master_kategori_directory_id ?? $label;
+            return ['id' => (string) $id, 'label' => $label];
+        })->unique('id')->values();
+
+        $payload = [
+            'status' => true,
+            'message' => 'Berhasil mendapatkan data',
+            'data' => $items,
+            'kategori_list' => $kategoriList,
+            'pagination' => [
+                'current_page' => $data->currentPage(),
+                'next_page' => $data->hasMorePages() ? $data->currentPage() + 1 : null,
+                'has_more' =>  $data->hasMorePages(),
+                'last_page' => $data->lastPage(),
+                'per_page' => $data->perPage(),
+                'total' => $data->total(),
+            ]
+        ];
+        return response()->json($payload);
+    }
+
+    public function recapDataExp(){
+         try {
+            $perPage = (int) request('per_page', 10);
+            $page    = max(1, (int) request('page', 1));
+            $keyword = strtolower(request('keyword', ''));
+            // $authUnit = auth()->user()->masterPersetujuan->details->pluck('unit_pegawai_id')->unique()->toArray();
+            $user = auth()->user()->dataUser;
+            $unitIds = [];
+            if($user){
+            $mapping = MappingUnitKerjaPegawai::where('statusenabled', true)
+                ->where('objectpegawaifk', $user->id)
+                ->get(['objectunitkerjapegawaifk', 'objectsubunitkerjapegawaifk']);
+            $unitIds = $mapping->pluck('objectunitkerjapegawaifk')
+                        ->filter()      // buang null
+                        ->unique()
+                        ->values()
+                        ->all();
+            }
+            $result = $this->buildRecapDataExp($unitIds, $keyword);
+            // paginate manually
+            $total = count($result);
+            $chunks = array_chunk($result, $perPage);
+            $currentData = $chunks[$page-1] ?? [];
+
+            return response()->json([
+                'status' => true,
+                'data' => $currentData,
+                'message' => 'Berhasil mendapatkan data',
+                'pagination' => [
+                    'current_page' => $page,
+                    'per_page' => $perPage,
+                    'total' => $total,
+                    'last_page' => max(1, ceil($total / $perPage)),
+                    'has_more' => $page < max(1, ceil($total / $perPage)),
+                ]
+            ]);
+        } catch (\Throwable $th) {
+            return response()->json([
+                'status' => false,
+                'message' => 'Gagal! mendapatkan data'
+            ]);
+        }
+    }
+
+    private function buildRecapDataExp(array $unitIds, string $keyword = ''): array
+    {
+        $rows = FileDirectory::where('statusenabled', true)
+                ->whereNotNull('tgl_expired')
+                ->whereDate('tgl_expired', '<', now()->toDateString())
+                ->whereNotNull('status_action')->where('status_action', 'approved');
+        if(in_array(22, $unitIds)){
+            $rows = $rows->pluck('file');
+        }elseif(auth()->user()->username === "admin.turt"){
+            $rows = $rows->pluck('file');
+        }else{
+            $rows = $rows->whereIn('id_unit_kerja', $unitIds)->pluck('file');
+        }
+        $grouped = [];
+        foreach ($rows as $path) {
+            $parts = array_values(array_filter(explode('/', $path)));
+            if (count($parts) < 4) {
+                continue;
+            }
+            $unit = $parts[0];
+            $folder = $parts[2];
+
+            if ($keyword) {
+                $hit = str_contains(strtolower($unit), $keyword) || str_contains(strtolower($folder), $keyword);
+                if (!$hit) {
+                    continue;
+                }
+            }
+            if (!isset($grouped[$unit])) {
+                $grouped[$unit] = [];
+            }
+            if (!isset($grouped[$unit][$folder])) {
+                $grouped[$unit][$folder] = 0;
+            }
+            $grouped[$unit][$folder]++;
+        }
+
+        $result = [];
+        foreach ($grouped as $unitName => $folders) {
+            $data = [];
+            foreach ($folders as $folder => $count) {
+                $data[] = [
+                    'folder' => $folder,
+                    'count' => $count,
+                ];
+            }
+            usort($data, fn($a, $b) => $b['count'] <=> $a['count']);
+            $result[] = [
+                'unit' => $unitName,
+                'data' => $data,
+            ];
+        }
+
+        return $result;
+    }
+
 }
diff --git a/resources/views/dataUmum/index.blade.php b/resources/views/dataUmum/index.blade.php
index bb354df..3f96c78 100644
--- a/resources/views/dataUmum/index.blade.php
+++ b/resources/views/dataUmum/index.blade.php
@@ -542,7 +542,7 @@
             if(pageData.length === 0){
                 tbody.innerHTML = `
                     <tr>
-                        <td colspan="7" class="text-center text-muted py-4">
+                        <td colspan="8" class="text-center text-muted py-4">
                             Tidak ada data yang cocok
                         </td>
                     </tr>
diff --git a/resources/views/dataUnit/index.blade.php b/resources/views/dataUnit/index.blade.php
index aa5b52d..38f60b1 100644
--- a/resources/views/dataUnit/index.blade.php
+++ b/resources/views/dataUnit/index.blade.php
@@ -664,7 +664,7 @@
             if(pageData.length === 0){
                 tbody.innerHTML = `
                     <tr>
-                        <td colspan="7" class="text-center text-muted py-4">
+                        <td colspan="8" class="text-center text-muted py-4">
                             Tidak ada data yang cocok
                         </td>
                     </tr>
diff --git a/resources/views/expDokumen/index.blade.php b/resources/views/expDokumen/index.blade.php
new file mode 100644
index 0000000..0ba6883
--- /dev/null
+++ b/resources/views/expDokumen/index.blade.php
@@ -0,0 +1,1450 @@
+@extends('layout.main')
+<style>
+/* --- SELECT2: teks terlihat (hitam) --- */
+
+.select2-container--default .select2-selection--multiple {
+    background: #fff !important;
+    border: 1px solid rgb(206, 212, 218) !important;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+    color: #111 !important;
+}
+
+.select2-container--default .select2-search--inline .select2-search__field {
+    color: #111 !important;
+}
+
+.select2-container--default .select2-dropdown {
+    background: #fff !important;
+    border: 1px solid #ced4da !important;
+}
+
+.select2-container--default .select2-results__option {
+    color: #111 !important;
+}
+
+.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+    background: #e9ecef !important;
+    color: #111 !important;
+}
+
+/* tag chip */
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background: #f1f3f5 !important;
+    border: 1px solid #dee2e6 !important;
+    color: #111 !important;
+}
+.select2-container--default .select2-selection--single .select2-selection__clear {
+    display: inline-block !important;
+    font-size: 16px;
+    font-weight: bold;
+    color: #999;
+    margin-right: 8px;
+    cursor: pointer;
+}
+.table-header-filter .dropdown-menu {
+    z-index: 1080;
+}
+.table-fixed-height {
+    min-height: 70vh;
+}
+
+/* --- Warna kategori baris --- */
+.row-shade {
+    background-color: var(--row-bg, transparent) !important;
+    transition: background-color 0.2s ease;
+}
+.legend-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    display: inline-block;
+    border: 1px solid rgba(0,0,0,0.08);
+    vertical-align: middle;
+    margin-right: 6px;
+}
+</style>
+@section('body_main')
+    <div class="row">
+        <div class="col-md-12">
+            <div class="card">
+                <div class="card-body p-3">
+                    <div class="d-flex justify-content-between align-items-start mb-3">
+                        <h4 class="mb-0">Dokumen Expired</h4>
+                        <div class="d-flex align-items-start gap-3">
+                            <!-- DOWNLOAD + COUNT -->
+                                    <a
+                                        href="/download-excel/data-unit"
+                                        class="btn btn-success btn-sm"
+                                    >
+                                        <i class="ti ti-download me-1"></i>
+                                        Download Excel
+                                    </a>
+                            <div class="d-flex flex-column align-items-start">
+
+                                <button
+                                    type="button"
+                                    class="btn btn-primary btn-sm"
+                                    id="btnDownloadMultiple"
+                                    disabled
+                                >
+                                    <i class="ti ti-download me-1"></i>
+                                    Download Terpilih
+                                </button>
+
+                                <span
+                                    id="selectedCount"
+                                    class="small text-muted mt-1"
+                                >
+                                    0 dipilih
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3">
+                        <div class="d-flex flex-column flex-md-row align-items-md-center gap-2 flex-grow-1">
+                            <select id="tableUnit" style="max-width: 260px;">
+                                <option value=""></option>
+                            </select>
+                            <select id="tableKategori" class="form-select form-select-sm" style="max-width: 260px;">
+                                <option value="">Kategori (Semua)</option>
+                                <option value="akreditasi">Kategori Akreditasi</option>
+                                <option value="hukum">Kategori Hukum</option>
+                                <option value="lainnya">Kategori Lainnya</option>
+                            </select>
+                            <input type="search"
+                                       id="tableSearch"
+                                       class="form-control"
+                                       placeholder="Cari nama dokumen atau No Dokumen"
+                                       autocomplete="off">
+                                    </div>
+                            <button class="btn btn-primary" type="button" id="btnTableSearch">Cari</button>
+                    </div>
+                    <div class="table-responsive table-fixed-height" style="max-height: 70vh; overflow-y:auto;">
+                    <table class="table table-sm table-hover align-middle mb-0 table-fixed" id="lastUpdatedTable">
+                        <thead>
+                            <tr>
+                                <th class="text-center" style="width: 36px;">
+                                    <input type="checkbox" id="checkAllRows" class="form-check-input">
+                                </th>
+                                <th>Aksi</th>
+                                <th>No Dokumen</th>
+                                <th>Nama Dokumen</th>
+                                <th>
+                                    <div class="d-flex align-items-center gap-2 table-header-filter">
+                                        <span>Kategori</span>
+                                        <div class="dropdown">
+                                            <button class="btn btn-light btn-sm border" type="button" id="tableKategoriHeaderBtn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+                                                <i class="ti ti-filter"></i>
+                                            </button>
+                                            <div class="dropdown-menu p-2" id="tableKategoriHeaderMenu" style="min-width: 220px;">
+                                                <div class="small text-muted px-1">Filter kategori (BETA)</div>
+                                                <div class="dropdown-divider"></div>
+                                                <div class="kategori-header-list"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </th>
+                                <th>Unit</th>
+                                <th>Tanggal Unggah</th>
+                                <th>Pengunggah</th>
+                            </tr>
+                        </thead>
+                        <tbody id="tableDataUnit">
+                            <!-- data dari fetch masuk sini -->
+                        </tbody>
+                    </table>
+                    </div>
+
+                            <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
+                                <div class="d-flex align-items-center gap-1">
+                                    <span class="small text-muted">Tampilkan</span>
+                                    <select id="tablePageSize" class="form-select form-select-sm" style="width: 80px;">
+                                        <option value="5">5</option>
+                                        <option value="10" selected>10</option>
+                                        <option value="20">20</option>
+                                        <option value="50">50</option>
+                                        <option value="100">100</option>
+                                    </select>
+                                    <span class="small text-muted">data</span>
+                                </div>
+
+                                <div id="paginationControls" class="ms-auto"></div>
+
+                                <div class="small text-muted text-nowrap" id="tableSummary">
+                                    Memuat data...
+                                </div>
+                            </div>
+                    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-3" id="paginationControls"></div>
+
+                    <hr class="my-4">
+                    <div class="mb-3">
+                        <h5 class="mb-0">Data Rekap</h5>
+                    </div>
+                    @include('expDokumen.section.recap')
+                </div>
+
+            </div>
+        </div>
+    </div>
+    @include('dataUnit.modal.create')
+    @include('dataUnit.modal.view')
+
+    <script>
+        const katDok = @json($katDok);
+        const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
+        const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]->sub_unit_kerja);
+        const mappingUnitKerjaPegawai = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);
+        const authPegawai = @json(auth()->user()->objectpegawaifk);
+        const formCreate = $("#formFile");
+        const modalCreate = document.getElementById('modalCreateFile');
+        const tableState = { data: [], page: 1, pageSize: 8, search: '', unit: [], kategori: [], kategoriType: [], kategoriHeader: [], lastPage: 1, total: 0 };
+        let kategoriOptionCache = [];
+        const tbody = document.getElementById('tableDataUnit');
+        const paginationEl = document.getElementById('paginationControls');
+        const summaryEl = document.getElementById('tableSummary');
+        const legendEl = document.getElementById('tableLegend');
+        const pageSizeSelect = document.getElementById('tablePageSize');
+        const unitSelect = document.getElementById('tableUnit');
+        const kategoriSelect = document.getElementById('tableKategori');
+        const kategoriHeaderMenu = document.getElementById('tableKategoriHeaderMenu');
+        const searchInput = document.getElementById('tableSearch');
+        const searchBtn = document.getElementById('btnTableSearch');
+        const downloadBtn = document.getElementById('btnDownloadMultiple');
+        const selectedCountEl = document.getElementById('selectedCount');
+        const checkAllEl = document.getElementById('checkAllRows');
+        const selectedIds = new Set();
+        const colorCache = {};
+        const colorPalette = ['#e8f4ff', '#fff6e5', '#e9f7ef', '#f3e8ff', '#ffe6ea', '#e6f5f3'];
+
+        function normalizeToArray(value){
+            if (Array.isArray(value)) {
+                return value.filter(v => v !== null && v !== undefined && v !== '');
+            }
+            if (value === null || value === undefined || value === '') return [];
+            return [value];
+        }
+
+        document.addEventListener('change', function(e){
+            if(!e.target.classList.contains('toggle-expired')) return;
+            const targetId = e.target.getAttribute('data-target');
+            if(!targetId) return;
+            const fieldWrap = document.getElementById(targetId);
+            const input = fieldWrap.querySelector('input');
+            input.disabled = !e.target.checked;
+        });
+
+        if(pageSizeSelect){
+            const initialSize = parseInt(pageSizeSelect.value);
+            if(!isNaN(initialSize)) tableState.pageSize = initialSize;
+            pageSizeSelect.addEventListener('change', (e) => {
+                const val = parseInt(e.target.value);
+                if(!isNaN(val) && val > 0){
+                    tableState.pageSize = val;
+                    tableState.page = 1;
+                    fetchData();
+                }
+            });
+        }
+        if (window.$ && $.fn.select2) {
+            if (unitSelect) {
+               $('#tableUnit').select2({
+                    placeholder: 'Pilih Unit',
+                    allowClear: true,
+                    width: '100%',
+                    closeOnSelect: false,
+                    ajax: {
+                        url: '/select-unit-kerja-mapping',
+                        dataType: 'json',
+                        delay: 250,
+                        data: function (params) {
+                            return { q: params.term };
+                        },
+                        processResults: function (data) {
+                            return {
+                                results: (data?.data || []).map(item => ({
+                                    id: item.id,
+                                    text: item.name
+                                }))
+                            };
+                        },
+                        cache: true
+                    }
+                });
+
+            }
+            if (kategoriSelect) {
+                $('#tableKategori').select2({
+                    placeholder: 'Kategori (Semua)',
+                    allowClear: true,
+                    width: '100%',
+                    selectionCssClass: 'select2-filter-selection',
+                    dropdownCssClass: 'select2-filter-dropdown'
+                });
+                $('#tableKategori').on('change', function () {
+                    const val = $(this).val() || '';
+                    tableState.kategoriType = val ? [val] : [];
+                    tableState.page = 1;
+                    fetchData();
+                });
+            }
+        }
+        if (kategoriHeaderMenu) {
+            kategoriHeaderMenu.addEventListener('change', function(e){
+                const checkbox = e.target.closest('input[type="checkbox"]');
+                if (!checkbox) return;
+                const selected = Array.from(kategoriHeaderMenu.querySelectorAll('input[type="checkbox"]:checked'))
+                    .map(el => el.value);
+                tableState.kategoriHeader = selected;
+                if (kategoriSelect && window.$ && $.fn.select2) {
+                    const single = selected.length === 1 ? selected[0] : '';
+                    $('#tableKategori').val(single).trigger('change');
+                }
+                tableState.page = 1;
+                fetchData();
+            });
+        }
+
+        function resetCreateForm(){
+            colCount = 1;
+            $("#col_add_fileV2").html('');
+            formCreate[0]?.reset();
+            formCreate.find('select').val(null).trigger('change');
+            formCreate.find('input[type="file"]').val('');
+            formCreate.find('.file-name').addClass('d-none').text('');
+            resetAkreFields(0);
+            enableAkreFields(0);
+        }
+
+        let akreData = [];
+        let akreLoaded = false;
+        let akreFlat = [];
+
+        function loadAkreData(){
+            if(akreLoaded) return Promise.resolve(akreData);
+            return fetch('/json/akreditasi.jff')
+                .then(res => res.json())
+                .then(data => {
+                    akreData = Array.isArray(data) ? data : [];
+                    akreFlat = [];
+                    akreLoaded = true;
+                    return akreData;
+                })
+                .catch(() => {
+                    akreData = [];
+                    akreFlat = [];
+                    akreLoaded = true;
+                    return akreData;
+                });
+        }
+
+        function getAkreFlat(){
+            if(akreFlat.length) return akreFlat;
+            akreFlat = (akreData || []).flatMap(type => {
+                const segments = Array.isArray(type.segment) ? type.segment : [];
+                return segments.flatMap(seg => {
+                    const children = Array.isArray(seg.turunan) ? seg.turunan : [];
+                    return children.map(child => ({
+                        value: `${type.name}/${seg.name}/${child.name}`,
+                        label: `${type.name} / ${child.name}`,
+                        type: type.name,
+                        segment: seg.name,
+                        item: child.name
+                    }));
+                });
+            });
+            return akreFlat;
+        }
+
+        function fillAkreSelect(selectEl){
+            if(!selectEl) return;
+            selectEl.innerHTML = '<option value="" disabled selected>Pilih Instrumen</option>';
+            getAkreFlat().forEach(optData => {
+                const opt = document.createElement('option');
+                opt.value = optData.value;
+                opt.textContent = optData.label;
+                selectEl.appendChild(opt);
+            });
+        }
+
+        function setKategoriRequired(index, isRequired){
+            const katSelect = document.getElementById(`select_kategori_${index}`);
+            if (!katSelect) return;
+            if (isRequired) {
+                katSelect.setAttribute('required', 'required');
+            } else {
+                katSelect.removeAttribute('required');
+            }
+        }
+
+        function resetAkreFields(index){
+            const selectEl = document.getElementById(`akre_select_${index}`);
+            const typeInput = document.getElementById(`akre_type_${index}`);
+            const segmentInput = document.getElementById(`akre_segment_${index}`);
+            const itemInput = document.getElementById(`akre_item_${index}`);
+            if(selectEl){
+                selectEl.value = '';
+                if(window.$ && $.fn.select2) $(selectEl).val(null).trigger('change');
+            }
+            if(typeInput) typeInput.value = '';
+            if(segmentInput) segmentInput.value = '';
+            if(itemInput) itemInput.value = '';
+            setKategoriRequired(index, false);
+        }
+
+        function enableAkreFields(index){
+            const selectEl = document.getElementById(`akre_select_${index}`);
+            // if(selectEl){
+            //     selectEl.disabled = false;
+            //     selectEl.required = true;
+            // }
+            setKategoriRequired(index, false);
+            loadAkreData().then(() => {
+                fillAkreSelect(selectEl);
+                if(window.$ && $.fn.select2){
+                    $(selectEl).select2({
+                        dropdownParent: $('#modalCreateFile'),
+                        placeholder: 'Pilih Instrumen',
+                        allowClear: true
+                    });
+                }
+            });
+        }
+
+        function initKategoriSelect2(index){
+            if(!window.$ || !$.fn.select2) return;
+            const katSelect = $(`#select_kategori_${index}`);
+            const hukumSelect = $(`#select_kategori_hukum_${index}`);
+            if(katSelect.length){
+                katSelect.select2({
+                    dropdownParent: $('#modalCreateFile'),
+                    placeholder:'Pilih Kategori',
+                    allowClear: true
+                });
+            }
+            if(hukumSelect.length){
+                hukumSelect.select2({
+                    dropdownParent: $('#modalCreateFile'),
+                    placeholder:'Pilih Kategori Hukum',
+                    allowClear:true
+                });
+            }
+        }
+
+        document.addEventListener('change', function(e){
+            if(e.target.classList.contains('akre-select')){
+                const id = e.target.id || '';
+                const idx = id.split('_').pop();
+                const [typeVal = '', segmentVal = '', itemVal = ''] = (e.target.value || '').split('/');
+                const typeInput = document.getElementById(`akre_type_${idx}`);
+                const segmentInput = document.getElementById(`akre_segment_${idx}`);
+                const itemInput = document.getElementById(`akre_item_${idx}`);
+                if(typeInput) typeInput.value = typeVal;
+                if(segmentInput) segmentInput.value = segmentVal;
+                if(itemInput) itemInput.value = itemVal;
+                return;
+            }
+
+        });
+
+        function isPublic(permissionVal){
+            if(permissionVal === null || permissionVal === undefined) return false;
+            const val = String(permissionVal).toLowerCase();
+            return val === '1' || val === 'true' || val === 'ya' || val === 'yes';
+        }
+
+        function resolveKategoriFlag(item){
+            if(Number(item.is_akre) === 1 || item.is_akre === true || String(item.is_akre).toLowerCase() === 'true'){
+                return { key: 'akre', label: 'Kategori Akreditasi' };
+            }
+            if(item.kategori_hukum){
+                return { key: 'hukum', label: 'Kategori Hukum' };
+            }
+            const label = (item.nama_kategori || item.nama_kategori_directory || item.kategori || '').trim() || 'Kategori Lainnya';
+            const key = String(item.master_kategori_directory_id || label || 'lainnya');
+            return { key, label };
+        }
+
+        function pickColor(key, label){
+            if(colorCache[key]) return colorCache[key];
+            const index = Object.keys(colorCache).length % colorPalette.length;
+            colorCache[key] = colorPalette[index];
+            return colorCache[key];
+        }
+
+        function renderLegend(items){
+            if(!legendEl) return;
+            const map = new Map();
+            (items || []).forEach(item => {
+                const flag = resolveKategoriFlag(item);
+                const color = pickColor(flag.key, flag.label);
+                if(!map.has(flag.key)){
+                    map.set(flag.key, { label: flag.label, color });
+                }
+            });
+            if(map.size === 0){
+                legendEl.textContent = '';
+                return;
+            }
+            legendEl.innerHTML = Array.from(map.values()).map(entry => `
+                <span class="me-3">
+                    <span class="legend-dot" style="background:${entry.color};"></span>
+                    <span>${entry.label}</span>
+                </span>
+            `).join('');
+        }
+
+        function getExpiryStatus(dateStr){
+            if (!dateStr) return false;
+            const d = new Date(dateStr);
+            if (Number.isNaN(d.getTime())) return null;
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            d.setHours(0, 0, 0, 0);
+            if (d < today) return 'expired';
+            const diffDays = Math.ceil((d - today) / 86400000);
+            if (diffDays <= 7) return 'soon';
+            return null;
+        }
+
+        function buildRow(item){
+            const parts = (item.file || '').split('/');
+            const fileName = parts.pop() || '-';
+            const folderPath = parts.join('/') || '-';
+            const publicDoc = isPublic(item.permission_file);
+            const unitName = parts[0] || '';
+            const subName = parts[1] || '';
+            const kategoriName = parts[2] || '';
+            const expiryStatus = getExpiryStatus(item.tgl_expired);
+            let statusLabel = '';
+            let statusClass = '';
+
+            if (publicDoc) {
+                statusLabel = 'Umum';
+                statusClass = 'bg-success';
+            } else {
+                statusLabel = 'Internal Unit';
+                statusClass = 'bg-secondary';
+            }
+            const checked = selectedIds.has(String(item.file_directory_id)) ? 'checked' : '';
+            const kategoriFlag = resolveKategoriFlag(item);
+            const rowColor = pickColor(kategoriFlag.key, kategoriFlag.label);
+            const isAkre = kategoriFlag.key === 'akre';
+            const rowClass = isAkre ? 'table-info' : (expiryStatus === 'expired' ? 'table-danger' : (expiryStatus === 'soon' ? 'table-warning' : 'row-shade'));
+            const expiryBadge = expiryStatus === 'expired'
+                ? `<span class="badge bg-danger" style="font-size:10px;">Expired</span>`
+                : (expiryStatus === 'soon' ? `<span class="badge bg-warning text-dark" style="font-size:10px;">Akan Expired</span>` : '');
+            const akreBadge = isAkre
+                ? `<span class="badge bg-primary text-white ms-2" style="font-size:10px;">Akreditasi</span>`
+                : '';
+            return `
+                <tr class="${rowClass}" style="--row-bg:${rowColor};">
+                    <td class="text-center">
+                        <input type="checkbox"
+                               class="form-check-input row-check"
+                               data-id="${item.file_directory_id}"
+                               ${checked}>
+                    </td>
+                    <td class="text-nowrap">
+                        <div class="d-inline-flex gap-1">
+                            <button
+                                type="button"
+                                class="btn btn-primary btn-sm"
+                                onclick="infoDok(this)"
+                                title="Detail Dokumen"
+                                data-filename="${item.nama_dokumen || '-'}"
+                                data-id="${item.file_directory_id}"
+                                data-no_dokumen="${item.no_dokumen || '-'}"
+                                data-tanggal_terbit="${item.tanggal_terbit || '-'}"
+                                data-permission_file="${item.permission_file || '-'}"
+                                data-pegawai_id_entry="${item.pegawai_id_entry || '-'}"
+                            >
+                                <i class="fa-solid fa-eye"></i>
+                            </button>
+
+                            <a
+                                href="/file-download/${item.file_directory_id}"
+                                target="_blank"
+                                class="btn btn-primary btn-sm"
+                                title="Download Dokumen"
+                            >
+                                <i class="fa-solid fa-download"></i>
+                            </a>
+                        </div>
+                    </td>
+                    <td class="text-nowrap">${item.no_dokumen || '-'}</td>
+                    <td class="file-cell">
+                        <div class="file-title">
+                            <a href="#"
+                                class="file-link"
+                                data-file="${item.file}"
+                                data-fileName="${item.nama_dokumen || '-'}"
+                                data-id="${item.file_directory_id}"
+                                data-no_dokumen="${item.no_dokumen || '-'}"
+                                data-tanggal_terbit="${item.tanggal_terbit || '-'}"
+                                data-permission_file="${item.permission_file || '-'}"
+                                data-pegawai_id_entry="${item.pegawai_id_entry || '-'}"
+                            >
+                                ${item.nama_dokumen || '-'}
+                            </a>
+                            ${akreBadge}${expiryBadge}
+                        </div>
+                    </td>
+                    <td>
+                        ${item.nama_kategori || '-'}
+                    </td>
+                    <td>
+                        ${item.unit?.name || '-'}
+                    </td>
+                    <td class="text-nowrap">${formatTanggal(item.entry_at)}</td>
+                    <td style="max-width: 200px; white-space: normal; word-wrap: break-word;">${item.pegawai_nama_entry || '-'}</td>
+                </tr>
+            `;
+        }
+
+        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);
+                }
+                fetchData();
+            });
+        }
+
+        function renderTable(){
+            const pageData = filterByKategoriType(tableState.data || []);
+
+            if(pageData.length === 0){
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="8" class="text-center text-muted py-4">
+                            Tidak ada data yang cocok
+                        </td>
+                    </tr>
+                `;
+            }else{
+                tbody.innerHTML = pageData.map(buildRow).join('');
+            }
+
+            const from = tableState.total === 0 ? 0 : ((tableState.page -1) * tableState.pageSize) + 1;
+            const to = Math.min(((tableState.page -1) * tableState.pageSize) + pageData.length, tableState.total);
+            if(summaryEl){
+                summaryEl.textContent = tableState.total ? `Menampilkan ${from} - ${to} dari ${tableState.total} dokumen` : 'Tidak ada data';
+            }
+
+            renderPagination(tableState.lastPage || 1);
+            syncCheckAllState();
+            updateSelectedCount();
+            renderLegend(pageData);
+        }
+
+        function applyTableSearch(){
+            const value = searchInput ? searchInput.value : '';
+            tableState.search = (value || '').trim();
+            tableState.unit = normalizeToArray(
+                unitSelect && window.$ ? $('#tableUnit').val() : tableState.unit
+            );
+            const katVal = kategoriSelect && window.$ ? ($('#tableKategori').val() || '') : (kategoriSelect?.value || '');
+            tableState.kategoriType = katVal ? [katVal] : (tableState.kategoriType || []);
+            tableState.page = 1;
+            fetchData();
+        }
+
+        function getKategoriLabel(item){
+            const parts = String(item?.file || '').split('/');
+            return (item?.nama_kategori || parts[2] || item?.nama_kategori_directory || item?.kategori || '').trim();
+        }
+
+        function getKategoriId(item){
+            const label = getKategoriLabel(item);
+            return String(item?.master_kategori_directory_id || label);
+        }
+
+        function getKategoriOptionsFromData(){
+            const seen = new Map();
+            (tableState.data || []).forEach(item => {
+                const label = getKategoriLabel(item);
+                if(!label) return;
+                const id = getKategoriId(item);
+                if(!seen.has(id)){
+                    seen.set(id, { id, label });
+                }
+            });
+            return Array.from(seen.values()).sort((a,b) => a.label.localeCompare(b.label));
+        }
+
+        function isKategoriMatch(item, types){
+            if (!types.length) return true;
+            const lowerTypes = types.map(t => String(t).toLowerCase());
+            const isAkre = (item.is_akre === true) || String(item.is_akre).toLowerCase() === 'true' || Number(item.is_akre) === 1;
+            const isHukum = !!item.kategori_hukum;
+            const hasKategoriId = !!item.master_kategori_directory_id;
+            // special buckets
+            if (isAkre && lowerTypes.includes('akreditasi')) return true;
+            if (isHukum && lowerTypes.includes('hukum')) return true;
+            if (!isAkre && !isHukum && hasKategoriId && lowerTypes.includes('lainnya')) return true;
+
+            // fallback to id/label comparison
+            const catId = String(getKategoriId(item)).toLowerCase();
+            const catLabel = String(getKategoriLabel(item)).toLowerCase();
+            return lowerTypes.includes(catId) || lowerTypes.includes(catLabel);
+        }
+
+        function filterByKategoriType(items){
+            const types = (tableState.kategoriType || []).map(v => String(v));
+            if (!types.length) return items;
+            return items.filter(item => isKategoriMatch(item, types));
+        }
+
+        function renderKategoriHeaderOptions(){
+            if (!kategoriHeaderMenu) return;
+            const list = kategoriHeaderMenu.querySelector('.kategori-header-list');
+            if (!list) return;
+            const options = kategoriOptionCache.length ? kategoriOptionCache : getKategoriOptionsFromData();
+            const selected = (tableState.kategoriHeader || []).map(v => String(v));
+            if(options.length === 0){
+                list.innerHTML = '<div class=\"dropdown-item text-muted\">Tidak ada kategori</div>';
+                return;
+            }
+            list.innerHTML = options.map(opt => {
+                const checked = selected.includes(opt.id) ? 'checked' : '';
+                return `
+                    <label class="dropdown-item d-flex align-items-center gap-2 kategori-option" data-kat="${opt.id}">
+                        <input type="checkbox" class="form-check-input m-0" value="${opt.id}" ${checked}>
+                        <span>${opt.label}</span>
+                    </label>
+                `;
+            }).join('');
+        }
+
+        if (kategoriHeaderMenu) {
+            kategoriHeaderMenu.addEventListener('click', function(e){
+                const option = e.target.closest('.kategori-option');
+                if (!option) return;
+                const id = option.getAttribute('data-kat');
+                const checkbox = option.querySelector('input[type="checkbox"]');
+                if(checkbox){
+                    checkbox.checked = !checkbox.checked;
+                    const event = new Event('change', { bubbles: true });
+                    checkbox.dispatchEvent(event);
+                }else{
+                    tableState.kategoriHeader = [id];
+                    if (kategoriSelect && window.$ && $.fn.select2) {
+                        $('#tableKategori').val(id).trigger('change');
+                    }
+                    tableState.page = 1;
+                    fetchData();
+                }
+            }, true);
+        }
+
+
+        function fetchData(){
+            if(summaryEl) summaryEl.textContent = 'Memuat data...';
+            const params = new URLSearchParams({
+                page: tableState.page,
+                per_page: tableState.pageSize,
+                keyword: tableState.search
+            });
+            const unitValues = normalizeToArray(tableState.unit);
+            if (unitValues.length > 0) {
+                unitValues.forEach(id => params.append('unit[]', id));
+            }
+            if (tableState.kategoriType && tableState.kategoriType.length > 0) {
+                tableState.kategoriType.forEach(id => params.append('kategori[]', id));
+            }
+            if (tableState.kategoriHeader && tableState.kategoriHeader.length > 0) {
+                tableState.kategoriHeader.forEach(id => params.append('kategori_header[]', id));
+            }
+            fetch(`/data/expired-dokumen?${params.toString()}`)
+            .then(response => response.json())
+            .then(data => {
+                    tableState.data = data?.data || [];
+                    kategoriOptionCache = data?.kategori_list || kategoriOptionCache;
+                    tableState.lastPage = data?.pagination?.last_page || 1;
+                    tableState.total = data?.pagination?.total || 0;
+                    renderKategoriHeaderOptions();
+                    renderTable();
+                })
+                .catch(error => {
+                    console.error('Error : ', error);
+                    if(summaryEl) summaryEl.textContent = 'Gagal memuat data';
+                })
+        }
+
+        searchBtn.addEventListener('click', applyTableSearch);
+        searchInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    applyTableSearch();
+                }
+            });
+
+        function formatTanggal(dateString) {
+            const d = new Date(dateString);
+            return d.toLocaleDateString('id-ID', {
+                day: '2-digit',
+                month: 'short',
+                year: 'numeric'
+            });
+        }
+        renderKategoriHeaderOptions();
+        fetchData()
+
+        function updateSelectedCount(){
+            if(!selectedCountEl) return;
+            selectedCountEl.textContent = `${selectedIds.size} dipilih`;
+            if(downloadBtn){
+                downloadBtn.disabled = selectedIds.size === 0;
+            }
+        }
+
+        function syncCheckAllState(){
+            if(!checkAllEl) return;
+            const pageIds = (tableState.data || []).map(item => String(item.file_directory_id));
+            if(pageIds.length === 0){
+                checkAllEl.checked = false;
+                checkAllEl.indeterminate = false;
+                return;
+            }
+            const selectedOnPage = pageIds.filter(id => selectedIds.has(id)).length;
+            checkAllEl.checked = selectedOnPage === pageIds.length;
+            checkAllEl.indeterminate = selectedOnPage > 0 && selectedOnPage < pageIds.length;
+        }
+
+        if(checkAllEl){
+            checkAllEl.addEventListener('change', function(){
+                const pageIds = (tableState.data || []).map(item => String(item.file_directory_id));
+                if(this.checked){
+                    pageIds.forEach(id => selectedIds.add(id));
+                }else{
+                    pageIds.forEach(id => selectedIds.delete(id));
+                }
+                renderTable();
+            });
+        }
+
+        if(tbody){
+            tbody.addEventListener('change', function(e){
+                const checkbox = e.target.closest('.row-check');
+                if(!checkbox) return;
+                const id = String(checkbox.getAttribute('data-id'));
+                if(checkbox.checked){
+                    selectedIds.add(id);
+                }else{
+                    selectedIds.delete(id);
+                }
+                syncCheckAllState();
+                updateSelectedCount();
+            });
+        }
+
+        if(downloadBtn){
+            downloadBtn.addEventListener('click', function(){
+                if(selectedIds.size === 0){
+                    return;
+                }
+                const payload = { ids: Array.from(selectedIds) };
+                downloadBtn.disabled = true;
+                downloadBtn.textContent = 'Menyiapkan...';
+                fetch('/download-multiple', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    body: JSON.stringify(payload)
+                })
+                .then(async (res) => {
+                    const contentType = res.headers.get('content-type') || '';
+                    if(!res.ok || contentType.includes('application/json')){
+                        const err = await res.json().catch(() => ({}));
+                        throw new Error(err?.message || 'Gagal download file');
+                    }
+                    const blob = await res.blob();
+                    const url = window.URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    const disposition = res.headers.get('content-disposition') || '';
+                    const match = disposition.match(/filename="?([^"]+)"?/);
+                    a.href = url;
+                    a.download = match?.[1] || 'files.zip';
+                    document.body.appendChild(a);
+                    a.click();
+                    a.remove();
+                    window.URL.revokeObjectURL(url);
+                })
+                .catch(err => {
+                    Swal.fire({ icon: 'error', title: 'Gagal', text: err.message || 'Gagal download file' });
+                })
+                .finally(() => {
+                    downloadBtn.disabled = selectedIds.size === 0;
+                    downloadBtn.textContent = 'Download Terpilih';
+                });
+            });
+        }
+
+
+
+        let colCount = 1;
+        $(document).ready(function() {
+            $('.unit_kerja').select2({
+                placeholder: '--- Pilih Unit Kerja ---',
+                allowClear: true,
+                width: '100%',
+                ajax: {
+                    url : '/select-unit-kerja-mapping',
+                    dataType: 'json',
+                    delay: 250,
+                    data: function(params){
+                        let q = '';
+                        if(allAkses){
+                            q = params.term;
+                        }else{
+                            q = authUnitKerja?.name ?? '';
+                        }
+
+                        return { q };
+                    },
+                    processResults: function(data){
+                        let results = data?.data.map(item => ({
+                            id: item.id,
+                            text: item.name
+                        }));
+                        return { results };
+                    },
+                    cache: true,
+                },
+                minimumInputLength: 0,
+            });
+
+            $('.sub_unit_kerja').select2({
+                placeholder: '-- Pilih Sub Unit Kerja --',
+                allowClear: true,
+                width: '100%',
+            });
+
+            let initialUnit = $('.unit_kerja').val();
+            if(initialUnit){
+                loadSubUnitKerja(initialUnit);
+            }
+
+            // jalankan setiap kali unit_kerja berubah
+            $('.unit_kerja').on('change', function(){
+                let idUnit = $(this).val();
+                if(idUnit){
+                    loadSubUnitKerja(idUnit);
+                }
+            });
+
+            selectOptionUnitKerjaV1(0);
+            initKategoriSelect2(0);
+            enableAkreFields(0);
+        });
+
+        function loadSubUnitKerja(unitId){
+            $('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');
+
+            $.ajax({
+                url: `/select-sub-unit-kerja-mapping/${unitId}`,
+                method: 'GET',
+                success: function(response) {
+                    if (response?.data) {
+                        response.data.forEach(unit => {
+                            let selected = (authSubUnitKerja && unit.id === authSubUnitKerja.objectsubunitkerjapegawaifk);
+                            const option = new Option(unit.name, unit.id, false, selected);
+                            $('.sub_unit_kerja').append(option);
+                        });
+                        $('.sub_unit_kerja').trigger('change');
+                    }
+                }
+            });
+        }
+
+
+        function addFormV2(){
+            let col = $("#col_add_fileV2");
+            let html = '';
+
+                html += `
+                <div class="row g-3 align-items-start" id="col-${colCount}">
+                    <hr class="my-3" />
+                        <div class="col-12 d-flex justify-content-end">
+                            <button type="button"
+                                    class="btn btn-sm btn-danger"
+                                    onclick="removeCol(${colCount})">
+                                <i class="fa-solid fa-trash"></i> Hapus
+                            </button>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-semibold">Unit <span class="text-danger">*</span></label>
+                            <select class="form-select"
+                                    name="data[${colCount}][id_unit_kerja]"
+                                    id="select_id_unit_kerja_${colCount}"
+                                    required>
+                                <option value="" disabled selected>Pilih Unit</option>
+                            </select>
+                        </div>
+
+                        <div class="col-md-6">
+                            <label class="form-label fw-semibold">Sub Unit <span class="text-danger">*</span></label>
+                            <select class="form-select"
+                                    name="data[${colCount}][id_sub_unit_kerja]"
+                                    id="select_id_sub_unit_kerja_${colCount}"
+                                    required>
+                                <option value="" disabled selected>Pilih Sub Unit</option>
+                            </select>
+                        </div>
+
+
+
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Nomor Dokumen</label>
+                            <div class="input-group">
+                                <span class="input-group-text">#</span>
+                                <input type="text"
+                                    class="form-control"
+                                    name="data[${colCount}][no_dokumen]"
+                                    placeholder="Contoh: 001/RS/IT/I/2026">
+                            </div>
+                            <div class="form-text text-muted"></div>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Nama Dokumen<span class="text-danger">*</span></label>
+                            <input type="text"
+                                    class="form-control"
+                                    name="data[${colCount}][nama_dokumen]"
+                                    placeholder="Contoh: Panduan Mencuci Tangan" required>
+                        </div>
+
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Tanggal Terbit</label>
+                            <input class="form-control"
+                                    type="date"
+                                    name="data[${colCount}][date_active]">
+                        </div>
+                        <div class="col-md-3">
+                            <div class="form-check">
+                                <input class="form-check-input toggle-expired"
+                                        type="checkbox"
+                                        id="hasExpired_${colCount}"
+                                        data-target="expiredField_${colCount}">
+                                <label class="form-check-label" for="hasExpired_${colCount}">Masa Berlaku Dokumen??</label>
+                            </div>
+                        </div>
+
+                        <div class="col-md-5" id="expiredField_${colCount}">
+                            <label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
+                            <input class="form-control"
+                                    type="date"
+                                    name="data[${colCount}][tgl_expired]" disabled>
+                        </div>
+
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>
+
+                            <div class="border rounded-3 p-2 bg-light">
+                                    <div class="form-check">
+                                    <input class="form-check-input"
+                                            type="radio"
+                                            name="data[${colCount}][is_permission]"
+                                            id="perm_yes_${colCount}"
+                                            value="1"
+                                            required>
+                                    <label class="form-check-label" for="perm_yes_${colCount}">Ya</label>
+                                    </div>
+
+                                    <div class="form-check mt-1">
+                                    <input class="form-check-input"
+                                            type="radio"
+                                            name="data[${colCount}][is_permission]"
+                                            id="perm_no_${colCount}"
+                                            value="2"
+                                            required>
+                                    <label class="form-check-label" for="perm_no_${colCount}">Tidak</label>
+                                    </div>
+                            </div>
+
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Instrumen Akreditasi </label>
+                            <select class="form-select akre-select" id="akre_select_${colCount}" name="data[${colCount}][akre]" style="width: 350px;">
+                                <option value="" disabled selected>Pilih Instrumen</option>
+                            </select>
+                            <div class="form-text text-muted">Isi form ini bila dokumen yang diunggah merupakan dokumen <strong>akreditasi</strong>.</div>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Kategori Hukum</label>
+                            <select class="form-select select-kat-hukum" name="data[${colCount}][kategori_hukum]" id="select_kategori_hukum_${colCount}" style="width: 350px;">
+                                <option value="" disabled selected>Pilih Kategori Hukum</option>
+                                <option value="Kebijakan - Peraturan Direktur">Kebijakan - Peraturan Direktur</option>
+                                <option value="Kebijakan - Keputusan Direktur Utama">Kebijakan - Keputusan Direktur Utama</option>
+                                <option value="Kebijakan - Surat Edaran">Kebijakan - Surat Edaran</option>
+                                <option value="Kebijakan - Pengumuman">Kebijakan - Pengumuman</option>
+                                <option value="Kerjasama - Pelayanan Kesehatan">Kerjasama - Pelayanan Kesehatan</option>
+                                <option value="Kerjasama - Management">Kerjasama - Management</option>
+                                <option value="Kerjasama - Pemeliharan">Kerjasama - Pemeliharan</option>
+                                <option value="Kerjasama - Diklat">Kerjasama - Diklat</option>
+                                <option value="Kerjasama - Luar Negeri">Kerjasama - Luar Negeri</option>
+                                <option value="Kerjasama - Area Bisnis">Kerjasama - Area Bisnis</option>
+                                <option value="Kerjasama - Pendidikan">Kerjasama - Pendidikan</option>
+                                <option value="Kerjasama - Pengampuan KIA">Kerjasama- Pengampuan KIA</option>
+                            </select>
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label fw-semibold">Kategori Lainnya</label>
+                            <select class="form-select"
+                                    name="data[${colCount}][master_kategori_directory_id]"
+                                    id="select_kategori_${colCount}" style="width: 350px;">
+                                <option value="" disabled selected>Pilih Kategori</option>
+                                @foreach ($katDok as $kat)
+                                <option value="{{ $kat->master_kategori_directory_id }}/{{ $kat->nama_kategori_directory }}">
+                                    {{ $kat->nama_kategori_directory }}
+                                </option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        <div class="col-md-12">
+                            <label for="fileUpload_${colCount}" class="form-label fw-semibold">📂 Upload Dokumen (PDF)</label>
+
+                            <div class="border rounded-3 p-3 bg-white shadow-sm">
+                                <input class="form-control"
+                                    type="file"
+                                    id="fileUpload_${colCount}"
+                                    accept=".pdf"
+                                    name="data[${colCount}][file]">
+                                <div class="mt-2 text-success fw-semibold d-none file-name" id="fileName_${colCount}"></div>
+                            </div>
+
+                            <div class="form-text text-muted">
+                                Format yang didukung: <b>PDF</b>.
+                            </div>
+                </div>
+
+            </div>
+            `;
+        col.append(html)
+        selectOptionUnitKerjaV1(colCount)
+        initKategoriSelect2(colCount)
+        enableAkreFields(colCount)
+        setKategoriRequired(colCount, false)
+        colCount++;
+}
+
+        function removeCol(count){
+            $(`#col-${count}`).remove()
+        }
+
+        function selectOptionUnitKerjaV1(colCount) {
+            let selectUnit = $(`#select_id_unit_kerja_${colCount}`);
+            let selectSubUnit = $(`#select_id_sub_unit_kerja_${colCount}`);
+
+            // inisialisasi select2 untuk Unit Kerja
+            selectUnit.select2({
+                placeholder: '-- Pilih Unit Kerja --',
+                allowClear:true,
+                width: '100%',
+                dropdownParent: selectUnit.parent(),
+                ajax:{
+                    url : '/select-unit-kerja-mapping',
+                    dataType: 'json',
+                    delay: 250,
+                    data: function(params){
+                        return { q: params.term }
+                    },
+                    processResults: function(data){
+                        return {
+                            results : data?.data.map(item => ({
+                                id: item.id+'/'+item.name,
+                                text: item.name,
+                                sub_units: item.sub_unit_kerja // kirim ke front
+                            }))
+                        }
+                    },
+                    cache: true,
+                },
+                minimumInputLength: 0,
+            });
+
+            selectSubUnit.select2({
+                    placeholder: '-- Pilih Sub Unit Kerja --',
+                    allowClear: true,
+                    width: '100%',
+                    dropdownParent: selectSubUnit.parent()
+                });
+
+            // event ketika unit kerja dipilih
+            selectUnit.on('select2:select', function (e) {
+                let data = e.params.data; // data unit kerja terpilih
+                selectSubUnit.empty().append('<option value="" disabled selected>-- Pilih Sub Unit Kerja --</option>');
+
+                if (data.sub_units && data.sub_units.length > 0) {
+                    data.sub_units.forEach(sub => {
+                        selectSubUnit.append(`<option value="${sub.id}/${sub.name}">${sub.name}</option>`);
+                    });
+                }
+
+                // aktifkan select2 untuk sub unit
+
+            });
+        }
+
+        let currentFile = null;
+        let idDirectory = null;
+        document.addEventListener('click', function(e){
+            if(e.target.matches('.file-link')){
+                e.preventDefault();
+                let fileUrl = e.target.getAttribute('data-file');
+                let noDokumen = e.target.getAttribute('data-no_dokumen')
+                let tanggalTerbit = e.target.getAttribute('data-tanggal_terbit')
+                let permissionFile = e.target.getAttribute('data-permission_file')
+                let fileName = e.target.getAttribute('data-fileName')
+                let pegawai_id_entry = e.target.getAttribute('data-pegawai_id_entry')
+
+
+                currentFile = fileUrl;
+                idDirectory = e.target.getAttribute('data-id');
+
+
+                const titleEl = document.getElementById('confirm_preview_file');
+                if (titleEl) titleEl.textContent = fileName;
+
+                // set footer info
+                const noEl = document.getElementById('confirm-upload-dokumen');
+                if (noEl) noEl.textContent = noDokumen;
+
+                const tglEl = document.getElementById('confirm-time-dokumen');
+
+                if (tglEl) tglEl.textContent = tanggalTerbit;
+
+                const permEl = document.getElementById('confirm-permission');
+                if (permEl) {
+                    const publicDoc = isPublic(permissionFile);
+                    permEl.textContent = publicDoc ? 'Umum' : 'Internal Unit';
+                    permEl.className = 'badge ' + (publicDoc ? 'bg-success' : 'bg-secondary');
+                }
+                const downloadBtn = document.getElementById('btn-download');
+                if (downloadBtn) {
+                    downloadBtn.setAttribute('href', `/file-download/${idDirectory}`);
+                }
+
+                const deleteWrapper = document.getElementById('deleteData');
+
+                if (Number(pegawai_id_entry) === Number(authPegawai)) {
+                    deleteWrapper.remove('d-none');
+                } else {
+                    deleteWrapper.classList.add('d-none');
+                }
+                let previewBox = document.getElementById('file-preview');
+                previewBox.innerHTML = `<div id="pdfWrap" style="height:500px; overflow:auto; background:#f7f7f7; padding:8px;">
+                                            <div id="pdfPages"></div>
+                                        </div>
+                                        `;
+                                        openPreview(idDirectory);
+
+                $("#previewModal").modal('show')
+            }
+
+            if(e.target.id === 'delete-file'){
+                Swal.fire({
+                    title: 'Yakin ingin menghapus file ini?',
+                    text: "File akan dihapus",
+                    icon: 'warning',
+                    showCancelButton: true,
+                    confirmButtonColor: '#d33',
+                    cancelButtonColor: '#6c757d',
+                    confirmButtonText: 'Ya, hapus',
+                    cancelButtonText: 'Batal'
+                }).then((result) => {
+                    if(result.isConfirmed){
+                        fetch(`/delete-file/${idDirectory}`, {
+                            method: 'DELETE',
+                            headers: {
+                                'Content-Type' : 'application/json',
+                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+                            },
+                            body: JSON.stringify({ file: currentFile })
+                        })
+                        .then(res => res.json())
+                        .then(data => {
+                            if(data.success){
+                                Swal.fire({
+                                    text: 'File berhasil dihapus',
+                                    icon: 'success',
+                                    timer: 2000,
+                                    showConfirmButton: false
+                                });
+                                $("#previewModal").modal("hide");
+                                fetchData()
+                                currentFile = null;
+                                idDirectory = null;
+                            }else{
+                                Swal.fire({
+                                    text: 'Gagal menghapus file',
+                                    icon: 'error'
+                                });
+                            }
+                        })
+                        .catch(err => {
+                            console.log(err);
+                            Swal.fire({
+                                text: 'Terjadi error saat menghapus file ',
+                                icon: 'error'
+                            });
+                        });
+                    }
+                })
+            }
+
+            if(e.target.matches('#btn-view-full')){
+                window.open(`/full-preview/${idDirectory}`, '_blank');
+            }
+        })
+
+        formCreate.off('submit').on('submit', function(e){
+        e.preventDefault();
+        const submitBtn = $(this).find('button[type="submit"]');
+        submitBtn.prop('disabled', true).text('menyimpan...')
+        const formData = new FormData(this);
+        console.log(formData);
+
+        fetch(`/uploadv2`, {
+            method: 'POST',
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
+            },
+            body: formData
+        }).then(async(res) => {
+            const responseData = await res.json();
+            if(responseData.status){
+                Toastify({
+                            text: responseData.message || 'Berhasil melakukan aksi!',
+                            duration: 3000,
+                            gravity: "top",
+                            position: "right",
+                            style: {
+                                background: "linear-gradient(to right, #00b09b, #96c93d)",
+                                color: "#fff",
+                            }
+                        }).showToast();
+                const modalInstance = bootstrap.Modal.getInstance(modalCreate);
+                modalInstance?.hide();
+                resetCreateForm();
+                fetchData()
+                submitBtn.prop('disabled', false).text('Simpan')
+                if(responseData.status_action === null || responseData.status_action === undefined){
+                    Swal.fire({
+                        icon: 'info',
+                        title: 'Perlu Persetujuan',
+                        text: 'Dokumen yang Anda upload butuh persetujuan dari atasan. Untuk melihatnya, kunjungi halaman Pengajuan File atau klik Tutup untuk tetap di sini.',
+                        showCancelButton: true,
+                        confirmButtonText: 'Ke Pengajuan File',
+                        cancelButtonText: 'Tutup'
+                    }).then((result) => {
+                        if(result.isConfirmed){
+                            window.location.href = '/pengajuan-file';
+                        }
+                    });
+                    return;
+                }
+            } else {
+                throw new Error(responseData.message || 'Terjadi kesalahan saat menyimpan data.');
+            }
+        }).catch(err => {
+            if (err.message) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Gagal',
+                    text: err.message
+                });
+                  submitBtn.prop('disabled', false).text('Simpan')
+            }
+        });
+    });
+
+    function infoDok(e){
+        let fileUrl = $(e).data('file');
+        let noDokumen = $(e).data('no_dokumen')
+        let tanggalTerbit = $(e).data('tanggal_terbit')
+        let permissionFile = $(e).data('permission_file')
+        let fileName = $(e).data('fileName')
+        let pegawai_id_entry = $(e).data('pegawai_id_entry')
+
+        currentFile = fileUrl;
+        idDirectory = $(e).data('id');
+
+
+        const titleEl = document.getElementById('confirm_preview_file');
+        if (titleEl) titleEl.textContent = fileName;
+
+        // set footer info
+        const noEl = document.getElementById('confirm-upload-dokumen');
+        if (noEl) noEl.textContent = noDokumen;
+
+        const tglEl = document.getElementById('confirm-time-dokumen');
+        if (tglEl) tglEl.textContent = tanggalTerbit;
+
+        const permEl = document.getElementById('confirm-permission');
+        if (permEl) {
+            const publicDoc = isPublic(permissionFile);
+            permEl.textContent = publicDoc ? 'Umum' : 'Internal Unit';
+            permEl.className = 'badge ' + (publicDoc ? 'bg-success' : 'bg-secondary');
+        }
+        const downloadBtn = document.getElementById('btn-download');
+        if (downloadBtn) {
+            downloadBtn.setAttribute('href', `/file-download/${idDirectory}`);
+        }
+        let previewBox = document.getElementById('file-preview');
+        previewBox.innerHTML = `<div id="pdfWrap" style="height:500px; overflow:auto; background:#f7f7f7; padding:8px;">
+                                    <div id="pdfPages"></div>
+                                </div>
+                                        `;
+        openPreview(idDirectory);
+        const deleteWrapper = document.getElementById('deleteData');
+
+        if (Number(pegawai_id_entry) === Number(authPegawai)) {
+            deleteWrapper.classList.remove('d-none');
+        } else {
+            deleteWrapper.classList.add('d-none');
+        }
+        $("#previewModal").modal('show')
+    }
+    </script>
+@endsection
diff --git a/resources/views/expDokumen/section/recap.blade.php b/resources/views/expDokumen/section/recap.blade.php
new file mode 100644
index 0000000..c7f30fb
--- /dev/null
+++ b/resources/views/expDokumen/section/recap.blade.php
@@ -0,0 +1,152 @@
+@php($showRecapTitle = $showRecapTitle ?? true)
+<div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3">
+    @if ($showRecapTitle)
+        <div>
+            <h4 class="mb-0">Rekap Dokumen Expired</h4>
+            <small class="text-muted">Ringkasan jumlah file per Unit dan Kategori</small>
+        </div>
+    @endif
+    <div class="{{ $showRecapTitle ? 'ms-md-auto' : '' }} d-flex gap-2 align-items-center">
+        <div class="input-group input-group-sm" style="max-width:320px;">
+            <span class="input-group-text bg-white border-end-0">
+                <i class="fa fa-search text-muted"></i>
+            </span>
+            <input type="search" id="recapSearch" class="form-control border-start-0" placeholder="Cari unit atau folder" oninput="debouncedRecapSearch(this.value)">
+        </div>
+        <select id="recapPerPage" class="form-select form-select-sm" style="width:auto;" onchange="changePerPage(this.value)">
+            <option value="5">5</option>
+            <option value="10" selected>10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+        </select>
+        <button class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1" onclick="fetchRecap()">
+            <i class="fa fa-rotate"></i>
+            <span>Refresh</span>
+        </button>
+    </div>
+</div>
+<div class="table-responsive" style="max-height: 55vh; overflow-y:auto;">
+    <table class="table table-sm table-hover align-middle">
+        <thead class="table-light shadow-sm">
+            <tr>
+                <th style="width:5%;" class="text-center">#</th>
+                <th style="width:30%;">Unit / Akreditasi</th>
+                <th style="width:20%;">Kategori</th>
+                <th style="width:15%;" class="text-center">Jumlah File</th>
+            </tr>
+        </thead>
+        <tbody id="recapBody">
+            <tr>
+                <td colspan="4" class="text-center text-muted py-4">Memuat data...</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-2 mt-3" id="recapPagination"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => fetchRecap());
+
+let recapDebounce;
+const recapState = { page:1, perPage:10, keyword:'', lastPage:1 };
+
+function debouncedRecapSearch(val){
+    clearTimeout(recapDebounce);
+    recapDebounce = setTimeout(() => {
+        recapState.keyword = val;
+        recapState.page = 1;
+        fetchRecap();
+    }, 250);
+}
+
+function changePerPage(val){
+    recapState.perPage = parseInt(val) || 10;
+    recapState.page = 1;
+    fetchRecap();
+}
+
+function fetchRecap(){
+    const tbody = document.getElementById('recapBody');
+    const pager = document.getElementById('recapPagination');
+    if(!tbody) return;
+    tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">Memuat data...</td></tr>`;
+    if(pager) pager.innerHTML = '';
+
+    const params = new URLSearchParams({
+        page: recapState.page,
+        per_page: recapState.perPage,
+        keyword: recapState.keyword || ''
+    });
+    fetch('/data/recapExp?' + params.toString())
+        .then(res => res.json())
+        .then(json => {
+            const rows = json?.data || [];
+            recapState.lastPage = json?.pagination?.last_page || 1;
+            if(!rows.length){
+                tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">Tidak ada data</td></tr>`;
+                return;
+            }
+            let grandTotal = 0;
+            const html = rows.map((row, idx) => {
+                const folderRows = (row.data || []).map((f, i) => `
+                    <tr>
+                        ${i === 0 ? `<td rowspan="${row.data.length}" class="text-center align-middle fw-semibold">${idx+1}</td>` : ''}
+                        ${i === 0 ? `<td rowspan="${row.data.length}" class="fw-semibold">${row.unit || '-'}</td>` : ''}
+                        <td>${f.folder || '-'}</td>
+                        <td class="text-center fw-bold">${f.count || 0}</td>
+                    </tr>
+                `).join('');
+                (row.data || []).forEach(f => { grandTotal += (parseInt(f.count, 10) || 0); });
+                return folderRows;
+            }).join('');
+            tbody.innerHTML = html + `
+                <tr class="table-light">
+                    <td colspan="3" class="text-end fw-semibold">Total File</td>
+                    <td class="text-center fw-bold">${grandTotal}</td>
+                </tr>
+            `;
+            renderRecapPagination();
+        })
+        .catch(err => {
+            console.error(err);
+            tbody.innerHTML = `<tr><td colspan="4" class="text-center text-danger py-4">Gagal memuat data</td></tr>`;
+        });
+}
+
+function renderRecapPagination(){
+    const pager = document.getElementById('recapPagination');
+    if(!pager) return;
+    if(recapState.lastPage <= 1){
+        pager.innerHTML = '';
+        return;
+    }
+    const maxButtons = 5;
+    let start = Math.max(1, recapState.page - Math.floor(maxButtons/2));
+    let end = Math.min(recapState.lastPage, start + maxButtons - 1);
+    start = Math.max(1, end - maxButtons + 1);
+
+    let buttons = '';
+    buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="prev" ${recapState.page === 1 ? 'disabled' : ''}>‹</button>`;
+    for(let i=start; i<=end; i++){
+        buttons += `<button class="btn btn-sm ${i === recapState.page ? 'btn-primary' : 'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
+    }
+    buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="next" ${recapState.page === recapState.lastPage ? 'disabled' : ''}>›</button>`;
+
+    pager.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 ${recapState.page} dari ${recapState.lastPage}</span>
+        </div>
+    `;
+
+    pager.querySelectorAll('button[data-page]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const page = btn.getAttribute('data-page');
+            if(page === 'prev' && recapState.page > 1) recapState.page--;
+            else if(page === 'next' && recapState.page < recapState.lastPage) recapState.page++;
+            else if(!isNaN(parseInt(page))) recapState.page = parseInt(page);
+            fetchRecap();
+        });
+    });
+}
+</script>
diff --git a/resources/views/layout/partials/sidenav.blade.php b/resources/views/layout/partials/sidenav.blade.php
index 69f6584..0aaeebb 100644
--- a/resources/views/layout/partials/sidenav.blade.php
+++ b/resources/views/layout/partials/sidenav.blade.php
@@ -106,6 +106,13 @@
         </li> --}}
 
         {{-- MASTER --}}
+        <li class="nav-small-cap"><span class="hide-menu">History</span></li>
+        <li class="sidebar-item">
+          <a class="sidebar-link" href="{{ url('/expired-dokumen') }}" aria-expanded="false">
+            <i class="ti ti-clock"></i>
+            <span class="hide-menu">Expired Dokumen</span>
+          </a>
+        </li>
         @if(!Auth::guard('admin')->check())
         @if(auth()->user()->dataUser->mappingUnitKerjaPegawai()->where('objectunitkerjapegawaifk', 43)->exists())
         <li class="nav-small-cap"><span class="hide-menu">Master</span></li>
diff --git a/routes/web.php b/routes/web.php
index af98f67..455b1bc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -66,18 +66,22 @@ Route::middleware(['auth:admin,web'])->group(function(){
     Route::post('/pengajuan-file/{id}/update', [DashboardController::class, 'updatePengajuanFile']);
 
     // Route::middleware(['master.persetujuan'])->group(function () {
-        Route::get('/pending-file', [DashboardController::class, 'pendingFile']);
-        Route::get('/datatable/pending-file', [DashboardController::class, 'dataPendingFile']);
-        Route::post('/pending-file/{id}/approve', [DashboardController::class, 'approvePendingFile']);
-        Route::post('/pending-file/approve-multiple', [DashboardController::class, 'approvePendingFileMultiple']);
-        Route::post('/pending-file/{id}/reject', [DashboardController::class, 'rejectPendingFile']);
-        Route::get('/data/count-pending', [DashboardController::class, 'countDataPending']);
-        Route::get('/data/count-rejected', [DashboardController::class, 'countRejectedPengajuan']);
+    Route::get('/pending-file', [DashboardController::class, 'pendingFile']);
+    Route::get('/datatable/pending-file', [DashboardController::class, 'dataPendingFile']);
+    Route::post('/pending-file/{id}/approve', [DashboardController::class, 'approvePendingFile']);
+    Route::post('/pending-file/approve-multiple', [DashboardController::class, 'approvePendingFileMultiple']);
+    Route::post('/pending-file/{id}/reject', [DashboardController::class, 'rejectPendingFile']);
+    Route::get('/data/count-pending', [DashboardController::class, 'countDataPending']);
+    Route::get('/data/count-rejected', [DashboardController::class, 'countRejectedPengajuan']);
     // });
     Route::get('/data/notifications', [DashboardController::class, 'notifkasiList']);
     Route::post('/data/notifications/read', [DashboardController::class, 'notifkasiMarkRead']);
 
     Route::get('/data/log-dokumen', [DashboardController::class, 'logDokumen']);
+
+    Route::get('/expired-dokumen', [DashboardController::class, 'expDokumen']);
+    Route::get('/data/expired-dokumen', [DashboardController::class, 'dataUnitExp']);
+    Route::get('/data/recapExp', [DashboardController::class, 'recapDataExp']);
 });
 
 Route::get('/login', [AuthController::class, 'index'])->name('login');