fix(surveyor/penilai) : perbaikan edit foto, tanda tangan dan report laporan di penilai

app/Http/Controllers/PenilaiController.php

@@ -255,7 +255,6 @@ class PenilaiController extends Controller
     }
 
 
-
     public function storePaparan(Request $request, $id)
     {
         try {
@@ -281,8 +280,8 @@ class PenilaiController extends Controller
                 $penilai = Penilai::updateOrCreate(
                     [
                         'permohonan_id' => $request->permohonan_id,
-                        'dokument_id' => $request->documentId,
+                        'dokument_id' => $request->dokument_id,
-                        'inspeksi_id' => $request->inspeksiId,
+                        'inspeksi_id' => $request->inspeksi_id,
                     ]
                 );
 

app/Http/Controllers/SurveyorController.php

@@ -3626,9 +3626,6 @@ class SurveyorController extends Controller
         // Generate PDF
         $pdf = PDF::loadView($templateView, compact('permohonan', 'basicData', 'forminspeksi', 'alamat'));
 
-        $pdf = view($templateView, compact('permohonan', 'basicData', 'forminspeksi', 'alamat'));
-        $pdf->setPaper('A4', 'portrait');
-
         // Tentukan nama file PDF
         $namaDebiture = $permohonan->debiture->name . '-' . $permohonan->nomor_registrasi;
         $fileName = 'inspeksi-' . $namaDebiture . '-data.pdf';

resources/views/component/signature-pad.blade.php

@@ -1,9 +1,34 @@
+<style>
+    .signature-pad-container canvas {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        overflow: hidden;
+    }
+
+    .signature-pad-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .signature-pad {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 2/1;
+        object-fit: contain;
+    }
+    </style>
+
 <div class="signature-pad-container mx-auto border p-4 max-w-md sm:max-w-lg lg:max-w-xl">
     <h3 class="signature-title text-lg sm:text-xl font-semibold mb-2">{{ ucfirst($type) }}</h3>
-    <canvas
+    <div class="w-full aspect-w-2 aspect-h-1">
-        id="signature-pad-{{ $type }}"
+        <canvas
-        class="signature-pad w-full h-48 sm:h-56 bg-white border rounded"
+            id="signature-pad-{{ $type }}"
-    ></canvas>
+            class="signature-pad w-full h-full bg-white border rounded"
+        ></canvas>
+    </div>
     <input
         type="text"
         class="input w-full border p-2 mt-2 rounded"

resources/views/penilai/edit.blade.php

@@ -12,13 +12,15 @@
                     Upload File Paparan
                 </div>
                 <div class="flex items-center gap-2">
-                    <a href="{{ route('pembayaran.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
+                    <a href="{{ route('penilai.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
                 </div>
             </div>
             <div class="card-body">
                 <form action="{{ route('penilai.storePaparan',['id'=> $permohonan->id]) }}" method="POST" class="grid gap-5" enctype="multipart/form-data">
                     @csrf
                     <input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
+                    <input type="hidden" name="dokument_id" value="{{ request('document_id') }}">
+                    <input type="hidden" name="inspeksi_id" value="{{ request('inspeksi_id') }}">
 
                     <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                         <label class="form-label max-w-56">

resources/views/penilai/show.blade.php

@@ -226,7 +226,7 @@
                                 Kertas Kerja
                             </a>
                         @endif
-                        <a class="btn btn-primary" onclick="paparan({{ $permohonan->id }})">
+                        <a class="btn btn-primary" onclick="paparan({{ $permohonan->id }}, {{ $dokumen->id }}, {{ $inspeksiId }}, {{ $dokumen->jenis_jaminan_id }})">
                             Paparan
                         </a>
 
@@ -595,7 +595,7 @@
     }
 
 
-    function paparan(permohonanId) {
+    function paparan(permohonanId, documentId, inspeksiId, jaminanId) {
         Swal.fire({
             title: 'Apakah Kamu yakin ingin melakukan paparan',
             icon: 'warning',
@@ -605,7 +605,7 @@
             confirmButtonText: 'Yes'
         }).then((result) => {
             if (result.isConfirmed) {
-                window.location.href = `/penilai/${permohonanId}/edit`;
+                window.location.href = `/penilai/${permohonanId}/edit?document_id=${documentId}&inspeksi_id=${inspeksiId}&jaminanId=${jaminanId}`;
             }
         });
     }

resources/views/surveyor/components/foto.blade.php

@@ -5,7 +5,7 @@
 @endsection
 
 @section('content')
-<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
+{{-- <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /> --}}
     <style>
         .dropzone {
             border: 2px dashed #3498db;
@@ -265,7 +265,7 @@
 @include('lpj::surveyor.js.fotojs')
 @include('lpj::surveyor.js.utils')
 @push('scripts')
-<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
+{{-- <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> --}}
     <script>
         let jsonDataContoh = @json($formFoto);
         Dropzone.autoDiscover = false;
@@ -871,5 +871,7 @@
                 }
             });
         }
+
+
     </script>
 @endpush

resources/views/surveyor/components/inspeksi.blade.php

@@ -80,12 +80,12 @@
         </form>
     </div>
     @php
-    use Modules\Usermanagement\Models\User;
+        use Modules\Usermanagement\Models\User;
-    $cabangUser = User::where('id', $permohonan->user->id)->first();
+        $cabangUser = User::where('id', $permohonan->user->id)->first();
 
-    // print_r($cabangUser->sign);
+        // print_r($cabangUser->sign);
 
-@endphp
+    @endphp
 @endsection
 
 @push('scripts')
@@ -95,42 +95,122 @@
         console.log(datas);
         document.addEventListener('DOMContentLoaded', function() {
             const signaturePads = {};
-            const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
+    const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
 
-            // Inisialisasi semua signature pad
+    // Initialize all signature pads
-            types.forEach(type => initSignaturePad(type));
+    types.forEach(type => initSignaturePad(type));
 
-            function initSignaturePad(type) {
+    function initSignaturePad(type) {
-                const canvas = document.getElementById(`signature-pad-${type}`);
+        const canvas = document.getElementById(`signature-pad-${type}`);
-                if (!canvas) return;
+        if (!canvas) return;
 
-                setCanvasSize(canvas);
+        // Improved canvas sizing with strict boundary control
+        function resizeCanvas() {
+            const container = canvas.closest('.signature-pad-container');
+            const containerWidth = container.clientWidth;
 
-                const signaturePad = new SignaturePad(canvas, {
+            // Set canvas style dimensions
-                    backgroundColor: 'rgba(255, 255, 255, 0)',
+            canvas.style.width = '100%';
-                    penColor: 'rgb(0, 0, 0)',
+            canvas.style.height = `${containerWidth * 0.5}px`; // 2:1 aspect ratio
-                    minWidth: 0.5,
-                    maxWidth: 2.5
-                });
-                signaturePads[type] = signaturePad;
 
-                // Load tanda tangan yang ada
+            // Set actual canvas dimensions with high DPI support
-                if (type === 'penilai' || type === 'cabang') {
+            const ratio = window.devicePixelRatio || 1;
-                    loadPenilaiAndCabangSignature(type, signaturePad);
+            canvas.width = containerWidth * ratio;
-                } else {
+            canvas.height = (containerWidth * 0.5) * ratio;
-                    loadSignature(type, signaturePad);
+
+            // Scale canvas context
+            const ctx = canvas.getContext('2d');
+            ctx.scale(ratio, ratio);
+
+            // Clear and redraw existing signature if any
+            if (signaturePads[type] && !signaturePads[type].isEmpty()) {
+                const signaturePad = signaturePads[type];
+                const imageData = signaturePad.toData();
+                signaturePad.clear();
+                signaturePad.fromData(imageData);
+            }
+        }
+
+        // Create signature pad with boundary and scaling control
+        const signaturePad = new SignaturePad(canvas, {
+            backgroundColor: 'rgba(255, 255, 255, 0)',
+            penColor: 'rgb(0, 0, 0)',
+            minWidth: 0.5,
+            maxWidth: 2.5,
+            throttle: 16,
+            dotSize: 2,
+
+            // Custom function to control signature drawing
+            onBegin: (event) => {
+                const ctx = canvas.getContext('2d');
+                const rect = canvas.getBoundingClientRect();
+                const scaleX = canvas.width / rect.width;
+                const scaleY = canvas.height / rect.height;
+
+                // Ensure drawing stays within canvas
+                if (
+                    event.clientX < rect.left ||
+                    event.clientX > rect.right ||
+                    event.clientY < rect.top ||
+                    event.clientY > rect.bottom
+                ) {
+                    return false;
                 }
-
-                // Event listeners
-                addEventListeners(type, signaturePad);
             }
+        });
+        signaturePads[type] = signaturePad;
 
-            function setCanvasSize(canvas) {
+        // Initial resize
-                const ratio = Math.max(window.devicePixelRatio || 1, 1);
+        resizeCanvas();
-                canvas.width = canvas.offsetWidth * ratio;
+
-                canvas.height = canvas.offsetHeight * ratio;
+        // Load existing signature
-                canvas.getContext('2d').scale(ratio, ratio);
+        if (type === 'penilai' || type === 'cabang') {
-            }
+            loadPenilaiAndCabangSignature(type, signaturePad);
+        } else {
+            loadSignature(type, signaturePad);
+        }
+
+        // Add event listeners
+        addEventListeners(type, signaturePad);
+
+        // Add resize listener
+        window.addEventListener('resize', () => {
+            resizeCanvas();
+        });
+    }
+
+    function drawSignature(signaturePad, imageUrl) {
+        const image = new Image();
+        image.crossOrigin = 'Anonymous';
+        image.onload = function() {
+            const ctx = signaturePad.canvas.getContext('2d');
+            const canvasWidth = signaturePad.canvas.width;
+            const canvasHeight = signaturePad.canvas.height;
+
+            // Clear previous content
+            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+            // Calculate scaling to fit within canvas while maintaining aspect ratio
+            const scale = Math.min(
+                canvasWidth / image.width,
+                canvasHeight / image.height
+            );
+
+            const scaledWidth = image.width * scale;
+            const scaledHeight = image.height * scale;
+
+            // Center the image
+            const x = (canvasWidth - scaledWidth) / 2;
+            const y = (canvasHeight - scaledHeight) / 2;
+
+            // Draw the scaled and centered image
+            ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
+        };
+        image.onerror = function() {
+            console.error('Error loading signature image');
+        };
+        image.src = imageUrl;
+    }
 
             function addEventListeners(type, signaturePad) {
                 document.getElementById(`save-${type}`)?.addEventListener('click', () => saveSignature(type,
@@ -141,6 +221,98 @@
                     signaturePad));
             }
 
+            function saveSignature(type, signaturePad) {
+                // Prevent saving empty signature for debitur and kjjp
+                if (signaturePad.isEmpty() && type !== 'penilai' && type !== 'cabang') {
+                    Swal.fire({
+                        icon: 'warning',
+                        title: 'Peringatan',
+                        text: 'Harap memberikan tanda tangan terlebih dahulu.'
+                    });
+                    return;
+                }
+
+                // Use high-quality PNG with appropriate scaling
+                const signatureDataUrl = signaturePad.isEmpty() ?
+                    (type === 'penilai' ?
+                        `{{ asset('storage/signatures/' . Auth::user()->id . '/' . Auth::user()->sign) }}` :
+                        (type === 'cabang' ?
+                            `{{ asset('storage/signatures/' . $cabangUser->id . '/' . $cabangUser->sign) }}` :
+                            '')) :
+                    signaturePad.toDataURL('image/png', 1.0); // Use full quality
+
+                const data = {
+                    signature: signatureDataUrl,
+                    type: type,
+                    name: document.getElementById(`name-${type}`)?.value,
+                    document_id: document.getElementById('dokument_id')?.value,
+                    permohonan_id: document.getElementById('permohonan_id')?.value
+                };
+
+                Swal.fire({
+                    title: 'Menyimpan...',
+                    allowOutsideClick: false,
+                    didOpen: () => Swal.showLoading()
+                });
+
+                fetch(`{{ url('/surveyor/signatures') }}`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                        },
+                        body: JSON.stringify(data)
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        Swal.close();
+                        if (data.success) {
+                            Swal.fire({
+                                icon: 'success',
+                                title: 'Berhasil',
+                                text: 'Tanda tangan berhasil disimpan!',
+                                timer: 1500
+                            });
+                        } else {
+                            throw new Error(data.message || 'Terjadi kesalahan');
+                        }
+                    })
+                    .catch(error => {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.message || 'Terjadi kesalahan saat menyimpan tanda tangan'
+                        });
+                    });
+            }
+
+            function drawSignature(signaturePad, imageUrl) {
+                const image = new Image();
+                image.crossOrigin = 'Anonymous'; // Handle cross-origin images
+                image.onload = function() {
+                    const ctx = signaturePad.canvas.getContext('2d');
+                    ctx.clearRect(0, 0, signaturePad.canvas.width, signaturePad.canvas.height);
+
+                    // Calculate scaling to fit within canvas while maintaining aspect ratio
+                    const scale = Math.min(
+                        signaturePad.canvas.width / image.width,
+                        signaturePad.canvas.height / image.height
+                    );
+
+                    const scaledWidth = image.width * scale;
+                    const scaledHeight = image.height * scale;
+
+                    const x = (signaturePad.canvas.width - scaledWidth) / 2;
+                    const y = (signaturePad.canvas.height - scaledHeight) / 2;
+
+                    ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
+                };
+                image.onerror = function() {
+                    console.error('Error loading signature image');
+                };
+                image.src = imageUrl;
+            }
+
             function loadPenilaiAndCabangSignature(type, signaturePad) {
                 const nameInputElement = document.getElementById(`name-${type}`);
 
@@ -186,13 +358,13 @@
                     return;
                 }
 
-                const signatureDataUrl = signaturePad.isEmpty()
+                const signatureDataUrl = signaturePad.isEmpty() ?
-        ? (type === 'penilai'
+                    (type === 'penilai' ?
-            ? `{{ asset('storage/signatures/' . Auth::user()->id . '/' . Auth::user()->sign) }}`
+                        `{{ asset('storage/signatures/' . Auth::user()->id . '/' . Auth::user()->sign) }}` :
-            : (type === 'cabang'
+                        (type === 'cabang' ?
-                ? `{{ asset('storage/signatures/' . $cabangUser->id . '/' . $cabangUser->sign) }}`
+                            `{{ asset('storage/signatures/' . $cabangUser->id . '/' . $cabangUser->sign) }}` :
-                : ''))
+                            '')) :
-        : signaturePad.toDataURL('image/png');
+                    signaturePad.toDataURL('image/png');
 
                 const data = {
                     signature: signatureDataUrl,
@@ -365,7 +537,7 @@
                         }).then((response) => {
                             if (response.isConfirmed) {
                                 // window.location.href =
-                                    // '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
+                                // '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
                             }
                         });
                     } else {