✨ feat(daftar-pustaka): implementasi fitur Daftar Pustaka dengan peningkatan UI/UX & breadcrumb navigation

## 📋 Ringkasan
Implementasi penuh fitur Daftar Pustaka dengan peningkatan UI/UX, dukungan gesture swipe di PDF viewer mobile, serta integrasi breadcrumb untuk navigasi yang lebih intuitif.

## 🔄 Perubahan Utama
- app/Services/DaftarPustakaService.php
  • Refactor method getDaftarPustaka(), hapus handleUpload_()
  • Optimasi filtering & perbaiki format kode

- resources/views/daftar-pustaka/create.blade.php
  • Aktifkan breadcrumb navigation dengan {{ Breadcrumbs::render() }}

- resources/views/daftar-pustaka/index.blade.php
  • Konsolidasi class CSS, perbaikan flex & pagination styling

- resources/views/daftar-pustaka/show.blade.php
  • Tambah gesture swipe (touchstart, touchend) untuk PDF viewer
  • Implementasi handleSwipe() & threshold swipe 50px

- routes/breadcrumbs.php
  • Tambah route breadcrumbs daftar-pustaka (index, show, create)

app/Services/DaftarPustakaService.php

@@ -50,29 +50,30 @@ class DaftarPustakaService
 
     // get all with pagination
     public function getAllDaftarPustaka($request)
-{
-    $query = DaftarPustaka::query();
+    {
+        $query = DaftarPustaka::query();
 
-    // Filter pencarian
-    if (!empty($request->get('search'))) {
-        $search = $request->get('search');
-        $query->where(function ($q) use ($search) {
-            $q->orWhere('judul', 'LIKE', "%$search%");
-        });
+        // Filter pencarian
+        if (!empty($request->get('search'))) {
+            $search = $request->get('search');
+            $query->where(function ($q) use ($search) {
+                $q->orWhere('judul', 'LIKE', "%$search%");
+            });
+        }
+
+        // Filter kategori
+        if (!empty($request->get('category'))) {
+            $category = explode(',', $request->input('category'));
+            $query->whereIn('category_id', $category);
+        }
+
+        // Default pagination
+        $page = (int) $request->get('page', 1);
+        $size = (int) $request->get('size', 10);
+
+        return $query->paginate($size, ['*'], 'page', $page);
     }
 
-    // Filter kategori
-    if (!empty($request->get('category'))) {
-        $category = explode(',', $request->input('category'));
-        $query->whereIn('category_id', $category);
-    }
-
-    // Default pagination
-    $page = (int) $request->get('page', 1);
-    $size = (int) $request->get('size', 10);
-
-    return $query->paginate($size, ['*'], 'page', $page);
-}
 
     private function handleUpload($file)
     {
@@ -85,20 +86,5 @@ class DaftarPustakaService
         return $filePath;
     }
 
-    private function handleUpload_($file)
-    {
-        $today = now();
-        $folderPath = 'daftar_pustaka/' . $today->format('Y/m/d');
-
-        if (!file_exists(public_path($folderPath))) {
-            mkdir(public_path($folderPath), 0755, true);
-        }
-
-        $fileName = $file->getClientOriginalName();
-        $file->move(public_path($folderPath), $fileName);
-
-        return $folderPath . '/' . $fileName;
-    }
-
 
 }

resources/views/daftar-pustaka/create.blade.php

@@ -1,7 +1,7 @@
 @extends('layouts.main')
 
 @section('breadcrumbs')
-    {{-- {{ Breadcrumbs::render(request()->route()->getName()) }} --}}
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
 @endsection
 
 @section('content')

resources/views/daftar-pustaka/index.blade.php

@@ -1,23 +1,23 @@
 @extends('layouts.main')
 
 @section('breadcrumbs')
-    {{-- {{ Breadcrumbs::render('basicdata.ijin_usaha') }} --}}
+    {{ Breadcrumbs::render(request()->route()->getName()) }}
 @endsection
 
 @section('content')
 <style>
     @media (max-width: 768px) {
-    #previewContent {
-        height: 400px;
-        overflow: auto;
+        #previewContent {
+            height: 400px;
+            overflow: auto;
+        }
     }
-}
 
 </style>
 
-    <div class="flex flex-col items-stretch gap-7">
-        <div class="flex items-center gap-3 w-full">
-            <div class="input w-full">
+    <div class="flex flex-col gap-7 items-stretch">
+        <div class="flex gap-3 items-center w-full">
+            <div class="w-full input">
                 <i class="ki-filled ki-magnifier">
                 </i>
                 <input id="search" placeholder="Search Daftar Pustaka, Judul" type="text">
@@ -37,8 +37,8 @@
             </a>
         </div>
 
-        <div class="flex flex-wrap items-center gap-5 justify-between mt-3">
-            <h3 class="text-sm text-mono font-medium">
+        <div class="flex flex-wrap gap-5 justify-between items-center mt-3">
+            <h3 class="text-sm font-medium text-mono">
                 page {{ $page }} of {{ $pageCount }} — {{ $limit }} items per page, total
                 {{ $total }} items.
             </h3>
@@ -71,15 +71,15 @@
 
 
 
-        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 " id="daftar_pustaka_grid">
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4" id="daftar_pustaka_grid">
             @if (isset($daftar_pustaka))
                 @foreach ($daftar_pustaka as $item)
-                    <div class="card border shadow-none ">
+                    <div class="border shadow-none card">
                         <a class="show-pustaka h-[300px] bg-gray-200 w-full block" href="{{ route('daftar-pustaka.show', $item->id) }}"
                             data-url="{{ $item->attachment }}">
-                            <div class="p-4 h-full w-full flex items-center justify-center overflow-hidden">
-                                <div class="  text-red-500 flex items-center justify-center rounded">
-                                <i class="ki-filled ki-document text-3xl"></i>
+                            <div class="flex overflow-hidden justify-center items-center p-4 w-full h-full">
+                                <div class="flex justify-center items-center text-red-500 rounded">
+                                <i class="text-3xl ki-filled ki-document"></i>
                             </div>
                             </div>
                         </a>
@@ -87,15 +87,15 @@
                         <div class="card-body">
                             <a href="{{ route('daftar-pustaka.show', $item->id) }}">
 
-                                <h3 class="text-md font-medium text-gray-900 hover:text-primary cursor-pointer">
+                                <h3 class="font-medium text-gray-900 cursor-pointer text-md hover:text-primary">
                                     {{ $item->judul }}</h3>
-                                <p class="text-2sm text-gray-700">
+                                <p class="text-gray-700 text-2sm">
                                     {{-- batasi panjang deskripsi 50 --}}
                                     {{ substr($item->deskripsi, 0, 50) }}
                                 </p>
                             </a>
-                            <div class="flex justify-between items-center gap-2.5 mt-2">
-                                <p class="badge  rounded-full badge-xs badge-outline badge-success text-xs text-gray-700">
+                            <div class="flex gap-2.5 justify-between items-center mt-2">
+                                <p class="text-xs text-gray-700 rounded-full badge badge-xs badge-outline badge-success">
                                     # {{ $item->category->name }}</p>
 
                                 @auth
@@ -124,20 +124,20 @@
         </div>
 
 
-        <div class="grid grid-cols-1 gap-4  hidden" id="daftar_pustaka_list">
+        <div class="grid hidden grid-cols-1 gap-4" id="daftar_pustaka_list">
             @if (isset($daftar_pustaka))
                 @foreach ($daftar_pustaka as $item)
                     <div class="card">
-                        <div class="card-body flex items-center flex-wrap justify-between p-2 pe-5 gap-4.5">
-                            <div class="flex items-center gap-3.5">
+                        <div class="flex flex-wrap justify-between items-center p-2 card-body pe-5 gap-4.5">
+                            <div class="flex gap-3.5 items-center">
                                 <div
                                     class="card bg-gray-200 flex items-center justify-center bg-accent/50 h-[70px] w-[90px] shadow-none">
                                     <a class="show-pustaka h-[90px] w-full block"
                                         href="{{ route('daftar-pustaka.show', $item->id) }}"
                                         data-url="{{ $item->attachment }}">
-                                        <div class="p-4 h-full w-full flex items-center justify-center overflow-hidden">
-                                            <div class="  text-red-500 flex items-center justify-center rounded">
-                                <i class="ki-filled ki-document text-3xl"></i>
+                                        <div class="flex overflow-hidden justify-center items-center p-4 w-full h-full">
+                                            <div class="flex justify-center items-center text-red-500 rounded">
+                                <i class="text-3xl ki-filled ki-document"></i>
                             </div>
                                         </div>
                                     </a>
@@ -145,12 +145,12 @@
                                 <a href="{{ route('daftar-pustaka.show', $item->id) }}">
                                 <div class="flex flex-col gap-2 cursor-pointer">
                                         <div class="flex items-center mt-1">
-                                            <a class="hover:text-primary text-sm font-medium text-mono leading-5.5">
+                                            <a class="text-sm font-medium hover:text-primary text-mono leading-5.5">
                                                 {{ $item->judul }}
                                             </div>
                                         </a>
-                                        <div class="flex items-center flex-wrap gap-3">
-                                            <span class="kt-badge kt-badge-warning kt-badge-sm rounded-full gap-1">
+                                        <div class="flex flex-wrap gap-3 items-center">
+                                            <span class="gap-1 rounded-full kt-badge kt-badge-warning kt-badge-sm">
                                                 <span class="text-xs font-medium text-foreground">
                                                     {{ substr($item->deskripsi, 0, 50) }}
                                                 </span>
@@ -160,8 +160,8 @@
                                     </div>
                                 </a>
                             </div>
-                            <div class="flex items-center gap-1.5">
-                                <p class="badge  rounded-full badge-sm badge-outline badge-success text-xs text-gray-700">
+                            <div class="flex gap-1.5 items-center">
+                                <p class="text-xs text-gray-700 rounded-full badge badge-sm badge-outline badge-success">
                                     # {{ $item->category->name }}</p>
                                 @auth
                                     @if (auth()->user()->hasRole(['administrator', 'admin']))
@@ -188,7 +188,7 @@
         </div>
 
 
-        <div class="pagination flex gap-2 justify-center mt-5">
+        <div class="flex gap-2 justify-center mt-5 pagination">
             @if ($daftar_pustaka->onFirstPage())
                 <span class="btn disabled"><i class="ki-filled ki-black-left"></i></span>
             @else

resources/views/daftar-pustaka/show.blade.php

@@ -1,96 +1,166 @@
 @extends('layouts.main')
 
 @section('breadcrumbs')
-    {{-- {{ Breadcrumbs::render(request()->route()->getName()) }} --}}
+    {{ Breadcrumbs::render(request()->route()->getName(), $daftarPustaka) }}
 @endsection
 
-
 @section('content')
-    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
-
-        <form
-            action="{{ isset($daftarPustaka->id) ? route('daftar-pustaka.update', $daftarPustaka->id) : route('daftar-pustaka.store') }}"
-            method="POST">
-            @csrf
-            <div class="card border border-agi-100 pb-2.5">
-                <div class="card-header bg-agi-50" id="basic_settings">
-                    <h3 class="card-title">
-                        {{ $daftarPustaka->judul ?? '' }}
-                    </h3>
-                    <div class="flex items-center gap-2">
-                        <a href="{{ route('daftar-pustaka.index') }}" class="btn btn-xs btn-info"><i
-                                class="ki-filled ki-exit-left"></i> Back</a>
-                    </div>
-                </div>
-                <div class="card-body grid gap-5">
-                    <div class=" min-w-3xl">
-                        <div class="p-4 h-full flex flex-col">
-                            <div class="flex justify-between items-center mb-4">
-                                <a href="{{ asset('storage/' . $daftarPustaka->attachment)}}" class="btn btn-primary btn-sm">
-                                    <i class="ki-duotone ki-cloud-download me-1"><span class="path1"></span><span
-                                            class="path2"></span></i>
-                                    Download File
-                                </a>
-                            </div>
-                            @php
-
-                                $fileExtension = pathinfo($daftarPustaka->attachment, PATHINFO_EXTENSION);
-                                // cek extension
-                                $isPdf = $fileExtension == 'pdf';
-                                $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
-                                $isImage = in_array(strtolower($fileExtension), $imageExtensions);
-                                $fileUrl = asset('storage/' . $daftarPustaka->attachment);
-                            @endphp
-
-                            @if ($isPdf)
-                                <iframe src="{{$fileUrl}}"
-                                    width="100%" height="600px" frameborder="0"></iframe>
-                            @elseif ($isImage)
-                                <img src="{{ $fileUrl }}" class="w-full  object-contain rounded" />
-                            @else
-                                <p class="text-red-500">File tidak bisa ditampilkan, silakan <a href="{{ $fileUrl }}"
-                                        class="text-blue-500 underline" download>unduh di sini</a>.</p>
-                            @endif
-
-
-                        </div>
-                    </div>
-
-                    <div class="border border-t">
-                    </div>
-                    <div>
-                        {{ $daftarPustaka->deskripsi ?? '' }}
-                    </div>
+<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
+    <form
+        action="{{ isset($daftarPustaka->id) ? route('daftar-pustaka.update', $daftarPustaka->id) : route('daftar-pustaka.store') }}"
+        method="POST">
+        @csrf
+        <div class="pb-2.5 border card border-agi-100">
+            <div class="card-header bg-agi-50" id="basic_settings">
+                <h3 class="card-title">
+                    {{ $daftarPustaka->judul ?? '' }}
+                </h3>
+                <div class="flex gap-2 items-center">
+                    <a href="{{ route('daftar-pustaka.index') }}" class="btn btn-xs btn-info">
+                        <i class="ki-filled ki-exit-left"></i> Back
+                    </a>
                 </div>
             </div>
-        </form>
-    </div>
+            <div class="grid gap-5 card-body">
+                <div class="min-w-3xl">
+                    <div class="flex flex-col p-4 h-full">
+                        <div class="flex justify-between items-center mb-4">
+                            <a href="{{ asset('storage/' . $daftarPustaka->attachment) }}" class="btn btn-primary btn-sm">
+                                <i class="ki-duotone ki-cloud-download me-1"></i>
+                                Download File
+                            </a>
+                        </div>
+
+                        @php
+                            $fileExtension = pathinfo($daftarPustaka->attachment, PATHINFO_EXTENSION);
+                            $isPdf = strtolower($fileExtension) == 'pdf';
+                            $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+                            $isImage = in_array(strtolower($fileExtension), $imageExtensions);
+                            $fileUrl = asset('storage/' . $daftarPustaka->attachment);
+                        @endphp
+
+                        @if ($isPdf)
+                            <canvas id="pdfViewer" class="w-full rounded border touch-pan-y"></canvas>
+                            <div class="flex gap-3 justify-center mt-3">
+                                <button type="button" id="prevPage" class="btn btn-primary btn-sm">Previous</button>
+                                <span>Page: <span id="pageNum">1</span> / <span id="pageCount">0</span></span>
+                                <button type="button" id="nextPage" class="btn btn-primary btn-sm">Next</button>
+                            </div>
+                        @elseif ($isImage)
+                            <img src="{{ $fileUrl }}" class="object-contain w-full rounded" />
+                        @else
+                            <p class="text-red-500">File tidak bisa ditampilkan, silakan
+                                <a href="{{ $fileUrl }}" class="text-blue-500 underline" download>unduh di sini</a>.
+                            </p>
+                        @endif
+                    </div>
+                </div>
+
+                <div class="border border-t"></div>
+                <div>
+                    {{ $daftarPustaka->deskripsi ?? '' }}
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
 @endsection
 
-{{-- @push('scripts')
-    <script src="{{ asset('vendor/pdfobject.min.js') }}"></script>
+@push('scripts')
+<!-- PDF.js CDN -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const url = @json($fileUrl);
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            let url = @json($daftarPustaka->attachment);
-            console.log(url);
+    if (url.endsWith('.pdf')) {
+        const pdfjsLib = window['pdfjs-dist/build/pdf'];
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
 
-            const fileExtension = url.split('.').pop().toLowerCase();
-            const previewContent = document.getElementById('previewContent');
+        let pdfDoc = null;
+        let pageNum = 1;
+        let pageRendering = false;
+        let pageNumPending = null;
+        const scale = 1.3;
+        const canvas = document.getElementById('pdfViewer');
+        const ctx = canvas.getContext('2d');
 
-            if (['pdf'].includes(fileExtension)) {
-                if (window.innerWidth < 768) {
-                    document.getElementById('pdfFrame').style.display = 'block';
-                    document.getElementById('pdfFrame').src = urlStorage;
-                } else {
-                    PDFObject.embed(urlStorage, "#previewContent");
-                }
-            } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
-                previewContent.innerHTML =
-                    `<img src="${url}" alt="Preview" class="max-w-full max-h-full object-contain">`;
+        function renderPage(num) {
+            pageRendering = true;
+            pdfDoc.getPage(num).then(function (page) {
+                const viewport = page.getViewport({ scale: scale });
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                const renderContext = {
+                    canvasContext: ctx,
+                    viewport: viewport
+                };
+                const renderTask = page.render(renderContext);
+
+                renderTask.promise.then(function () {
+                    pageRendering = false;
+                    document.getElementById('pageNum').textContent = num;
+
+                    if (pageNumPending !== null) {
+                        renderPage(pageNumPending);
+                        pageNumPending = null;
+                    }
+                });
+            });
+        }
+
+        function queueRenderPage(num) {
+            if (pageRendering) {
+                pageNumPending = num;
             } else {
-                previewContent.innerHTML = '<p class="text-center">Unsupported file type</p>';
+                renderPage(num);
             }
+        }
+
+        function onPrevPage() {
+            if (pageNum <= 1) return;
+            pageNum--;
+            queueRenderPage(pageNum);
+        }
+
+        function onNextPage() {
+            if (pageNum >= pdfDoc.numPages) return;
+            pageNum++;
+            queueRenderPage(pageNum);
+        }
+
+        document.getElementById('prevPage').addEventListener('click', onPrevPage);
+        document.getElementById('nextPage').addEventListener('click', onNextPage);
+
+        // Swipe gesture
+        let touchStartX = 0;
+        let touchEndX = 0;
+
+        canvas.addEventListener('touchstart', function (e) {
+            touchStartX = e.changedTouches[0].screenX;
         });
-    </script>
-@endpush --}}
+
+        canvas.addEventListener('touchend', function (e) {
+            touchEndX = e.changedTouches[0].screenX;
+            handleSwipe();
+        });
+
+        function handleSwipe() {
+            const swipeThreshold = 50; // min distance for swipe
+            if (touchEndX < touchStartX - swipeThreshold) {
+                onNextPage();
+            } else if (touchEndX > touchStartX + swipeThreshold) {
+                onPrevPage();
+            }
+        }
+
+        pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
+            pdfDoc = pdfDoc_;
+            document.getElementById('pageCount').textContent = pdfDoc.numPages;
+            renderPage(pageNum);
+        });
+    }
+});
+</script>
+@endpush

routes/breadcrumbs.php

@@ -847,5 +847,20 @@ Breadcrumbs::for('admin-kredit.laporan-slik.show', function (BreadcrumbTrail $tr
     $trail->push('Detail SLIK #' . $slik->id, route('admin-kredit.laporan-slik.show', $slik));
 });
 
+// Breadcrumb untuk Daftar Pustaka
+Breadcrumbs::for('daftar-pustaka.index', function (BreadcrumbTrail $trail) {
+    $trail->push('Daftar Pustaka', route('daftar-pustaka.index'));
+});
+
+Breadcrumbs::for('daftar-pustaka.show', function (BreadcrumbTrail $trail, $daftarPustaka) {
+    $trail->parent('daftar-pustaka.index');
+    $trail->push('Detail Daftar Pustaka', route('daftar-pustaka.show', $daftarPustaka));
+});
+
+Breadcrumbs::for('daftar-pustaka.create', function (BreadcrumbTrail $trail) {
+    $trail->parent('daftar-pustaka.index');
+    $trail->push('Tambah Daftar Pustaka', route('daftar-pustaka.create'));
+});
+
 // add andy
 require __DIR__ . '/breadcrumbs_registrasi.php';