progress approval

app/Http/Controllers/DashboardController.php

@@ -226,6 +226,15 @@ class DashboardController extends Controller
                     $q->whereNull('tgl_expired')
                         ->orWhereDate('tgl_expired', '>=', now()->toDateString());
                 })
+                ->where(function ($q) {
+                    $q->whereNull('master_kategori_directory_id')
+                        ->orWhere('status_turt', 'approved');
+                })
+                ->where(function ($q) {
+                    $q->where('is_akre', '!=', true)
+                        ->orWhereNull('is_akre')
+                        ->orWhere('status_mutu', 'approved');
+                })
                 ->where('statusenabled', true)
                 ->where('status_action', 'approved');
 
@@ -1158,6 +1167,15 @@ class DashboardController extends Controller
                     $q->whereNull('tgl_expired')
                         ->orWhereDate('tgl_expired', '>=', now()->toDateString());
                 })
+                ->where(function ($q) {
+                    $q->whereNull('master_kategori_directory_id')
+                        ->orWhere('status_turt', 'approved');
+                })
+                ->where(function ($q) {
+                    $q->where('is_akre', '!=', true)
+                        ->orWhereNull('is_akre')
+                        ->orWhere('status_mutu', 'approved');
+                })
                 ->when(!empty($unitIds), function ($q) use ($unitIds) {
                     $q->whereIn('id_unit_kerja', $unitIds);
                 });
@@ -1334,7 +1352,7 @@ class DashboardController extends Controller
                     throw new \RuntimeException('Upload file gagal pada segment ke-' . ($index+1));
                 }
                     $status = $isAtasan ? 'approved' : null;
-
+                dd($data);
                 $payload = [
                     'id_unit_kerja' => $id_unit_kerja,
                     'id_sub_unit_kerja' => $id_sub_unit_kerja,
@@ -1717,7 +1735,17 @@ class DashboardController extends Controller
                     $q->whereNull('tgl_expired')
                         ->orWhereDate('tgl_expired', '>=', now()->toDateString());
                 })
+                ->where(function ($q) {
+                    $q->whereNull('master_kategori_directory_id')
+                        ->orWhere('status_turt', 'approved');
+                })
+                ->where(function ($q) {
+                    $q->where('is_akre', '!=', true)
+                        ->orWhereNull('is_akre')
+                        ->orWhere('status_mutu', 'approved');
+                })
                 ->whereNotNull('status_action')->where('status_action', 'approved');
+
         // if(in_array(22, $unitIds)){
         //     $rows = $rows->pluck('file');
         // }elseif(auth()->user()->username === "admin.turt"){
@@ -2917,6 +2945,15 @@ class DashboardController extends Controller
             ->with(['unit:id,name'])
             ->where('statusenabled', true)
             ->where('status_action', 'approved')
+            ->where(function ($q) {
+                    $q->whereNull('master_kategori_directory_id')
+                        ->orWhere('status_turt', 'approved');
+                })
+                ->where(function ($q) {
+                    $q->where('is_akre', '!=', true)
+                        ->orWhereNull('is_akre')
+                        ->orWhere('status_mutu', 'approved');
+                })
             ->where('is_akre', true);
 
         // Logic Pencarian

public/js/pengajuanFile/index.js

@@ -559,6 +559,105 @@ document.addEventListener('DOMContentLoaded', () => {
         if (window.$ && $.fn.select2) $(selectEl).trigger('change');
     }
 
+    function formatDateForInput(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+
+    function formatDateDisplay(dateValue) {
+        if (!dateValue) return '';
+        const date = new Date(`${dateValue}T00:00:00`);
+        if (Number.isNaN(date.getTime())) return '';
+
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+
+    function addYearsToDate(dateValue, years) {
+        if (!dateValue || !years) return '';
+        const baseDate = new Date(`${dateValue}T00:00:00`);
+        if (Number.isNaN(baseDate.getTime())) return '';
+
+        const originalDay = baseDate.getDate();
+        baseDate.setFullYear(baseDate.getFullYear() + Number(years));
+        if (baseDate.getDate() !== originalDay) {
+            baseDate.setDate(0);
+        }
+
+        return formatDateForInput(baseDate);
+    }
+
+    function syncMasaBerlakuField(selectEl) {
+        if (!selectEl) return;
+        const fieldWrap = document.getElementById(selectEl.dataset.dateTarget);
+        const input = document.getElementById(selectEl.dataset.inputTarget);
+        const preview = document.getElementById(selectEl.dataset.previewTarget);
+        const baseInput = document.getElementById(selectEl.dataset.baseTarget);
+        if (!fieldWrap || !input) return;
+
+        if (selectEl.value === 'custom') {
+            fieldWrap.classList.remove('d-none');
+            input.disabled = false;
+            if (preview) preview.textContent = '';
+            return;
+        }
+
+        fieldWrap.classList.add('d-none');
+        input.disabled = true;
+        input.value = '';
+
+        if (!preview) return;
+        if (!selectEl.value) {
+            preview.textContent = '';
+            return;
+        }
+
+        if (!baseInput || !baseInput.value) {
+            preview.textContent = 'Pilih Tanggal Terbit untuk melihat hasil masa berlaku.';
+            return;
+        }
+
+        const expiredDate = addYearsToDate(baseInput.value, selectEl.value);
+        preview.textContent = expiredDate ? `Tanggal kedaluwarsa: ${formatDateDisplay(expiredDate)}` : '';
+    }
+
+    function prepareExpiryInputs(formEl) {
+        const selects = formEl.querySelectorAll('.masa-berlaku-select');
+        for (const selectEl of selects) {
+            const option = selectEl.value;
+            const dateInput = document.getElementById(selectEl.dataset.inputTarget);
+            const baseInput = document.getElementById(selectEl.dataset.baseTarget);
+            if (!dateInput) continue;
+
+            if (!option) {
+                dateInput.value = '';
+                dateInput.disabled = true;
+                continue;
+            }
+
+            if (option === 'custom') {
+                if (!dateInput.value) {
+                    return 'Tanggal kedaluwarsa wajib diisi saat memilih opsi Lainnya.';
+                }
+                dateInput.disabled = false;
+                continue;
+            }
+
+            if (!baseInput || !baseInput.value) {
+                return 'Tanggal Terbit wajib diisi saat memilih masa berlaku 1, 2, atau 3 tahun.';
+            }
+
+            dateInput.value = addYearsToDate(baseInput.value, option);
+            dateInput.disabled = false;
+        }
+
+        return null;
+    }
+
     function arrayFilterEmpty(arr){
         return (arr || []).filter((val) => val !== null && val !== undefined && String(val).trim() !== '');
     }
@@ -718,9 +817,11 @@ document.addEventListener('DOMContentLoaded', () => {
         setChecked(byId('edit_perm_yes'), isPublic);
         setChecked(byId('edit_perm_no'), !isPublic);
 
-        const hasExpired = !!item.tgl_expired;
+        const editMasaBerlaku = byId('edit_masa_berlaku_option');
-        setChecked(byId('edit_has_expired'), hasExpired);
+        if (editMasaBerlaku) {
-        syncEditExpiredField();
+            editMasaBerlaku.value = item.tgl_expired ? 'custom' : '';
+            syncMasaBerlakuField(editMasaBerlaku);
+        }
 
         const displayName = item.fileName || (item.file ? String(item.file).split('/').pop() : '');
         setTextValue(byId('edit_current_file'), displayName ? `File saat ini: ${displayName}` : '');
@@ -747,19 +848,18 @@ document.addEventListener('DOMContentLoaded', () => {
         $("#modalEditPengajuanFile").modal('show');
     }
 
-    function syncEditExpiredField() {
+    const editMasaBerlaku = document.getElementById('edit_masa_berlaku_option');
-        const editHasExpired = document.getElementById('edit_has_expired');
+    if (editMasaBerlaku) {
-        const editExpiredInput = document.getElementById('edit_tgl_expired');
+        editMasaBerlaku.addEventListener('change', function() {
-        if (!editHasExpired || !editExpiredInput) return;
+            syncMasaBerlakuField(editMasaBerlaku);
-        editExpiredInput.disabled = !editHasExpired.checked;
+        });
-        if (!editHasExpired.checked) {
-            editExpiredInput.value = '';
-        }
     }
 
-    const editHasExpired = document.getElementById('edit_has_expired');
+    const editTanggalTerbit = document.getElementById('edit_tanggal_terbit');
-    if (editHasExpired) {
+    if (editTanggalTerbit) {
-        editHasExpired.addEventListener('change', syncEditExpiredField);
+        editTanggalTerbit.addEventListener('change', function() {
+            if (editMasaBerlaku) syncMasaBerlakuField(editMasaBerlaku);
+        });
     }
 
     if (editForm) {
@@ -770,6 +870,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 Swal.fire({ icon: 'error', title: 'Gagal', text: 'ID dokumen tidak ditemukan.' });
                 return;
             }
+            const expiryError = prepareExpiryInputs(editForm);
+            if (expiryError) {
+                Swal.fire({ icon: 'warning', title: 'Validasi form', text: expiryError });
+                return;
+            }
             const formData = new FormData(editForm);
 
             fetch(`/pengajuan-file/${id}/update`, {
@@ -809,12 +914,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // ===== Upload baru (seperti dataUnit) =====
     document.addEventListener('change', function(e){
-        if(!e.target.classList.contains('toggle-expired')) return;
+        if(!e.target.classList.contains('masa-berlaku-select')) return;
-        const targetId = e.target.getAttribute('data-target');
+        syncMasaBerlakuField(e.target);
-        if(!targetId) return;
+    });
-        const fieldWrap = document.getElementById(targetId);
+
-        const input = fieldWrap?.querySelector('input');
+    document.addEventListener('change', function(e){
-        if (input) input.disabled = !e.target.checked;
+        if (!e.target.matches('input[type="date"][id^="dateActive_"]')) return;
+        const index = e.target.id.replace('dateActive_', '');
+        const selectEl = document.querySelector(`.masa-berlaku-select[data-index="${index}"]`);
+        if (selectEl) syncMasaBerlakuField(selectEl);
     });
 
     function resetCreateForm(){
@@ -827,6 +935,7 @@ document.addEventListener('DOMContentLoaded', () => {
             $(formCreate).find('input[type="file"]').val('');
             $(formCreate).find('.file-name').addClass('d-none').text('');
         }
+        document.querySelectorAll('.masa-berlaku-select').forEach(syncMasaBerlakuField);
         resetAkreFields(0);
         enableAkreFields(0);
     }
@@ -1056,22 +1165,33 @@ document.addEventListener('DOMContentLoaded', () => {
                 <label class="form-label fw-semibold">Tanggal Terbit</label>
                 <input class="form-control"
                         type="date"
-                        name="data[${colCount}][date_active]">
+                        name="data[${colCount}][date_active]"
-            </div>
+                        id="dateActive_${colCount}">
-            <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 class="col-md-4">
+                <label class="form-label fw-semibold">Masa Berlaku Dokumen</label>
+                <select class="form-select masa-berlaku-select"
+                        name="data[${colCount}][masa_berlaku_option]"
+                        data-index="${colCount}"
+                        data-date-target="expiredField_${colCount}"
+                        data-input-target="expiredInput_${colCount}"
+                        data-base-target="dateActive_${colCount}"
+                        data-preview-target="expiredPreview_${colCount}">
+                    <option value="">Tidak ada</option>
+                    <option value="1">1 Tahun</option>
+                    <option value="2">2 Tahun</option>
+                    <option value="3">3 Tahun</option>
+                    <option value="custom">Lainnya</option>
+                </select>
+                <div class="form-text text-muted">Opsi 1, 2, dan 3 tahun dihitung dari Tanggal Terbit.</div>
+                <div class="form-text text-primary" id="expiredPreview_${colCount}"></div>
             </div>
 
-            <div class="col-md-5" id="expiredField_${colCount}">
+            <div class="col-md-4 d-none" id="expiredField_${colCount}">
                 <label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
                 <input class="form-control"
                         type="date"
+                        id="expiredInput_${colCount}"
                         name="data[${colCount}][tgl_expired]" disabled>
             </div>
 
@@ -1152,6 +1272,8 @@ document.addEventListener('DOMContentLoaded', () => {
         initKategoriSelect2(colCount);
         enableAkreFields(colCount);
         setKategoriRequired(colCount, false);
+        const insertedSelect = document.querySelector(`.masa-berlaku-select[data-index="${colCount}"]`);
+        if (insertedSelect) syncMasaBerlakuField(insertedSelect);
         colCount++;
     }
 
@@ -1165,12 +1287,22 @@ document.addEventListener('DOMContentLoaded', () => {
         if (select0.length) selectOptionUnitKerjaV1(0);
         initKategoriSelect2(0);
         enableAkreFields(0);
+        document.querySelectorAll('.masa-berlaku-select').forEach(syncMasaBerlakuField);
 
         formCreate.addEventListener('submit', (e) => {
             e.preventDefault();
             const submitBtn = formCreate.querySelector('button[type="submit"]');
             if (submitBtn) submitBtn.disabled = true;
             if (submitBtn) submitBtn.textContent = 'menyimpan...';
+
+            const expiryError = prepareExpiryInputs(formCreate);
+            if (expiryError) {
+                Swal.fire({ icon: 'warning', title: 'Validasi form', text: expiryError });
+                if (submitBtn) submitBtn.disabled = false;
+                if (submitBtn) submitBtn.textContent = 'Simpan';
+                return;
+            }
+
             const formData = new FormData(formCreate);
 
             fetch(`/uploadv2`, {

resources/views/dataUmum/index.blade.php

@@ -473,7 +473,7 @@
                             >
                                 <i class="fa-solid fa-download"></i>
                             </a>
-                            ${authUnitKerja.id === 22 ? `
+                            ${authUnitKerja?.id === 22 ? `
                             <button
                                 type="button"
                                 class="btn btn-warning btn-sm"

resources/views/dataUnit/index.blade.php

@@ -262,13 +262,117 @@
             return [value];
         }
 
+        function formatDateForInput(date) {
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        }
+
+        function formatDateDisplay(dateValue) {
+            if (!dateValue) return '';
+            const date = new Date(`${dateValue}T00:00:00`);
+            if (Number.isNaN(date.getTime())) return '';
+
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${day}/${month}/${year}`;
+        }
+
+        function addYearsToDate(dateValue, years) {
+            if (!dateValue || !years) return '';
+            const baseDate = new Date(`${dateValue}T00:00:00`);
+            if (Number.isNaN(baseDate.getTime())) return '';
+
+            const originalDay = baseDate.getDate();
+            baseDate.setFullYear(baseDate.getFullYear() + Number(years));
+            if (baseDate.getDate() !== originalDay) {
+                baseDate.setDate(0);
+            }
+
+            return formatDateForInput(baseDate);
+        }
+
+        function syncMasaBerlakuField(selectEl) {
+            if (!selectEl) return;
+            const fieldWrap = document.getElementById(selectEl.dataset.dateTarget);
+            const input = document.getElementById(selectEl.dataset.inputTarget);
+            const preview = document.getElementById(selectEl.dataset.previewTarget);
+            const baseInput = document.getElementById(selectEl.dataset.baseTarget);
+            if (!fieldWrap || !input) return;
+
+            if (selectEl.value === 'custom') {
+                fieldWrap.classList.remove('d-none');
+                input.disabled = false;
+                if (preview) preview.textContent = '';
+                return;
+            }
+
+            fieldWrap.classList.add('d-none');
+            input.disabled = true;
+            input.value = '';
+
+            if (!preview) return;
+            if (!selectEl.value) {
+                preview.textContent = '';
+                return;
+            }
+
+            if (!baseInput || !baseInput.value) {
+                preview.textContent = 'Pilih Tanggal Terbit untuk melihat hasil masa berlaku.';
+                return;
+            }
+
+            const expiredDate = addYearsToDate(baseInput.value, selectEl.value);
+            preview.textContent = expiredDate
+                ? `Tanggal kedaluwarsa: ${formatDateDisplay(expiredDate)}`
+                : '';
+        }
+
+        function prepareExpiryInputs(formEl) {
+            const selects = formEl.querySelectorAll('.masa-berlaku-select');
+            for (const selectEl of selects) {
+                const option = selectEl.value;
+                const dateInput = document.getElementById(selectEl.dataset.inputTarget);
+                const baseInput = document.getElementById(selectEl.dataset.baseTarget);
+                if (!dateInput) continue;
+
+                if (!option) {
+                    dateInput.value = '';
+                    dateInput.disabled = true;
+                    continue;
+                }
+
+                if (option === 'custom') {
+                    if (!dateInput.value) {
+                        return 'Tanggal kedaluwarsa wajib diisi saat memilih opsi Lainnya.';
+                    }
+                    dateInput.disabled = false;
+                    continue;
+                }
+
+                if (!baseInput || !baseInput.value) {
+                    return 'Tanggal Terbit wajib diisi saat memilih masa berlaku 1, 2, atau 3 tahun.';
+                }
+
+                dateInput.value = addYearsToDate(baseInput.value, option);
+                dateInput.disabled = false;
+            }
+
+            return null;
+        }
+
         document.addEventListener('change', function(e){
-            if(!e.target.classList.contains('toggle-expired')) return;
+            if(!e.target.classList.contains('masa-berlaku-select')) return;
-            const targetId = e.target.getAttribute('data-target');
+            syncMasaBerlakuField(e.target);
-            if(!targetId) return;
+        });
-            const fieldWrap = document.getElementById(targetId);
+
-            const input = fieldWrap.querySelector('input');
+        document.addEventListener('change', function(e){
-            input.disabled = !e.target.checked;
+            if (!e.target.matches('input[type="date"][id^="dateActive_"]')) return;
+            const index = e.target.id.replace('dateActive_', '');
+            const selectEl = document.querySelector(`.masa-berlaku-select[data-index="${index}"]`);
+            if (selectEl) syncMasaBerlakuField(selectEl);
         });
 
         if(pageSizeSelect){
@@ -349,6 +453,7 @@
             formCreate.find('select').val(null).trigger('change');
             formCreate.find('input[type="file"]').val('');
             formCreate.find('.file-name').addClass('d-none').text('');
+            document.querySelectorAll('.masa-berlaku-select').forEach(syncMasaBerlakuField);
             resetAkreFields(0);
             enableAkreFields(0);
         }
@@ -607,7 +712,7 @@
                             >
                                 <i class="fa-solid fa-download"></i>
                             </a>
-                            ${authUnitKerja.id === 22 ? `
+                            ${authUnitKerja?.id === 22 ? `
                              <button
                                 type="button"
                                 class="btn btn-warning btn-sm"
@@ -1028,6 +1133,7 @@
             selectOptionUnitKerjaV1(0);
             initKategoriSelect2(0);
             enableAkreFields(0);
+            document.querySelectorAll('.masa-berlaku-select').forEach(syncMasaBerlakuField);
         });
 
         function loadSubUnitKerja(unitId){
@@ -1112,22 +1218,33 @@
                 <label class="form-label fw-semibold">Tanggal Terbit</label>
                 <input class="form-control"
                         type="date"
-                                    name="data[${colCount}][date_active]">
+                        name="data[${colCount}][date_active]"
-                        </div>
+                        id="dateActive_${colCount}">
-                        <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 class="col-md-4">
+                <label class="form-label fw-semibold">Masa Berlaku Dokumen</label>
+                <select class="form-select masa-berlaku-select"
+                        name="data[${colCount}][masa_berlaku_option]"
+                        data-index="${colCount}"
+                        data-date-target="expiredField_${colCount}"
+                        data-input-target="expiredInput_${colCount}"
+                        data-base-target="dateActive_${colCount}"
+                        data-preview-target="expiredPreview_${colCount}">
+                    <option value="">Tidak ada</option>
+                    <option value="1">1 Tahun</option>
+                    <option value="2">2 Tahun</option>
+                    <option value="3">3 Tahun</option>
+                    <option value="custom">Lainnya</option>
+                </select>
+                <div class="form-text text-muted">Opsi 1, 2, dan 3 tahun dihitung dari Tanggal Terbit.</div>
+                <div class="form-text text-primary" id="expiredPreview_${colCount}"></div>
             </div>
 
-                        <div class="col-md-5" id="expiredField_${colCount}">
+            <div class="col-md-4 d-none" id="expiredField_${colCount}">
                 <label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
                 <input class="form-control"
                         type="date"
+                        id="expiredInput_${colCount}"
                         name="data[${colCount}][tgl_expired]" disabled>
             </div>
 
@@ -1397,6 +1514,18 @@
         e.preventDefault();
         const submitBtn = $(this).find('button[type="submit"]');
         submitBtn.prop('disabled', true).text('menyimpan...')
+
+        const expiryError = prepareExpiryInputs(this);
+        if (expiryError) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'Validasi form',
+                text: expiryError
+            });
+            submitBtn.prop('disabled', false).text('Simpan');
+            return;
+        }
+
         const formData = new FormData(this);
         console.log(formData);
 

resources/views/dataUnit/modal/create.blade.php

@@ -46,17 +46,29 @@
                 </div>
                 <div class="col-md-4">
                     <label class="form-label fw-semibold">Tanggal Terbit</label>
-                    <input class="form-control" type="date" name="data[0][date_active]">
+                    <input class="form-control" type="date" name="data[0][date_active]" id="dateActive_0">
                 </div>
                 <div class="col-md-4">
-                    <div class="form-check">
+                    <label class="form-label fw-semibold">Masa Berlaku Dokumen</label>
-                        <input class="form-check-input toggle-expired" type="checkbox" id="hasExpired0" data-target="expiredField_0">
+                    <select class="form-select masa-berlaku-select"
-                        <label class="form-check-label" for="hasExpired0">Masa Berlaku Dokumen?</label>
+                            name="data[0][masa_berlaku_option]"
+                            data-index="0"
+                            data-date-target="expiredField_0"
+                            data-input-target="expiredInput_0"
+                            data-base-target="dateActive_0"
+                            data-preview-target="expiredPreview_0">
+                        <option value="">Tidak ada</option>
+                        <option value="1">1 Tahun</option>
+                        <option value="2">2 Tahun</option>
+                        <option value="3">3 Tahun</option>
+                        <option value="custom">Lainnya</option>
+                    </select>
+                    <div class="form-text text-muted">Opsi 1, 2, dan 3 tahun dihitung dari Tanggal Terbit.</div>
+                    <div class="form-text text-primary" id="expiredPreview_0"></div>
                 </div>
-                </div>
+                <div class="col-md-4 d-none" id="expiredField_0">
-                <div class="col-md-4" id="expiredField_0">
                     <label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
-                    <input class="form-control" type="date" name="data[0][tgl_expired]" disabled>
+                    <input class="form-control" type="date" name="data[0][tgl_expired]" id="expiredInput_0" disabled>
                 </div>
                 <div class="col-md-4">
                     <label class="form-label fw-semibold">Boleh dilihat unit lain? <span class="text-danger">*</span></label>

resources/views/pengajuanFile/modal/edit.blade.php

@@ -47,12 +47,25 @@
                 <input class="form-control" type="date" name="tanggal_terbit" id="edit_tanggal_terbit">
               </div>
               <div class="col-md-4">
-                <div class="form-check">
+                <label class="form-label fw-semibold">Masa Berlaku Dokumen</label>
-                  <input class="form-check-input toggle-expired" type="checkbox" id="edit_has_expired" data-target="edit_expired_field">
+                <select class="form-select masa-berlaku-select"
-                  <label class="form-check-label" for="edit_has_expired">Masa Berlaku Dokumen?</label>
+                        name="masa_berlaku_option"
+                        id="edit_masa_berlaku_option"
+                        data-index="edit"
+                        data-date-target="edit_expired_field"
+                        data-input-target="edit_tgl_expired"
+                        data-base-target="edit_tanggal_terbit"
+                        data-preview-target="edit_expired_preview">
+                  <option value="">Tidak ada</option>
+                  <option value="1">1 Tahun</option>
+                  <option value="2">2 Tahun</option>
+                  <option value="3">3 Tahun</option>
+                  <option value="custom">Lainnya</option>
+                </select>
+                <div class="form-text text-muted">Opsi 1, 2, dan 3 tahun dihitung dari Tanggal Terbit.</div>
+                <div class="form-text text-primary" id="edit_expired_preview"></div>
               </div>
-              </div>
+              <div class="col-md-4 d-none" id="edit_expired_field">
-              <div class="col-md-4" id="edit_expired_field">
                 <label class="form-label fw-semibold">Tanggal Kedaluwarsa Dokumen</label>
                 <input class="form-control" type="date" name="tgl_expired" id="edit_tgl_expired" disabled>
               </div>