prgress di akses

app/Http/Controllers/DashboardController.php

@@ -15,23 +15,52 @@ use Illuminate\Support\Str;
 class DashboardController extends Controller
 {
     public function index(){
-        dd(auth()->user());
-        $unitKerja = UnitKerja::where('statusenabled', true)->select('id', 'name')->get();
-        $subUnitKerja = SubUnitKerja::where('statusenabled', true)->select('id', 'name')->get();
         $katDok = MasterKategori::where('statusenabled', true)->select('master_kategori_directory_id', 'nama_kategori_directory')->get();
         $klasifikasiDok = MasterKlasifikasi::where('statusenabled', true)->select('master_klasifikasi_directory_id', 'nama_klasifikasi_directory')->get();
+
+        $authMapping = auth()->user()?->dataUser?->mappingUnitKerjaPegawai[0];
+        $authUnitKerja = $authMapping->objectunitkerjapegawaifk;
+        $authSubUnitKerja = $authMapping->objectsubunitkerjapegawaifk;
         $payload = [
             'title' => 'Dashboard',
-            'unitKerja' => $unitKerja,
-            'subUnitKerja' => $subUnitKerja,
             'katDok' => $katDok,
             'klasifikasiDok' => $klasifikasiDok,
+            'authUnitKerja' => $authUnitKerja,
+            'authSubUnitKerja' => $authSubUnitKerja,
         ];
         return view('dashboard.index', $payload);
     }
 
     public function dataUnitKerja(){
-        $unitKerja = UnitKerja::where('statusenabled', true)->select('id', 'name')->get();
+        $authMapping = auth()->user()?->dataUser?->mappingUnitKerjaPegawai[0];
+        $authUnitKerja = $authMapping->objectunitkerjapegawaifk;
+        $authSubUnitKerja = $authMapping->objectsubunitkerjapegawaifk;
+        $kategori = request('kategori');
+        $filterUnit = request('unitKerja');
+        $subUnit = request('subUnit');
+        $klasifikasi = request('klasifikasi');
+
+
+
+        $unitKerja = UnitKerja::where('statusenabled', true)
+                ->where('id', $authUnitKerja)
+                ->with(['subUnitKerja' => function ($query) use ($authSubUnitKerja, $kategori, $filterUnit, $subUnit, $klasifikasi) {
+                        $query->where('id', $authSubUnitKerja)
+                            ->with(['fileDirectory' => function ($q) use ($kategori, $filterUnit, $subUnit, $klasifikasi) {
+                                $q->when($filterUnit, function ($subQ) use ($filterUnit) {
+                                    $subQ->where('id_unit_kerja', $filterUnit);
+                                })->when($subUnit, function ($subQ) use ($subUnit) {
+                                    $subQ->where('id_sub_unit_kerja', $subUnit);
+                                })->when($kategori, function ($subQ) use ($kategori) {
+                                    $subQ->where('master_kategori_directory_id', $kategori);
+                                })->when($klasifikasi, function ($subQ) use ($klasifikasi) {
+                                    $subQ->where('master_klasifikasi_directory_id', $klasifikasi);
+                                });
+                            }]);
+                    }])
+                ->select('id', 'name')
+                ->get();
+
         $katDok = MasterKategori::where('statusenabled', true)->select('master_kategori_directory_id', 'nama_kategori_directory')->get();
         $data = [
             'unitKerja' => $unitKerja,
@@ -51,9 +80,9 @@ class DashboardController extends Controller
                 $file = request()->file("data.$index.file");
                 $payload = [
                     'master_klasifikasi_directory_id' => $value['klasifikasi'],
-                    'id_unit_kerja' => request('id_unit_kerja') ?? null,
-                    'id_sub_unit_kerja' => request('id_sub_unit_kerja') ?? null,
-                    'master_kategori_directory_id' => request('master_kategori_directory_id') ?? null,
+                    'id_unit_kerja' => $value['id_unit_kerja'],
+                    'id_sub_unit_kerja' => $value['id_sub_unit_kerja'],
+                    'master_kategori_directory_id' => $value['master_kategori_directory_id'],
                     'pegawai_id_entry' => auth()->user()->id ?? 1,
                     'pegawai_nama_entry' => auth()->user()->namalengkap ?? 'tes',
                 ];
@@ -77,4 +106,37 @@ class DashboardController extends Controller
             ], 500);
         }
     }
+
+    public function OptionUnitKerja(){
+        $q = request()->get('q');
+        $authMapping = auth()->user()?->dataUser?->mappingUnitKerjaPegawai[0];
+        $authUnitKerja = $authMapping?->objectunitkerjapegawaifk;
+        $authSubUnitKerja = $authMapping?->objectsubunitkerjapegawaifk;
+        $akses = false;
+
+        $query = UnitKerja::query();
+        if(!$akses){
+            $query->where(['statusenabled' => true, 'id' => $authUnitKerja])
+                ->with(['subUnitKerja' => function($query) use($authSubUnitKerja){
+                    $query->where('id', $authSubUnitKerja);
+                }]);
+        }
+        $data = $query->when($q, function ($query, $q){
+            $query->where('name', 'ILIKE', '%' .$q . '%');
+        })
+        ->select('id', 'name')->get();
+        return response()->json([
+            'status' => true,
+            'data' => $data
+        ], 200);
+    }
+
+    public function deleteFile(string $id){
+        $data = FileDirectory::where('file_directory_id', $id)->first();
+        $data->update(['statusenabled' => false]);
+        return response()->json([
+            'success' => true,
+            'message' => 'Berhasil menghapus data'
+        ]);
+    }
 }

app/Models/DataUser.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class DataUser extends Model
+{
+    protected $connection = 'dbDirectory';
+    protected $table = 'public.pegawai_m';
+    public $timestamps = false;
+    protected $primaryKey = 'id';
+    protected $guarded = ['id'];
+
+    public function mappingUnitKerjaPegawai(){
+        return $this->hasMany(MappingUnitKerjaPegawai::class, 'objectpegawaifk', 'id')->select('id', 'objectsubunitkerjapegawaifk', 'objectunitkerjapegawaifk');
+    }
+}

app/Models/MappingUnitKerjaPegawai.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class MappingUnitKerjaPegawai extends Model
+{
+    protected $connection = 'dbDirectory';
+    protected $table = 'public.mappegawaijabatantounitkerja_m';
+    public $timestamps = false;
+    protected $primaryKey = 'id';
+    protected $guarded = ['id'];
+    protected $with = ['unitKerja', 'subUnitKerja'];
+
+    public function unitKerja(){
+        return $this->belongsTo(UnitKerja::class, 'objectunitkerjapegawaifk', 'id');
+    }
+    public function subUnitKerja(){
+        return $this->belongsTo(SubUnitKerja::class, 'objectsubunitkerjapegawaifk', 'id');
+    }
+}

app/Models/User.php

@@ -45,4 +45,8 @@ class User extends Authenticatable
             'katasandi' => 'hashed',
         ];
     }
+    protected $with = ['dataUser'];
+    public function dataUser(){
+        return $this->belongsTo(DataUser::class, 'objectpegawaifk', 'id')->select('id', 'namalengkap');
+    }
 }

public/js/dashboard/_init.js

@@ -1,2 +1,2 @@
-const modalCreate = document.getElementById('modalFileCreate')
+const modalCreate = document.getElementById('modalCreateFile')
 const formCreate = $("#formFile")

public/js/dashboard/action.js

@@ -26,8 +26,10 @@ formCreate.on('submit', function(e){
 
                 }).showToast();
                 $("#col_add_file").html('');
-                colCount = 0; // reset counter
-                formCreate[0].reset();
+                colCount = 1; // reset counter
+                formCreate.find('input[type="text"], input[type="file"]').val('');
+                formCreate.find('select').val(null).trigger('change');
+
                 index()
                 modalCreate.removeEventListener('hidden.bs.modal', handler);
             };

public/js/dashboard/functions.js

@@ -1,24 +1,89 @@
+let colCount = 1;
 $(document).ready(function() {
-    $('.unit_kerja').select2();
-    $('.sub_unit_kerja').select2();
+    $('.unit_kerja').select2({
+        placeholder: '-- Pilih Unit Kerja --',
+        allowClear:true,
+        width: '100%',
+        ajax:{
+            url : '/select-unit-kerja',
+            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,
+                        sub_units: item?.sub_unit_kerja
+                    }))
+                }
+            },
+            cache: true,
+        },
+        minimumInputLength: 1,
+    });
+
+    $('.sub_unit_kerja').select2({
+            placeholder: '-- Pilih Sub Unit Kerja ',
+            allowClear:true,
+            width: '100%',
+    })
+
+    $('.unit_kerja').on('select2:select', function(e){
+        let data = e.params.data;
+        $('.sub_unit_kerja').empty().append('<option value="" disable>-- Pilih Sub Unit Kerja --</option>')
+
+        if(data.sub_units && data.sub_units.length > 0){
+            data.sub_units.forEach(sub => {
+                $('.sub_unit_kerja').append(`<option value="${sub.id}">${sub.name}</option>`)
+            })
+        }
+    })
+
     $('.klasifikasi_dok').select2();
     $('.kategori_dok').select2();
+
+    selectOptionUnitKerja(0)
 });
 
-
-let colCount = 1;
 function addForm(){
     let col = $("#col_add_file")
 
     let html = '';
 
-        html += `  <div class="col mt-2 d-flex align-items-start gap-2" id="col-${colCount}">
-                     <div class="col-md-6">
+        html += ` <div class="row mt-3" id="col-${colCount}">
+                <hr />
+                <div class="col-md-6 mb-2">
+                    <label>Unit</label>
+                      <select class="form-control" name="data[${colCount}][id_unit_kerja]" id="select_id_unit_kerja_${colCount}" required>
+                            <option value="" disable>Select Choose</option>
+                      </select>
+                </div>
+                <div class="col-md-6 mb-2">
+                    <label>Sub Unit</label>
+                      <select class="form-control" name="data[${colCount}][id_sub_unit_kerja]" id="select_id_sub_unit_kerja_${colCount}" required>
+                            <option value="" disable>Select Choose</option>
+                      </select>
+                </div>
+                <div class="col-md-4">
+                      <label>Kategori Dokumen</label>
+                      <select class="form-control" name="data[${colCount}][master_kategori_directory_id]" id="select_kategori_${colCount}" required>
+                            <option value="" disable>Select Choose</option>
+                             ${katDok.map(dok => `
+                                    <option value="${dok?.master_kategori_directory_id}">${dok?.nama_kategori_directory}</option>
+                                    `).join('')}
+                      </select>
+                </div>
+                     <div class="col-md-4">
                         <label>File</label>
                         <input type="file" class="form-control" name="data[${colCount}][file]" placeholder="exp : Juknis" required>
                     </div>
-                    <div class="col-md-5">
-                        <label>Klasifikasi File</label>
+                    <div class="col-md-3">
+                        <label>Klasifikasi Dokumen</label>
                         <select class="form-select" name="data[${colCount}][klasifikasi]">
                                 <option value="" disable >Select Choose</option>
                                 ${klasifikasiDok.map(kla => `
@@ -30,10 +95,9 @@ function addForm(){
                         <button type="button" class="btn btn-danger mt-4 me-2" onclick="removeCol(${colCount})"><i class="fa-solid fa-trash"></i></button>
                     </div>
              </div>
-
-
         `
     col.append(html)
+    selectOptionUnitKerja(colCount)
     colCount++;
 
 }
@@ -43,3 +107,57 @@ function removeCol(count){
     $(`#col-${count}`).remove()
 }
 
+
+function selectOptionUnitKerja(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',
+            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,
+                        sub_units: item.sub_unit_kerja // kirim ke front
+                    }))
+                }
+            },
+            cache: true,
+        },
+        minimumInputLength: 1,
+    });
+
+       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}</option>`);
+            });
+        }
+
+        // aktifkan select2 untuk sub unit
+
+    });
+}

public/js/dashboard/index.js

@@ -1,63 +1,64 @@
 function renderTree(units, katDok) {
     if (!Array.isArray(units)) return '';
 
-    return `
-        <ul class="file-tree-ul">
-            ${units.map(el => `
+   return `
+    <ul class="file-tree-ul mt-3">
+        ${units.map(el => `
+        <li class="file-tree-li folder">
+            <span class="fw-bolder">📂 ${el.name}</span>
+
+            ${Array.isArray(el.sub_unit_kerja) && el.sub_unit_kerja.length > 0 ? `
+            <ul class="file-tree-ul mt-1 ms-2">
+                ${el.sub_unit_kerja.map(sub => `
                 <li class="file-tree-li folder">
-                    <span class="fw-bolder">📂 ${el.name}</span>
+                    <span class="fw-semibold">📂 ${sub.name}</span>
 
-                    ${Array.isArray(el.sub_unit_kerja) && el.sub_unit_kerja.length > 0 ? `
-                        <ul class="file-tree-ul mt-1 ms-2">
-                            ${el.sub_unit_kerja.map(sub => `
-                                <li class="file-tree-li folder">
-                                    <span class="fw-semibold">📂 ${sub.name}</span>
+                    ${Array.isArray(katDok) && katDok.length > 0 ? `
+                    <ul class="file-tree-ul ms-2">
+                        ${katDok.map(kat => {
+                        // filter file sesuai kategori
+                        const files = (sub.file_directory || []).filter(
+                            file => file.master_kategori_directory_id === kat.master_kategori_directory_id
+                        );
 
-                                    ${Array.isArray(katDok) && katDok.length > 0 ? `
-                                        <ul class="file-tree-ul">
-                                            ${katDok.map(kat => `
-                                                <li class="folder file-tree-li">
-                                                    <span>📂 ${kat.nama_kategori_directory}</span>
-                                                    <ul class="file-tree-ul">
-                                                        ${Array.isArray(sub.file_directory) && sub.file_directory.length > 0 ? `
-                                                            ${sub.file_directory.map(file => `
-                                                                    ${kat.master_kategori_directory_id === file.master_kategori_directory_id ? `
-                                                                        <li class="file-tree-li ms-2">
-                                                                        📄 <a href="/file/${file.file}" target="_blank" rel="noopener noreferrer">${file.file}</a>
-                                                                        </li>
-                                                                        ` : ''}
+                        if (!files.length) return '';
 
-                                                                `).join('')}
-                                                            ` : ''}
-                                                        <li class="file-tree-li ms-2">
-                                                            <button class="add-file-btn btn btn-sm btn-primary ms-2 btn-transaparent"
-                                                                onclick="addFile(this)"
-                                                                data-id_unit_kerja="${el.id}"
-                                                                data-nama_unit_kerja="${el.name || 'tidak_ada'}"
-                                                                data-id_sub_unit_kerja="${sub?.id}"
-                                                                data-nama_sub_unit_kerja="${sub?.name || 'tidak_ada'}"
-                                                                data-id_kategori="${kat?.master_kategori_directory_id}"
-                                                                data-nama_kategori="${kat?.nama_kategori_directory}">
-                                                                ➕ Add File
-                                                            </button>
-                                                        </li>
-                                                    </ul>
-                                                </li>
-                                            `).join('')}
-                                        </ul>
-                                    ` : ''}
-                                </li>
-                            `).join('')}
-                        </ul>
+                        return `
+                            <li class="file-tree-li folder">
+                            <span>📂 ${kat.nama_kategori_directory}</span>
+                                <ul class="file-tree-ul ms-2">
+                                    ${files.map(file => `
+                                    <li class="file-tree-li">
+                                        📄 <a href="#" class="file-link" data-file="${file.file}" data-id="${file?.file_directory_id}">
+                                        ${file.file}
+                                        </a>
+                                    </li>
+                                    `).join('')}
+                                </ul>
+                            </li>
+                        `;
+                        }).join('')}
+                    </ul>
                     ` : ''}
                 </li>
-            `).join('')}
-        </ul>
+                `).join('')}
+            </ul>
+            ` : ''}
+        </li>
+        `).join('')}
+    </ul>
     `;
+
 }
 
-function index() {
-    fetch('/data-unit-kerja')
+function index(kategori_dok = null, unitKerja = null, subUnitKerja = null, klasifikasi_id = null) {
+    const params = new URLSearchParams();
+    if (kategori_dok)   params.append("kategori", kategori_dok);
+    if (unitKerja)      params.append("unitKerja", unitKerja);
+    if (subUnitKerja)   params.append("subUnit", subUnitKerja);
+    if (klasifikasi_id) params.append("klasifikasi", klasifikasi_id);
+
+    fetch(`/data-unit-kerja?${params.toString()}`)
         .then(response => response.json())
         .then(data => {
             let file_tree = document.getElementById("file_tree");
@@ -65,7 +66,6 @@ function index() {
 
             if (Array.isArray(data?.data?.unitKerja)) {
                 file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok);
-
                 // Toggle buka/tutup folder
                 file_tree.querySelectorAll(".folder > span").forEach(span => {
                     span.addEventListener("click", () => {
@@ -88,19 +88,17 @@ function index() {
 
 index();
 
-function addFile(el){
-    let id_unit_kerja =$(el).data('id_unit_kerja')
-    let nama_unit_kerja =$(el).data('nama_unit_kerja')
-    let id_sub_unit_kerja =$(el).data('id_sub_unit_kerja')
-    let nama_sub_unit_kerja =$(el).data('nama_sub_unit_kerja')
-    let id_kategori =$(el).data('id_kategori')
-    let nama_kategori =$(el).data('nama_kategori')
-
-    $("#id_unit_kerja").val(id_unit_kerja)
-    $("#id_sub_unit_kerja").val(id_sub_unit_kerja)
-    $("#master_kategori_directory_id").val(id_kategori)
-    $("#confirm_location_file").html(`Unit Kerja : <b>${nama_unit_kerja}</b> / Sub Unit Kerja : <b>${nama_sub_unit_kerja}</b> / Kategori : <b>${nama_kategori}</b>`)
-    new bootstrap.Modal(modalCreate).show();
-
-
+function searchData(){
+    let klasifikasi_id = $("#klasifikasi_dok").val()
+    let kategori_dok = $("#kategori_dok").val()
+    let unitKerja = $("#unit_kerja").val()
+    let subUnitKerja = $("#sub_unit_kerja").val()
+    if(!klasifikasi_id || !kategori_dok || !unitKerja || !subUnitKerja){
+        Swal.fire({
+            text: 'Lengkapi Isi form pencarian',
+            icon: 'warning'
+        })
+        return
+    }
+   index(kategori_dok, unitKerja, subUnitKerja, klasifikasi_id);
 }

resources/views/dashboard/index.blade.php

@@ -62,47 +62,79 @@
             </div>
             <div class="card-body p-3">
                 <div class="row mb-3 mt-3">
-                    <div class="col-md-3">
-                            <label for="exampleFormControlInput1" class="form-label">Unit Kerja</label>
-                            <select class="unit_kerja form-control" id="unit_kerja">
-                                <option value="" disable >Select Choose</option>
-                                @foreach ($unitKerja as $unit)
-                                <option value="{{ $unit->id }}">{{ $unit->name }}</option>
-                                @endforeach
-                            </select>
-                    </div>
-                    <div class="col-md-3">
-                          <label for="exampleFormControlInput1" class="form-label">Sub Unit Kerja</label>
-                          <select class="sub_unit_kerja form-control" id="sub_unit_kerja">
-                                <option value="" disable >Select Choose</option>
-                                @foreach ($subUnitKerja as $sub)
-                                <option value="{{ $sub->id }}">{{ $sub->name }}</option>
-                                @endforeach
-                          </select>
-                    </div>
+                    <!-- Unit Kerja -->
                     <div class="col-md-2">
-                        <label for="exampleFormControlInput1" class="form-label">Kategori Dok.</label>
-                        <select class="kategori_dok form-control" id="kategori_dok">
-                            <option value="" disable >Select Choose</option>
-                              @foreach ($katDok as $kat)
-                                <option value="{{ $kat->id }}">{{ $kat->nama_kategori_directory }}</option>
-                              @endforeach
+                        <label for="unit_kerja" class="form-label">Unit Kerja</label>
+                        <select class="form-control unit_kerja" id="unit_kerja">
+                            <option value="" disabled selected>Select Choose</option>
                         </select>
                     </div>
+
+                    <!-- Sub Unit Kerja -->
                     <div class="col-md-2">
-                        <label for="exampleFormControlInput1" class="form-label">Klasifikasi Dok.</label>
-                        <select class="klasifikasi_dok form-control" id="klasifikasi_dok">
-                            <option value="" disable >Select Choose</option>
-                             @foreach ($klasifikasiDok as $kla)
-                                <option value="{{ $kla->id }}">{{ $kla->nama_klasifikasi_directory }}</option>
-                              @endforeach
+                        <label for="sub_unit_kerja" class="form-label">Sub Unit Kerja</label>
+                        <select class="form-control sub_unit_kerja" id="sub_unit_kerja">
+                            <option value="" disabled selected>Select Choose</option>
                         </select>
                     </div>
+
+                    <!-- Kategori Dokumen -->
                     <div class="col-md-2">
-                        <button type="button" class="btn btn-primary mt-3">Cari</button>
+                        <label for="kategori_dok" class="form-label">Kategori Dok.</label>
+                        <select class="form-control kategori_dok" id="kategori_dok">
+                            <option value="" disabled selected>Select Choose</option>
+                            @foreach ($katDok as $kat)
+                                <option value="{{ $kat->master_kategori_directory_id }}">{{ $kat->nama_kategori_directory }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Klasifikasi Dokumen -->
+                    <div class="col-md-2">
+                        <label for="klasifikasi_dok" class="form-label">Klasifikasi Dok.</label>
+                        <select class="form-control klasifikasi_dok" id="klasifikasi_dok">
+                            <option value="" disabled selected>Select Choose</option>
+                            @foreach ($klasifikasiDok as $kla)
+                                <option value="{{ $kla->master_klasifikasi_directory_id }}">{{ $kla->nama_klasifikasi_directory }}</option>
+                            @endforeach
+                        </select>
+                    </div>
+
+                    <!-- Button Cari -->
+                    <div class="col-md-2 d-flex align-items-end">
+                        <button type="button" class="btn btn-primary w-100" onclick="searchData()">Cari</button>
+                    </div>
+
+                    <!-- Button Tambah File -->
+                    <div class="col-md-2 d-flex align-items-end">
+                        <button type="button" class="btn btn-success w-100" data-bs-target="#modalCreateFile" data-bs-toggle="modal">
+                            <i data-feather="plus" class="me-1"></i>
+                            Tambah File</button>
                     </div>
                 </div>
-                <div id="file_tree"></div>
+                <div class="row">
+                    <div id="tree-wrapper" class="col-12 col-md-6 mb-3">
+                        <div id="file_tree"></div>
+                    </div>
+                    <div id="preview-wrapper" class="col-md-6 d-none">
+                        <div class="card shadow-sm h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center py-2">
+                                <h6 class="mb-0">📄 Preview</h6>
+                                <button class="btn btn-sm btn-outline-danger" id="close-preview">✕</button>
+                            </div>
+                            <div class="card-body p-2" style="min-height:250px; max-height:80vh; overflow:auto;">
+                                <div id="file-preview" class="text-center text-muted d-flex justify-content-center align-items-center" style="height:100%;">
+                                    <p>📂 Pilih file untuk melihat preview</p>
+                                </div>
+                            </div>
+                                <div class="card-footer p-2 d-flex justify-content-end">
+                                    <button type="button" class="btn btn-sm btn-outline-danger" id="delete-file">Hapus</button>
+                                 </div>
+                        </div>
+                    </div>
+                </div>
+
+
             </div>
         </div>
     </div>
@@ -110,6 +142,115 @@
 @include('dashboard.modal.create')
 <script>
     const klasifikasiDok = @json($klasifikasiDok);
+    const katDok = @json($katDok);
+    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');
+            currentFile = fileUrl
+              idDirectory = e.target.getAttribute('data-id');
+            let ext = fileUrl.split('.').pop().toLowerCase();
+
+            // ubah layout
+            document.getElementById('tree-wrapper').classList.remove('col-12');
+            document.getElementById('tree-wrapper').classList.add('col-md-6');
+            document.getElementById('preview-wrapper').classList.remove('d-none');
+
+            let previewBox = document.getElementById('file-preview');
+
+            if (['jpg','jpeg','png','gif','webp'].includes(ext)) {
+            previewBox.innerHTML = `<img src="/file/${fileUrl}" class="img-fluid rounded shadow-sm" alt="preview">`;
+            } else if (ext === 'pdf') {
+            previewBox.innerHTML = `<iframe src="/file/${fileUrl}" width="100%" height="600px" style="border:none;"></iframe>`;
+            } else {
+            previewBox.innerHTML = `
+                <p class="text-muted">Tidak bisa preview file ini. Silakan download:</p>
+                <a href="/file/${fileUrl}" target="_blank" class="btn btn-sm btn-primary">⬇️ Download</a>
+            `;
+            }
+        }
+
+         if (e.target.id === 'delete-file') {
+            if (!currentFile) {
+                Swal.fire({
+                    text: "Tidak ada file yang dipilih!",
+                    icon: "warning",
+                    confirmButtonText: "OK"
+                });
+                return;
+            }
+
+
+        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
+                            });
+
+                            // reset preview
+                            document.getElementById('file-preview').innerHTML =
+                            `<p>📂 Pilih file untuk melihat preview</p>`;
+
+                            document.getElementById('preview-wrapper').classList.add('d-none');
+                            document.getElementById('tree-wrapper').classList.remove('col-md-6');
+                            document.getElementById('tree-wrapper').classList.add('col-12');
+                            index()
+                            currentFile = null; // reset
+                        } else {
+                            Swal.fire({
+                                text: 'Gagal menghapus file',
+                                icon: 'error'
+                            });
+                        }
+                    })
+                    .catch(err => {
+                        Swal.fire({
+                            text: 'Terjadi error saat menghapus file',
+                            icon: 'error'
+                        });
+                        console.error(err);
+                    });
+                }
+            });
+
+    }
+    });
+
+    // tombol close
+    document.getElementById('close-preview').addEventListener('click', function() {
+    document.getElementById('tree-wrapper').classList.remove('col-md-6');
+    document.getElementById('tree-wrapper').classList.add('col-12');
+    document.getElementById('preview-wrapper').classList.add('d-none');
+    });
+
+
+
+
 </script>
 <script src="{{ ver('/js/dashboard/_init.js') }}"></script>
 <script src="{{ ver('/js/dashboard/index.js') }}"></script>

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

@@ -1,10 +1,10 @@
-<div class="modal fade" id="modalFileCreate" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog modal-lg modal-dialog-centered">
+<div class="modal fade" id="modalCreateFile" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
     <div class="modal-content">
 
       <!-- Modal Header -->
       <div class="modal-header">
-        <h1 class="modal-title fs-5">Aksi <strong id="confirm_location_file"></strong></h1>
+        <h1 class="modal-title fs-5">Aksi </h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
 
@@ -13,26 +13,47 @@
         @csrf
         <div class="modal-body">
           <div class="container" id="container_create">
-            <div class="row">
-                <div class="col-md-6">
+            <div class="row mb-3">
+                <div class="col-md-6 mb-2">
+                    <label>Unit</label>
+                      <select class="form-control" name="data[0][id_unit_kerja]" id="select_id_unit_kerja_0" required>
+                            <option value="" disable>Select Choose</option>
+                      </select>
+                </div>
+                <div class="col-md-6 mb-2">
+                    <label>Sub Unit</label>
+                      <select class="form-control" name="data[0][id_sub_unit_kerja]" id="select_id_sub_unit_kerja_0" required>
+                            <option value="" disable>Select Choose</option>
+                      </select>
+                </div>
+                <div class="col-md-4">
+                      <label>Kategori Dokumen</label>
+                      <select class="form-control" name="data[0][master_kategori_directory_id]" id="select_kategori_0" required>
+                            <option value="" disable>Select Choose</option>
+                           @foreach ($katDok as $kat)
+                                <option value="{{ $kat->master_kategori_directory_id }}">{{ $kat->nama_kategori_directory }}</option>
+                            @endforeach
+                      </select>
+                </div>
+                <div class="col-md-4">
                       <label>File</label>
                       <input type="file" class="form-control" name="data[0][file]" placeholder="exp : Juknis" required>
-                      <input type="hidden" class="form-control" name="id_sub_unit_kerja" id="id_sub_unit_kerja" placeholder="exp : Juknis">
-                      <input type="hidden" class="form-control" name="id_unit_kerja" id="id_unit_kerja" placeholder="exp : Juknis">
-                      <input type="hidden" class="form-control" name="master_kategori_directory_id" id="master_kategori_directory_id" placeholder="exp : Juknis">
+                      <input type="hidden" class="form-control" name="id_unit_kerja" id="id_unit_kerja" value="{{ $authUnitKerja }}" placeholder="exp : Juknis">
+                      <input type="hidden" class="form-control" name="id_sub_unit_kerja" id="id_sub_unit_kerja" placeholder="exp : Juknis" value="{{ $authSubUnitKerja }}">
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-4">
                       <label>Klasifikasi File</label>
                       <select class="form-select" name="data[0][klasifikasi]" required>
-                            <option value="" disable >Select Choose</option>
+                            <option value="" disable>Select Choose</option>
                             @foreach ($klasifikasiDok as $klasifikasi)
                                 <option value="{{ $klasifikasi->master_klasifikasi_directory_id }}">{{ $klasifikasi->nama_klasifikasi_directory }}</option>
                              @endforeach
                       </select>
                 </div>
+
                 <div id="col_add_file"></div>
             </div>
-              <button type="button" class="btn btn-outline-primary btn-sm mt-2" onclick="addForm()">
+              <button type="button" class="btn btn-outline-primary btn-sm mt-3" onclick="addForm()">
               + Tambah Form
             </button>
           </div>

routes/web.php

@@ -16,6 +16,9 @@ Route::middleware(['auth'])->group(function(){
     Route::get('datatable/master-kategori', [MasterKategoriController::class, 'datatable']);
     Route::resource('/master-klasifikasi', MasterKlasifikasiController::class);
     Route::get('datatable/master-klasifikasi', [MasterKlasifikasiController::class, 'datatable']);
+
+    Route::get('/select-unit-kerja', [DashboardController::class, 'OptionUnitKerja']);
+    Route::delete('/delete-file/{id}', [DashboardController::class, 'deleteFile']);
 });
 
 Route::get('/login', [AuthController::class, 'index'])->name('login');