progress

app/Http/Controllers/DashboardController.php

@@ -45,12 +45,12 @@ class DashboardController extends Controller
         $filterUnit = request('unitKerja');
         $subUnit = request('subUnit');
         $klasifikasi = request('klasifikasi');
-
-
         if($kategori && $filterUnit && $subUnit && $klasifikasi){
+            $katArray = explode(',', $kategori);
             $katArray = explode(',', $kategori);
             $subArray = explode(',', $subUnit);
             $klaArray = explode(',', $klasifikasi);
+
             $unitKerja = UnitKerja::where('statusenabled', true)
                 ->where('id', $filterUnit)
                 ->with(['subUnitKerja' => function ($query) use ($katArray, $filterUnit, $subArray, $klaArray) {
@@ -69,12 +69,14 @@ class DashboardController extends Controller
                     }])
                 ->select('id', 'name')
                 ->get();
-        }
+                $katDok = MasterKategori::where('statusenabled', true)->whereIn('master_kategori_directory_id', $katArray)->select('master_kategori_directory_id', 'nama_kategori_directory')->get();
+            }else{
+                $katDok = MasterKategori::where('statusenabled', true)->select('master_kategori_directory_id', 'nama_kategori_directory')->get();
+            }
 
-        $katDok = MasterKategori::where('statusenabled', true)->select('master_kategori_directory_id', 'nama_kategori_directory')->get();
         $data = [
             'unitKerja' => $unitKerja ?? null,
-            'katDok' => $katDok
+            'katDok' => $katDok ?? null
         ];
         return response()->json([
             'status' => true,
@@ -189,4 +191,23 @@ class DashboardController extends Controller
             'message' => 'Berhasil menghapus data'
         ]);
     }
+
+    public function optionSubUnitKerja(string $id){
+        $data = SubUnitKerja::where('statusenabled', true)->where('objectunitkerjapegawaifk', $id)->get();
+        return response()->json([
+            'status' => true,
+            'data' => $data,
+        ]);
+    }
+
+
+    public function getFile($id_unit_kerja, $id_sub_unit_kerja, $master_kategori_directory_id){
+        $klasifikasi = request('klasifikasi');
+         $klaArray = explode(',', $klasifikasi);
+        $data = FileDirectory::where(['statusenabled' => true, 'id_unit_kerja' => $id_unit_kerja, 'id_sub_unit_kerja' => $id_sub_unit_kerja, 'master_kategori_directory_id' => $master_kategori_directory_id])->whereIn('master_klasifikasi_directory_id', $klaArray)->get();
+        return response()->json([
+            'data' => $data,
+            'status' => true,
+        ]);
+    }
 }

app/Models/SubUnitKerja.php

@@ -11,7 +11,6 @@ class SubUnitKerja extends Model
     public $timestamps = false;
     protected $primaryKey = 'id';
     protected $guarded = ['id'];
-    protected $with = ['fileDirectory'];
 
     public function fileDirectory(){
         return $this->hasMany(FileDirectory::class, 'id_sub_unit_kerja', 'id')->where('statusenabled', true);

public/js/dashboard/action.js

@@ -1,3 +1,4 @@
+
 formCreate.on('submit', function(e){
     e.preventDefault();
 
@@ -52,3 +53,5 @@ formCreate.on('submit', function(e){
         }
     });
 });
+
+

public/js/dashboard/functions.js

@@ -1,64 +1,96 @@
 let colCount = 1;
 $(document).ready(function() {
-        $('.unit_kerja').select2({
+    $('.unit_kerja').select2({
-            placeholder: '-- Pilih Unit Kerja --',
+        placeholder: '--- Pilih Unit Kerja ---',
-            allowClear:true,
+        allowClear: true,
-            width: '100%',
+        width: '100%',
-            ajax:{
+        ajax: {
-                url : '/select-unit-kerja',
+            url : '/select-unit-kerja',
-                dataType: 'json',
+            dataType: 'json',
-                delay: 250,
+            delay: 250,
-                data: function(params){
+            data: function(params){
-                    return {
+                let q = '';
-                        q: params.term
+                if(allAkses){
-                    }
+                    q = params.term;
-                },
+                }else{
-                processResults: function(data){
+                    q = authUnitKerja?.name ?? '';
-                   let results = data?.data.map(item => ({
+                }
-                        id: item.id,
-                        text: item.name,
-                        sub_units: item?.sub_unit_kerja
-                    }));
 
-                    return {results}
+                return { q };
-                },
-                cache: true,
             },
-            minimumInputLength: 0,
+            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 ',
+        placeholder: '-- Pilih Sub Unit Kerja --',
-            allowClear:true,
+        allowClear: true,
-            width: '100%',
+        width: '100%',
-    })
+    });
 
-    $('.unit_kerja').on('select2:select', function(e){
+    // --- isi default unit kerja ---
-        let data = e.params.data;
+    if(authUnitKerja){
-        $('.sub_unit_kerja').empty().append('<option value="" disable>-- Pilih Sub Unit Kerja --</option>')
+        let option = new Option(authUnitKerja.name, authUnitKerja.id, true, true);
+        $('.unit_kerja').append(option).trigger('change');
+    }
 
-        if(data.sub_units && data.sub_units.length > 0){
+    let initialUnit = $('.unit_kerja').val();
-            data.sub_units.forEach(sub => {
+    if(initialUnit){
-                $('.sub_unit_kerja').append(`<option value="${sub.id}">${sub.name}</option>`)
+        loadSubUnitKerja(initialUnit);
-            })
+    }
+
+    // jalankan setiap kali unit_kerja berubah
+    $('.unit_kerja').on('change', function(){
+        let idUnit = $(this).val();
+        if(idUnit){
+            loadSubUnitKerja(idUnit);
         }
-    })
+    });
 
     $('.klasifikasi_dok').select2();
     $('.kategori_dok').select2();
+
     if(allAkses){
-        selectOptionUnitKerjaV1(0)
+        selectOptionUnitKerjaV1(0);
     }else{
-        selectOptionUnitKerjaV2(0)
+        selectOptionUnitKerjaV2(0);
     }
 });
 
+function loadSubUnitKerja(unitId){
+    $('.sub_unit_kerja').empty().append('<option value="" disabled>-- Pilih Sub Unit Kerja --</option>');
+
+    $.ajax({
+        url: `/select-sub-unit-kerja/${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 addForm(){
     let col = $("#col_add_file")
 
     let html = '';
 
-        html += ` <div class="row mt-3" id="col-${colCount}">
+        html += `<div class="row mt-3" id="col-${colCount}">
                 <hr />
                 <div class="col-md-6 mb-2">
                     <label>Unit</label>
@@ -222,3 +254,6 @@ function selectOptionUnitKerjaV2(colCount) {
         }
     });
 }
+
+
+

public/js/dashboard/index.js

@@ -1,57 +1,102 @@
-function renderTree(units, katDok) {
+function renderTree(units, katDok, klasifikasi_id) {
-    if (!Array.isArray(units)) return '';
 
-   return `
+  if (!Array.isArray(units) || !units.length) return '<p class="text-muted">Tidak ada data</p>';
-    <button type="button" class="btn btn-sm btn-primary" onclick="referesh()"><i class="fas fa-sync-alt"></i></button>
+  return `<ul class="file-tree-ul">
-    <ul class="file-tree-ul mt-3">
+    ${units.map(u => `
-        ${units.map(el => `
+      <li class="file-tree-li folder">
-        <li class="file-tree-li folder">
+        <span>📂 ${u.name}</span>
-            <span class="fw-bolder">📂 ${el.name}</span>
+        <ul class="file-tree-ul ms-1">
-
+          ${u.sub_unit_kerja.map(s => `
-            ${Array.isArray(el.sub_unit_kerja) && el.sub_unit_kerja.length > 0 ? `
+            <li class="file-tree-li folder">
-            <ul class="file-tree-ul mt-1 ms-2">
+              <span>📂 ${s.name}</span>
-                ${el.sub_unit_kerja.map(sub => `
+              <ul class="file-tree-ul ms-1">
-                <li class="file-tree-li folder">
+                ${katDok.map(k => `
-                    <span class="fw-semibold">📂 ${sub.name}</span>
+                  <li class="file-tree-li folder">
-
+                    <span class="kat-folder" onclick="loadFiles(this)"
-                    ${Array.isArray(katDok) && katDok.length > 0 ? `
+                    data-path="${u.id}-${s.id}-${k.master_kategori_directory_id}"
-                    <ul class="file-tree-ul ms-2">
+                    data-unit="${u.id}"
-                        ${katDok.map(kat => {
+                    data-sub="${s.id}"
-                        // filter file sesuai kategori
+                    data-kat="${k.master_kategori_directory_id}"
-                        const files = (sub.file_directory || []).filter(
+                    data-klas='${JSON.stringify(klasifikasi_id)}'">
-                            file => file.master_kategori_directory_id === kat.master_kategori_directory_id
+                      📂 ${k.nama_kategori_directory}
-                        );
+                    </span>
-
+                    <ul class="file-tree-ul" id="isi-${u.id}-${s.id}-${k.master_kategori_directory_id}" style="display:none"></ul>
-                        if (!files.length) return '';
+                  </li>`).join('')}
-
+              </ul>
-                        return `
+            </li>`).join('')}
-                            <li class="file-tree-li folder">
+        </ul>
-                            <span>📂 ${kat.nama_kategori_directory}</span>
+      </li>`).join('')}
-                                <ul class="file-tree-ul ms-2">
+  </ul>`;
-                                    ${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} - <strong>(${file?.klasifikasi?.nama_klasifikasi_directory})</strong>
-                                        </a>
-                                    </li>
-                                    `).join('')}
-                                </ul>
-                            </li>
-                        `;
-                        }).join('')}
-                    </ul>
-                    ` : ''}
-                </li>
-                `).join('')}
-            </ul>
-            ` : ''}
-        </li>
-        `).join('')}
-    </ul>
-    `;
 }
 
+async function loadFiles(e) {
+
+    const ul = e.nextElementSibling;
+    const unitId = $(e).data('unit')
+    const subId = $(e).data('sub')
+    const katId = $(e).data('kat')
+    const klas = $(e).data('klas')
+
+    const loaded = ul.getAttribute('data-loaded');
+
+    if (loaded === '1') {              // toggle saja
+        ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
+        return;
+    }
+
+    ul.innerHTML = '<li><small class="text-muted">memuat...</small></li>';
+    ul.style.display = 'block';
+
+    try {
+        const r = await fetch(`/getFile/${unitId}/${subId}/${katId}?klasifikasi=${klas}`);
+        const res = await r.json();   // array kosong / ada isi
+        const files = res.data || [];
+        if (!Array.isArray(files) || !files.length) {
+            ul.innerHTML = '<li><small class="text-muted">kosong</small></li>';
+            ul.setAttribute('data-loaded', '1');
+            return;
+        }
+
+        ul.innerHTML = files.map(f => {
+        const name = f.file.split('/').pop();
+        const by   = f.pegawai_nama_entry || 'Unknown';
+        const at   = new Date(f.entry_at).toLocaleString('id-ID', {
+                        day:'2-digit', month:'short', year:'numeric',
+                        hour:'2-digit', minute:'2-digit'
+                    });
+
+        return `
+            <li class="file-tree-li">
+                    <!-- baris atas : nama + klasifikasi -->
+                    <div class="">
+                    📄 <a href="#" class="file-link"
+                            data-file="${f.file}"
+                            data-name_file="${name}"
+                            data-id="${f.file_directory_id}"
+                            data-upload="${by}"
+                            data-time="${at}"
+                            data-klasifikasi="${f.klasifikasi?.nama_klasifikasi_directory}"
+                            title="Di-upload oleh: ${by} pada ${at}">
+                        ${name}
+                        </a>
+                    <strong>(${f.klasifikasi?.nama_klasifikasi_directory})</strong>
+                    </div>
+
+                    <!-- baris bawah : pembuat & tanggal (kecil + italic) -->
+                    <small class="text-muted fst-italic">
+                   Upload by ${by} · ${at}
+                    </small>
+            </li>`;
+        }).join('');
+
+        ul.setAttribute('data-loaded', '1');
+    } catch (e) {
+        ul.innerHTML = '<li><small class="text-danger">gagal memuat</small></li>';
+        console.error(e);
+    }
+}
 function index(kategori_dok = [], unitKerja = null, subUnitKerja = [], klasifikasi_id = []) {
+
     const params = new URLSearchParams();
 
     if (kategori_dok.length)   params.append("kategori", kategori_dok);
@@ -66,7 +111,7 @@ function index(kategori_dok = [], unitKerja = null, subUnitKerja = [], klasifika
             file_tree.innerHTML = '';
 
             if (Array.isArray(data?.data?.unitKerja)) {
-                file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok);
+                file_tree.innerHTML = renderTree(data.data.unitKerja, data.data.katDok, klasifikasi_id);
                 // Toggle buka/tutup folder
                 file_tree.querySelectorAll(".folder > span").forEach(span => {
                     span.addEventListener("click", () => {

resources/views/dashboard/index.blade.php

@@ -66,16 +66,14 @@
                     <!-- Unit Kerja -->
                     <div class="col-md-2">
                         <label for="unit_kerja" class="form-label">Unit Kerja</label>
-                        <select class="form-control unit_kerja" id="unit_kerja" @if(!$allAkses?->all_akses) disabled @endif>
+                        <select class="form-control unit_kerja" id="unit_kerja"{{ ($allAkses && ($allAkses->all_akses || $allAkses->unit_akses)) ? '' : 'disabled' }}>
-                            <option value="" disabled>Select Choose</option>
                         </select>
                     </div>
 
                     <!-- Sub Unit Kerja -->
                     <div class="col-md-2">
                         <label for="sub_unit_kerja" class="form-label">Sub Unit Kerja</label>
-                        <select class="form-control sub_unit_kerja" id="sub_unit_kerja" multiple="multiple"  @if(!$allAkses?->all_akses && !$allAkses?->unit_akses) disabled @endif>
+                        <select class="form-control sub_unit_kerja" id="sub_unit_kerja" @if($allAkses && ($allAkses->all_akses || $allAkses->unit_akses))  multiple="multiple" @else disabled @endif>
-                            <option value="" disabled>Select Choose</option>
                         </select>
                     </div>
 
@@ -114,25 +112,48 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div id="tree-wrapper" class="col-12 col-md-6 mb-3">
+                    <div id="tree-wrapper" class="col-md-6 mb-3">
                         <div id="file_tree"></div>
                     </div>
-                    <div id="preview-wrapper" class="col-md-6 d-none">
+                   <div id="preview-wrapper" class="col-md-6 d-none">
                         <div class="card shadow-sm h-100">
+
+                            <!-- Header -->
                             <div class="card-header d-flex justify-content-between align-items-center py-2">
-                                <h6 class="mb-0">📄 Preview <strong id="confirm_preview_file"></strong></h6>
+                                <h6 class="mb-0">
-                                <button class="btn btn-sm btn-outline-danger" id="close-preview">✕</button>
+                                    📄 Preview <strong id="confirm_preview_file"></strong>
+                                </h6>
+                                <button class="btn btn-sm btn-outline-danger" id="close-preview" title="Tutup 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%;">
+                            <!-- Body -->
+                            <div class="card-body p-2" style="min-height:250px; max-height:70vh; overflow:auto;">
+                                <div class="d-flex justify-content-end align-items-center" style="position: sticky; top: 0; background: #ffffff; z-index: 10;">
+                                    <button type="button" class="btn btn-sm btn-outline-primary" id="download-file">⬇ Download</button>
+                                </div>
+                                <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>
+                            <!-- Footer -->
-                                 </div>
+                            <div class="card-footer p-2 ">
+                                <div class="text-black">Klasifikasi Dokumen <strong id="confirm-upload-klasifikasi"></strong></div>
+                                <div class="mt-2 text-muted fst-italic small text-black">
+                                    Ditambahkan oleh <strong id="confirm-upload-dokumen"></strong> pada <span id="confirm-time-dokumen"></span>
+                                </div>
+                                <div class="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>
 
 
@@ -145,6 +166,8 @@
     const klasifikasiDok = @json($klasifikasiDok);
     const katDok = @json($katDok);
     const allAkses = @json($allAkses);
+    const authUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]?->unitKerja);
+    const authSubUnitKerja = @json(auth()->user()->dataUser?->mappingUnitKerjaPegawai[0]);
 
     let currentFile = null;
     let idDirectory = null;
@@ -152,25 +175,37 @@
         if (e.target.matches('.file-link')) {
             e.preventDefault();
             let fileUrl = e.target.getAttribute('data-file');
+            let fileName = e.target.getAttribute('data-name_file');
+            let upload = e.target.getAttribute('data-upload');
+            let time = e.target.getAttribute('data-time');
+            let klasifikasiView = e.target.getAttribute('data-klasifikasi');
+            $("#confirm-upload-dokumen").html(upload)
+            $("#confirm-time-dokumen").html(time)
+            $("#confirm-upload-klasifikasi").html(klasifikasiView)
             currentFile = fileUrl
-              idDirectory = e.target.getAttribute('data-id');
+            idDirectory = e.target.getAttribute('data-id');
             let ext = fileUrl.split('.').pop().toLowerCase();
-            $("#confirm_preview_file").html(fileUrl)
+            $("#confirm_preview_file").html(fileName)
             // ubah layout
-            document.getElementById('tree-wrapper').classList.remove('col-12');
+            document.getElementById('tree-wrapper').classList.remove('col-md-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">`;
+                previewBox.innerHTML = `
+                <img src="/file/${fileUrl}" class="img-fluid rounded shadow-sm" width="100%" height="450px" alt="preview">
+                `;
             } else if (ext === 'pdf') {
-            previewBox.innerHTML = `<iframe src="/file/${fileUrl}" width="100%" height="600px" style="border:none;"></iframe>`;
+                previewBox.innerHTML = `
+                <iframe src="/file/${fileUrl}" width="100%" height="500px" style="border:none;"></iframe>
+
+                `;
             } else {
-            previewBox.innerHTML = `
+                previewBox.innerHTML = `
-                <p class="text-muted">Tidak bisa preview file ini. Silakan download:</p>
+                    <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>
+                    <a href="/file/${fileUrl}" target="_blank" class="btn btn-sm btn-primary">⬇️ Download</a>
-            `;
+                `;
             }
         }
 
@@ -243,12 +278,26 @@
             });
 
         }
+
+        $("#download-file").off('click').on('click', function(){
+            if(currentFile){
+                let link = document.createElement('a');
+                link.href = 'file/' + currentFile;                 // alamat file
+                link.download = currentFile.split('/').pop();      // nama file otomatis
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }else{
+                console.error('error');
+
+            }
+        })
     });
 
         // 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('tree-wrapper').classList.add('col-md-12');
         document.getElementById('preview-wrapper').classList.add('d-none');
     });
 

routes/web.php

@@ -23,7 +23,9 @@ Route::middleware(['auth'])->group(function(){
     Route::get('/select-unit-kerja-option', [AksesFileController::class, 'optionUnitKerja']);
 
     Route::get('/select-unit-kerja', [DashboardController::class, 'OptionUnitKerja']);
+    Route::get('/select-sub-unit-kerja/{id}', [DashboardController::class, 'optionSubUnitKerja']);
     Route::delete('/delete-file/{id}', [DashboardController::class, 'deleteFile']);
+    Route::get('/getFile/{id_unit_kerja}/{id_sub_unit_kerja}/{master_kategori_directory_id}', [DashboardController::class, 'getFile']);
 });
 
 Route::get('/login', [AuthController::class, 'index'])->name('login');