diff --git a/app/Helpers/general.php b/app/Helpers/general.php
index 6291aa27..6d60a08b 100644
--- a/app/Helpers/general.php
+++ b/app/Helpers/general.php
@@ -27,9 +27,6 @@
     'time' => 'Input Jam',
     'textarea' => 'Text Area',
     'select-manual' => 'Pilihan (Kustom)',
-    'select-otomatis' => 'Pilihan (Referensi)',
-    'hari' => 'Input Hari',
-    'hari-tanggal' => 'Input Hari dan Tanggal',
 ]));
 
 if (! function_exists('openkab_versi')) {
diff --git a/catatan_rilis.md b/catatan_rilis.md
index a7765586..a99e59ed 100644
--- a/catatan_rilis.md
+++ b/catatan_rilis.md
@@ -10,6 +10,7 @@ Di rilis ini, versi 2501.0.0 berisi penambahan filter wilayah pada estunting dan
 6. [#475](https://github.com/OpenSID/OpenKab/issues/475) Penambahan fungsi multiple hapus pada halaman suplemen terdata.
 7. [#489](https://github.com/OpenSID/OpenKab/issues/489) Penambahan fungsi pengaturan menu pada halaman admin.
 8. [#491](https://github.com/OpenSID/OpenKab/issues/491) Penambahan halaman geo spasial.
+9. [#480](https://github.com/OpenSID/OpenKab/issues/480) Penambahan preview data suplemen. 
 
 #### Perbaikan BUG
 
diff --git a/resources/views/suplemen/edit.blade.php b/resources/views/suplemen/edit.blade.php
index 24a6c989..dc6691cb 100644
--- a/resources/views/suplemen/edit.blade.php
+++ b/resources/views/suplemen/edit.blade.php
@@ -79,6 +79,9 @@
                     </div>
                     <div class="card-footer">
                         @include('layouts.reset_form')
+                        <button type="button" class="btn btn-secondary btn-sm pull-right" id="previewButton">
+                            <i class="fa fa-eye"></i> Preview
+                        </button>
                         <button type="submit" class="btn btn-info btn-sm pull-right">
                             <i class="fa fa-check"></i> Simpan
                         </button>
@@ -87,8 +90,12 @@
             </div>
         </div>
     </div>
+@include('suplemen.preview')
+
 @endsection
 
 @section('js')
 @include('suplemen.edit_js')
+@include('suplemen.preview_js')
+
 @endsection
diff --git a/resources/views/suplemen/form.blade.php b/resources/views/suplemen/form.blade.php
index 54ae189f..b33b035c 100644
--- a/resources/views/suplemen/form.blade.php
+++ b/resources/views/suplemen/form.blade.php
@@ -69,13 +69,15 @@
                         </div>
                         <div class="form-group row">
                             @include('suplemen.kode_isian')
-
                         </div>
 
 
                     </div>
                     <div class="card-footer">
                         @include('layouts.reset_form')
+                        <button type="button" class="btn btn-secondary btn-sm pull-right" id="previewButton">
+                            <i class="fa fa-eye"></i> Preview
+                        </button>
                         <button type="submit" class="btn btn-info btn-sm pull-right">
                             <i class="fa fa-check"></i> Simpan
                         </button>
@@ -84,9 +86,13 @@
             </div>
         </div>
     </div>
+@include('suplemen.preview')
+    
+
 @endsection
 
 @section('js')
 @include('suplemen.kode_isian_js')
 @include('suplemen.form_js')
+@include('suplemen.preview_js')
 @endsection
diff --git a/resources/views/suplemen/kode_isian.blade.php b/resources/views/suplemen/kode_isian.blade.php
index 4c7900e5..0b7d3748 100644
--- a/resources/views/suplemen/kode_isian.blade.php
+++ b/resources/views/suplemen/kode_isian.blade.php
@@ -66,5 +66,4 @@
     <button type="button" class="btn btn-success btn-sm btn-block tambah-kode" data-type="utama" title="Tambah Kode Isian">
         <i class="fa fa-plus"></i>
     </button>
-</div>
-
+</div>
\ No newline at end of file
diff --git a/resources/views/suplemen/kode_isian_js.blade.php b/resources/views/suplemen/kode_isian_js.blade.php
index 0cb20ef9..060451f9 100644
--- a/resources/views/suplemen/kode_isian_js.blade.php
+++ b/resources/views/suplemen/kode_isian_js.blade.php
@@ -192,5 +192,4 @@
                 $(this).parents('.duplikasi').find('.isian').val('');
             });
 });
-
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/views/suplemen/preview.blade.php b/resources/views/suplemen/preview.blade.php
new file mode 100644
index 00000000..4ba5bf84
--- /dev/null
+++ b/resources/views/suplemen/preview.blade.php
@@ -0,0 +1,41 @@
+<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="previewModalLabel">Preview Data Suplemen</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <table class="table table-bordered">
+                    <tr>
+                        <th>Sasaran</th>
+                        <td id="previewSasaran"></td>
+                    </tr>
+                    <tr>
+                        <th>Nama Data Suplemen</th>
+                        <td id="previewNama"></td>
+                    </tr>
+                    <tr>
+                        <th>Keterangan</th>
+                        <td id="previewKeterangan"></td>
+                    </tr>
+                    <tr>
+                        <th>Status</th>
+                        <td id="previewStatus"></td>
+                    </tr>
+                    <tr>
+                        <th colspan="2">Kode Isian</th>
+                    </tr>
+                    <tr>
+                        <td colspan="2" id="previewKodeIsian"></td>
+                    </tr>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/suplemen/preview_js.blade.php b/resources/views/suplemen/preview_js.blade.php
new file mode 100644
index 00000000..a94ed4de
--- /dev/null
+++ b/resources/views/suplemen/preview_js.blade.php
@@ -0,0 +1,190 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        document.getElementById('previewButton').addEventListener('click', function () {
+            let isValid = true;
+            const requiredFields = document.querySelectorAll('[required]');
+            requiredFields.forEach(field => {
+                if (!field.value.trim()) {
+                    isValid = false;
+                    field.classList.add('is-invalid'); // Tambahkan class error pada input
+                } else {
+                    field.classList.remove('is-invalid'); // Hapus class error jika sudah terisi
+                }
+            });
+
+            // Jika tidak valid, cegah modal tampil
+            if (!isValid) {
+                // alert('Harap isi semua bidang yang wajib (required).');
+                return;
+            }
+            // Ambil nilai dari form
+
+            // Ambil data dari PHP
+            const sasaranMap = JSON.parse('<?php echo json_encode(unserialize(SASARAN)); ?>');
+
+            // Ambil value yang dipilih dari dropdown
+            const selectedValue = document.querySelector('select[name="sasaran"]').value;
+
+            // Ambil nama sasaran berdasarkan value
+            const sasaran = sasaranMap[selectedValue] || 'Belum dipilih';
+            const nama = document.querySelector('input[name="nama"]').value || 'Belum diisi';
+            const keterangan = document.querySelector('textarea[name="keterangan"]').value || 'Belum diisi';
+            const status = document.querySelector('select[name="status"]').value || 'Belum dipilih';
+
+            // Format status
+            const statusText = status === '1' ? 'Aktif' : status === '0' ? 'Tidak Aktif' : 'Belum dipilih';
+
+            // Ambil data kode isian
+            const kodeIsianRows = document.querySelectorAll('#dragable-form-utama tr');
+            // let kodeIsianContent = '<ul>';
+            // kodeIsianRows.forEach(row => {
+            //     const tipe = row.querySelector('select[name="tipe_kode[]"]').value || 'N/A';
+            //     const namaKode = row.querySelector('input[name="nama_kode[]"]').value || 'N/A';
+            //     const label = row.querySelector('input[name="label_kode[]"]').value || 'N/A';
+            //     kodeIsianContent += `<li>${tipe} - ${namaKode} - ${label}</li>`;
+            // });
+            // kodeIsianContent += '</ul>';
+            let kodeIsianContent = '';
+            kodeIsianRows.forEach(row => {
+                const tipe = row.querySelector('select[name="tipe_kode[]"]').value || 'N/A';
+                const namaKode = row.querySelector('input[name="nama_kode[]"]').value || 'N/A';
+                const label = row.querySelector('input[name="label_kode[]"]').value || 'N/A';
+                const placeholder = row.querySelector('input[name="deskripsi_kode[]"]') ? row.querySelector('input[name="deskripsi_kode[]"]').value : '';
+                const kolom = row.querySelector('select[name="kolom[]"]').value || '12';
+                // Cek jika elemen required ada
+                const requiredElement = row.querySelector('input[name="required_kode[]"]');
+                const required = requiredElement && requiredElement.checked ? 'required' : '';
+
+                // Menentukan class kolom
+                const widthClass = 'col-sm-' + kolom;
+
+                let fieldHtml = '';
+                if (tipe === 'date') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <div class="input-group input-group-sm date">
+                                            <input type="date" class="form-control input-sm pull-right" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'text') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <input type="text" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'email') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <input type="email" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'url') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <input type="url" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'number') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <input type="number" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'time') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <div class="input-group input-group-sm">
+                                            <div class="input-group-addon">
+                                                <i class="fa fa-clock-o"></i>
+                                            </div>
+                                            <input type="time" class="form-control input-sm" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'textarea') {
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <textarea class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}"></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                } else if (tipe === 'select-manual') {
+                    const pilihan = row.querySelector('textarea[name="pilihan_kode[]"]').value.split(','); // Assuming choices are in a comma-separated string
+                    let optionsHtml = '<option value="">-- Pilih --</option>';
+                    pilihan.forEach(option => {
+                        optionsHtml += `<option value="${option}">${option}</option>`;
+                    });
+
+                    fieldHtml = `
+                        <div class="row mb-3">
+                            <label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
+                            <div class="col-sm-9">
+                                <div class="row">
+                                    <div class="${widthClass}">
+                                        <select class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required}>
+                                            ${optionsHtml}
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                }
+
+                kodeIsianContent += fieldHtml;
+            });
+
+
+            // Isi modal dengan data
+            document.getElementById('previewSasaran').textContent = sasaran;
+            document.getElementById('previewNama').textContent = nama;
+            document.getElementById('previewKeterangan').textContent = keterangan;
+            document.getElementById('previewStatus').textContent = statusText;
+            document.getElementById('previewKodeIsian').innerHTML = kodeIsianContent;
+
+            // Tampilkan modal
+            $('#previewModal').modal('show');
+        });
+    });
+</script>
\ No newline at end of file