From 006dd44c64e13564e65f8f4f987638e27ece95ce Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Fri, 19 Sep 2025 10:18:30 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor(form-penilai):=20rapika?=
 =?UTF-8?q?n=20struktur=20CSS=20dan=20formatting=20kode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reorder CSS class sesuai standar Tailwind (layout → sizing → styling)
- Perbaiki indentasi, spacing, dan line breaks untuk readability
- Ganti `else if` menjadi `elseif` pada PHP conditional
- Rapikan multi-line assignment pada nilai luas apartemen-kantor
- Update contoh class: `input w-full` → `w-full input`, `card-title uppercase` → `uppercase card-title`
- Rapikan class ordering pada container flex & grid
- Perbaiki class di button: `btn btn-primary btn-sm mt-5` → `mt-5 btn btn-primary btn-sm`
- Konsistensi class ordering di dynamic HTML generation (JavaScript)
- Fokus pada konsistensi visual tanpa mengubah tampilan UI
---
 .../views/component/form-penilai.blade.php    | 175 ++++++++++--------
 resources/views/penilai/index.blade.php       |  20 ++
 resources/views/surveyor/js/utils.blade.php   |  54 ++++--
 3 files changed, 155 insertions(+), 94 deletions(-)

diff --git a/resources/views/component/form-penilai.blade.php b/resources/views/component/form-penilai.blade.php
index a606f6f..f0f7029 100644
--- a/resources/views/component/form-penilai.blade.php
+++ b/resources/views/component/form-penilai.blade.php
@@ -1,4 +1,4 @@
-<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
+<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
 
     @foreach ($permohonan->documents as $dokumen)
         @if ($dokumen->jenisJaminan)
@@ -32,7 +32,7 @@
 
     <div class="card">
         <div class="card-header bg-agi-50">
-            <h3 class="card-title uppercase">
+            <h3 class="uppercase card-title">
                 Informasi dan pembanding
             </h3>
             <div class="card-tools">
@@ -47,14 +47,14 @@
 
     <div class="card">
         <div class="card-header bg-agi-50">
-            <h3 class="card-title uppercase">
+            <h3 class="uppercase card-title">
                 total nilai pasar wajar
             </h3>
         </div>
-        <div class="card-body gap-5">
+        <div class="gap-5 card-body">
             <div>
                 <label for="total_nilai_pasar_wajar" class="form-label">Total Nilai Pasar Wajar</label>
-                <div class="card-body grid gap-2.5 ">
+                <div class="grid gap-2.5 card-body">
 
                     @php
                         $labelNilai = [
@@ -85,8 +85,10 @@
                                 $luas =
                                     $forminspeksi['tanah']['luas_tanah']['tidak sesuai'] ??
                                     ($forminspeksi['tanah']['luas_tanah']['sesuai'] ?? null);
-                            } else if ($item === 'apartemen-kantor') {
-                                $luas = $forminspeksi['luas_unit']['sesuai'] ?? ($forminspeksi['luas_unit']['tidak sesuai'] ?? null);
+                            } elseif ($item === 'apartemen-kantor') {
+                                $luas =
+                                    $forminspeksi['luas_unit']['sesuai'] ??
+                                    ($forminspeksi['luas_unit']['tidak sesuai'] ?? null);
                             } else {
                                 $luas = null;
                             }
@@ -96,52 +98,51 @@
                             $nilaiKey1 = 'nilai_' . $item . '_1';
                             $nilaiKey2 = 'nilai_' . $item . '_2';
                         @endphp
-                         @if (isset($labelNilai[$item]))
-                         <div class="flex grid-col-3 gap-2.5 w-full">
-                             <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
-                                 <label for="province" class="form-label max-w-56">
-                                     {{ $labelNilai[$item] }}
-                                 </label>
-                                 <input type="text" id="{{ $luasKey }}" class="input w-full"
-                                     name="{{ $luasKey }}"
-                                     value="{{ old($luasKey, $lpjData[$luasKey] ?? null) }}"
-                                     oninput="calculateTotal()">
-                             </div>
-                             <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
-                                 <label for="province" class="">X</label>
-                                 <label class="input">
-                                     <i class="">Rp</i>
-                                     <input type="text" id="{{ $nilaiKey1 }}" class="w-full currency"
-                                         name="{{ $nilaiKey1 }}"
-                                         value="{{ old($nilaiKey1, $lpjData[$nilaiKey1] ?? null) }}"
-                                         oninput="calculateTotal()">
-                                 </label>
-                             </div>
-                             <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
-                                 <label class="input">
-                                     <i class="">Rp</i>
-                                     <input id="{{ $nilaiKey2 }}" type="text"
-                                         class="w-full currency-format"
-                                         name="{{ $nilaiKey2 }}"
-                                         value="{{ old($nilaiKey2, $lpjData[$nilaiKey2] ?? null) }}">
-                                 </label>
-                             </div>
-                         </div>
-                     @endif
+                        @if (isset($labelNilai[$item]))
+                            <div class="flex gap-2.5 w-full grid-col-3">
+                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
+                                    <label for="province" class="form-label max-w-56">
+                                        {{ $labelNilai[$item] }}
+                                    </label>
+                                    <input type="text" id="{{ $luasKey }}" class="w-full input"
+                                        name="{{ $luasKey }}"
+                                        value="{{ old($luasKey, $lpjData[$luasKey] ?? null) }}"
+                                        oninput="calculateTotal()">
+                                </div>
+                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
+                                    <label for="province" class="">X</label>
+                                    <label class="input">
+                                        <i class="">Rp</i>
+                                        <input type="text" id="{{ $nilaiKey1 }}" class="w-full currency"
+                                            name="{{ $nilaiKey1 }}"
+                                            value="{{ old($nilaiKey1, $lpjData[$nilaiKey1] ?? null) }}"
+                                            oninput="calculateTotal()">
+                                    </label>
+                                </div>
+                                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
+                                    <label class="input">
+                                        <i class="">Rp</i>
+                                        <input id="{{ $nilaiKey2 }}" type="text" class="w-full currency-format"
+                                            name="{{ $nilaiKey2 }}"
+                                            value="{{ old($nilaiKey2, $lpjData[$nilaiKey2] ?? null) }}">
+                                    </label>
+                                </div>
+                            </div>
+                        @endif
                     @endforeach
 
                     <div>
-                        <div id="add_pasar_wajar" class="flex flex-wrap  gap-2.5 w-full">
+                        <div id="add_pasar_wajar" class="flex flex-wrap gap-2.5 w-full">
                         </div>
                     </div>
 
-                    <div class="flex justify-end gap-2 ">
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full  grid-col-2">
+                    <div class="flex gap-2 justify-end">
+                        <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap grid-col-2">
                             <label class="form-label max-w-56" for="">Total Nilai</label>
                             <label for="province" class="input">
                                 <i class="">Rp
                                 </i>
-                                <input type="text" class=" w-full currency-format" id="total_nilai_pasar_wajar"
+                                <input type="text" class="w-full  currency-format" id="total_nilai_pasar_wajar"
                                     name="total_nilai_pasar_wajar"
                                     value="{{ old('total_nilai_pasar_wajar', $lpjData['total_nilai_pasar_wajar'] ?? null) }}">
                             </label>
@@ -151,22 +152,22 @@
 
             </div>
 
-            <div class="tambah mb-10" style="margin-bottom: 20px;">
+            <div class="mb-10 tambah" style="margin-bottom: 20px;">
                 <button type="button" id="tambah-npw" class="btn btn-primary">
                     <i class="ki-filled ki-plus"></i>
                     Tambah NPW </button>
             </div>
 
             <div>
-                <label for="total_nilai_pasar_wajar" class="form-label uppercase">TOTAL NILAI
+                <label for="total_nilai_pasar_wajar" class="uppercase form-label">TOTAL NILAI
                     LIKUIDASI</label>
-                <div class="card-body grid gap-2.5 w-full">
-                    <div class="flex grid-col-3 gap-2.5 w-full">
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                <div class="grid gap-2.5 w-full card-body">
+                    <div class="flex gap-2.5 w-full grid-col-3">
+                        <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                             <div class="w-full">
                                 <label class="input">
 
-                                    <input type="text" id="likuidasi" name="likuidasi" class=" w-full currency"
+                                    <input type="text" id="likuidasi" name="likuidasi" class="w-full  currency"
                                         value="{{ old('likuidasi', $lpjData['likuidasi'] ?? null) }}"
                                         oninput="calculateTotal()">
                                     <i class="">%
@@ -176,24 +177,24 @@
                                 </span>
                             </div>
                         </div>
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                        <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                             <label for="province" class="">X</label>
                             <label class="input">
                                 <i class="">Rp
                                 </i>
-                                <input type="text" class=" w-full currency-format" id="likuidasi_nilai_1"
+                                <input type="text" class="w-full  currency-format" id="likuidasi_nilai_1"
                                     name="likuidasi_nilai_1"
                                     value="{{ old('likuidasi_nilai_1', $lpjData['likuidasi_nilai_1'] ?? null) }}"
                                     oninput="calculateTotal()">
                             </label>
                         </div>
                         <div class="grid gap-2.5 w-full">
-                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                            <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
 
                                 <label class="input">
                                     <i class="">Rp
                                     </i>
-                                    <input type="text" class=" w-full currency-format" name="likuidasi_nilai_2"
+                                    <input type="text" class="w-full  currency-format" name="likuidasi_nilai_2"
                                         value="{{ old('likuidasi_nilai_2', $lpjData['likuidasi_nilai_2'] ?? null) }}">
                             </div>
 
@@ -203,16 +204,16 @@
                 </div>
             </div>
 
-            <div class="flex items-baseline flex-wrap lg:flex-nowrap  gap-2.5" style="margin-top: 20px">
+            <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" style="margin-top: 20px">
 
-                <label class="form-label lg:form-label max-w-56 ">Catatan yang Perlu Diperhatikan
+                <label class="form-label lg:form-label max-w-56">Catatan yang Perlu Diperhatikan
                 </label>
                 <div class="w-full">
-                    <div id="keterangan_penilai-container" class="flex items-baseline flex-wrap  gap-2.5 w-full">
+                    <div id="keterangan_penilai-container" class="flex flex-wrap gap-2.5 items-baseline w-full">
                         @if (!empty($lpjData['keterangan_penilai']) && is_array($lpjData['keterangan_penilai']))
                             @foreach ($lpjData['keterangan_penilai'] as $index => $item)
-                                <div class="keterangan_penilai flex items-center gap-2 mt-2 textarea-group w-full">
-                                    <textarea name="keterangan_penilai[]" class="textarea mt-2 " placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan_penilai.$index", $item) }}</textarea>
+                                <div class="flex gap-2 items-center mt-2 w-full keterangan_penilai textarea-group">
+                                    <textarea name="keterangan_penilai[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan_penilai.$index", $item) }}</textarea>
                                     <button class="btn btn-danger btn-sm remove-btn" type="button"
                                         style="display: none;">
                                         <i class="ki-outline ki-trash"></i>
@@ -220,19 +221,19 @@
                                 </div>
                             @endforeach
                         @else
-                            <div class="keterangan_penilai flex items-center gap-2 mt-2 textarea-group w-full">
-                                <textarea name="keterangan_penilai[]" class="textarea mt-2 " placeholder="Masukkan catatan penting" rows="10"></textarea>
+                            <div class="flex gap-2 items-center mt-2 w-full keterangan_penilai textarea-group">
+                                <textarea name="keterangan_penilai[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10"></textarea>
                                 <button class="btn btn-danger btn-sm remove-btn" type="button"
                                     style="display: none;">
                                     <i class="ki-outline ki-trash"></i>
                                 </button>
-                                <em id="error-keterangan_penilai" class="alert text-danger text-sm"></em>
+                                <em id="error-keterangan_penilai" class="text-sm alert text-danger"></em>
                             </div>
                         @endif
                     </div>
                     <button type="button"
                         onclick="addClonableItem('keterangan_penilai-container', 'keterangan_penilai')"
-                        class="btn btn-primary btn-sm mt-5 ">
+                        class="mt-5 btn btn-primary btn-sm">
                         <i class="ki-outline ki-plus"></i>
                     </button>
                 </div>
@@ -256,40 +257,40 @@
             const newNPWRow = document.createElement('div');
             newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row';
             newNPWRow.innerHTML = `
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                     <input type="text"
                         id="name_npw_${npwCounter}"
-                        class="input w-full"
+                        class="w-full input"
                         name="name_npw_${npwCounter}"
                         placeholder="Nama NPW">
 
                     <input type="text"
                         id="ls_npw_${npwCounter}"
-                        class="input w-full "
+                        class="w-full input"
                         name="luas_npw_${npwCounter}"
                         placeholder="Luas NPW"
                         oninput="calculateTotal()">
                 </div>
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                     <label for="province" class="">X</label>
                      <label class="input">
                                 <i class="">Rp
                                 </i>
                     <input type="text"
                         id="nilai_npw_${npwCounter}_1"
-                        class=" w-full currency"
+                        class="w-full  currency"
                         name="nilai_npw_${npwCounter}_1"
                         placeholder="Harga per meter"
                         oninput="calculateTotal()">
                         </label>
                 </div>
-                <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                      <label class="input">
                                 <i class="">Rp
                                 </i>
                     <input type="text"
                         id="nilai_npw_${npwCounter}_2"
-                        class="input w-full currency-format"
+                        class="w-full input currency-format"
                         name="nilai_npw_${npwCounter}_2"
                         placeholder="Total Nilai"
                         readonly>
@@ -333,16 +334,16 @@
                         newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row mb-3';
                         newNPWRow.innerHTML = `
 
-                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                            <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                 <input type="text"
                                     id="name_npw_${npwCounter}"
-                                    class="input w-full"
+                                    class="w-full input"
                                     name="name_npw_${npwCounter}"
                                     placeholder="Nama NPW"
                                     value="${npw.name || ''}">
                                 <input type="text"
                                     id="ls_npw_${npwCounter}"
-                                    class="input w-full currency-format"
+                                    class="w-full input currency-format"
                                     name="luas_npw_${npwCounter}"
                                     placeholder="Luas NPW"
                                     value="${npw.luas || ''}"
@@ -350,34 +351,34 @@
                             </div>
 
 
-                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                            <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                 <label for="province" class="">X</label>
                                  <label class="input">
                                 <i class="">Rp
                                 </i>
                                 <input type="text"
                                     id="nilai_npw_${npwCounter}_1"
-                                    class=" w-full currency"
+                                    class="w-full  currency"
                                     name="nilai_npw_${npwCounter}_1"
                                     placeholder="Harga per meter"
                                     value="${npw.nilai_1 || ''}"
                                     oninput="calculateTotal()">
                                     </label>
                             </div>
-                            <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
+                            <div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
                                  <label class="input">
                                 <i class="">Rp
                                 </i>
                                 <input type="text"
                                     id="nilai_npw_${npwCounter}_2"
-                                    class=" w-full currency-format"
+                                    class="w-full  currency-format"
                                     name="nilai_npw_${npwCounter}_2"
                                     placeholder="Total Nilai"
                                     value="${npw.nilai_2 || ''}"
                                     readonly>
                                     </label>
                                     <div>
-                                <button type="button" class="btn btn-danger remove-npw h-full">
+                                <button type="button" class="h-full btn btn-danger remove-npw">
                                     <i class="ki-filled ki-minus"></i>
                                 </button>
                             </div>
@@ -620,4 +621,24 @@
 
         input.value = formattedValue;
     }
+
+    function showLoadingSwal(message, duration = 5000) {
+        Swal.fire({
+            title: message,
+            allowOutsideClick: false,
+            didOpen: () => {
+                Swal.showLoading();
+            },
+            timer: duration, // Durasi dalam milidetik
+            timerProgressBar: true, // Menampilkan progres bar timer
+        }).then((result) => {
+            if (result.dismiss === Swal.DismissReason.timer) {
+                console.log("Dialog loading otomatis ditutup.");
+            }
+        });
+    }
+
+    function hideLoadingSwal() {
+        Swal.close();
+    }
 </script>
diff --git a/resources/views/penilai/index.blade.php b/resources/views/penilai/index.blade.php
index 148b311..4c90b18 100644
--- a/resources/views/penilai/index.blade.php
+++ b/resources/views/penilai/index.blade.php
@@ -337,5 +337,25 @@
             });
 
         }
+
+        function showLoadingSwal(message, duration = 5000) {
+            Swal.fire({
+                title: message,
+                allowOutsideClick: false,
+                didOpen: () => {
+                    Swal.showLoading();
+                },
+                timer: duration, // Durasi dalam milidetik
+                timerProgressBar: true, // Menampilkan progres bar timer
+            }).then((result) => {
+                if (result.dismiss === Swal.DismissReason.timer) {
+                    console.log("Dialog loading otomatis ditutup.");
+                }
+            });
+        }
+
+        function hideLoadingSwal() {
+            Swal.close();
+        }
     </script>
 @endpush
diff --git a/resources/views/surveyor/js/utils.blade.php b/resources/views/surveyor/js/utils.blade.php
index 89c77bb..43886aa 100644
--- a/resources/views/surveyor/js/utils.blade.php
+++ b/resources/views/surveyor/js/utils.blade.php
@@ -1,4 +1,24 @@
 <script>
+    function showLoadingSwal(message, duration = 5000) {
+        Swal.fire({
+            title: message,
+            allowOutsideClick: false,
+            didOpen: () => {
+                Swal.showLoading();
+            },
+            timer: duration, // Durasi dalam milidetik
+            timerProgressBar: true, // Menampilkan progres bar timer
+        }).then((result) => {
+            if (result.dismiss === Swal.DismissReason.timer) {
+                console.log("Dialog loading otomatis ditutup.");
+            }
+        });
+    }
+
+    function hideLoadingSwal() {
+        Swal.close();
+    }
+
     function previewImage(input, imageId) {
         const preview = document.getElementById(imageId);
         if (input.files && input.files[0]) {
@@ -13,25 +33,25 @@
 
 
     function formatNumber(input) {
-    const cursorPosition = input.selectionStart;
+        const cursorPosition = input.selectionStart;
 
-    let value = input.value.replace(/[^0-9,]/g, '');
+        let value = input.value.replace(/[^0-9,]/g, '');
 
-    if ((value.match(/,/g) || []).length > 1) {
-        value = value.replace(/,/g, (match, offset) => (offset === value.indexOf(',') ? ',' : ''));
+        if ((value.match(/,/g) || []).length > 1) {
+            value = value.replace(/,/g, (match, offset) => (offset === value.indexOf(',') ? ',' : ''));
+        }
+
+        if (value.includes(',')) {
+            const [beforeComma, afterComma] = value.split(',');
+            value = `${beforeComma},${afterComma.substring(0, 2)}`;
+        }
+
+        input.value = value ? value + ' m²' : 'm²';
+
+
+        input.setSelectionRange(cursorPosition, cursorPosition);
     }
 
-    if (value.includes(',')) {
-        const [beforeComma, afterComma] = value.split(',');
-        value = `${beforeComma},${afterComma.substring(0, 2)}`;
-    }
-
-    input.value = value ? value + ' m²' : 'm²';
-
-
-    input.setSelectionRange(cursorPosition, cursorPosition);
-}
-
 
 
 
@@ -399,9 +419,9 @@
         const addressInput = document.getElementById('address');
 
         if (status === 'sesuai') {
-	    addressInput.value = {!! json_encode($dokumen->address ?? '') !!};
+            addressInput.value = {!! json_encode($dokumen->address ?? '') !!};
 
-	    inputs.forEach(element => {
+            inputs.forEach(element => {
                 if (element.tagName === 'INPUT') {
                     element.setAttribute('readonly', true);
                 } else if (element.tagName === 'SELECT') {