From 28513100f4f38f0eb31d6ff215d867d4a7f63920 Mon Sep 17 00:00:00 2001
From: Daeng Deni Mardaeni <ddeni05@gmail.com>
Date: Thu, 3 Jul 2025 09:46:47 +0700
Subject: [PATCH] refactor(noc, views): optimalkan kode, perbaiki konsistensi
 format, dan refactor tampilan

- **Controller (NocController)**:
  - Perbaikan nama route pada **index()** dari `noc.pembayaran` menjadi `noc.pembayaran.index`.
  - Menghapus komentar kode tak terpakai pada logika update **status permohonan** di metode penyimpanan.

- **Blade Views**:
  - Perbaikan konsistensi atribut HTML dan struktur elemen di berbagai template: `index.blade.php`, `pembayaran.blade.php`, dan `form.blade.php`.
  - Penghapusan spasi yang tidak diperlukan dan optimasi indentasi pada atribut elemen seperti `class`, `data-*`, dan lainnya.
  - Perbaikan label input dan placeholder untuk keterbacaan dan kesesuaian desain.
  - Penyelarasan nama variabel dan logika validasi berdasarkan kondisi file dan data yang ada.

- **Form NOC**:
  - Penyesuaian form handling untuk berbagai atribut seperti `status_pembayar`, `nominal_bayar`, dan `bukti_ksl`.
  - Penyesuaian aksi form untuk **update** atau **store** tergantung kondisi form.

- **Datatables**:
  - Pengoptimalan tabel untuk hierarki atribut dan nilai default seperti pagination, sorting, atau data filtering.
---
 app/Http/Controllers/NocController.php   |  10 +-
 resources/views/laporan/index.blade.php  |  51 ++--
 resources/views/noc/form.blade.php       | 163 ++++++++-----
 resources/views/noc/pembayaran.blade.php | 284 ++++++++++++-----------
 routes/breadcrumbs.php                   |   4 +
 5 files changed, 278 insertions(+), 234 deletions(-)

diff --git a/app/Http/Controllers/NocController.php b/app/Http/Controllers/NocController.php
index 1f24819..8f8e4e0 100644
--- a/app/Http/Controllers/NocController.php
+++ b/app/Http/Controllers/NocController.php
@@ -20,7 +20,7 @@
          */
         public function index()
         {
-            return redirect()->route('noc.pembayaran');
+            return redirect()->route('noc.pembayaran.index');
         }
 
         public function pembayaran()
@@ -80,7 +80,7 @@
             }
             $noc->save();
 
-            // Update the status of the related permohonan to 'spk'
+            /* Update the status of the related permohonan to 'spk'
             $permohonan = Permohonan::find(request()->get('permohonan_id'));
             if ($permohonan) {
                 $permohonan->status_bayar = request()->get('status_pembayar');
@@ -99,7 +99,7 @@
                     ]);
                 }
                 // andy add, update status penawaran.status='spk'
-            }
+            }*/
 
             return redirect()
                 ->route('noc.index')->with('success', 'NOC berhasil disimpan.');
@@ -175,9 +175,7 @@
         /**
          * Display the specified resource.
          */
-        public function show(Request $request) {
-           $noc = Noc::find($request->get('id'));
-
+        public function show(Noc $noc) {
            return view('lpj::noc.memo', compact('noc'));
         }
 
diff --git a/resources/views/laporan/index.blade.php b/resources/views/laporan/index.blade.php
index 85193ec..aa581b3 100644
--- a/resources/views/laporan/index.blade.php
+++ b/resources/views/laporan/index.blade.php
@@ -6,10 +6,10 @@
 
 
 @section('content')
-    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
-        <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10"
+    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
+        <div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
             data-datatable-state-save="false" id="laporan-table" data-api-url="{{ route('laporan.datatables') }}">
-            <div class="card-header bg-agi-50 py-5 flex-wrap">
+            <div class="flex-wrap py-5 card-header bg-agi-50">
                 <h3 class="card-title">
                     Laporan
                 </h3>
@@ -28,7 +28,7 @@
 
             <div class="card-body">
                 <div class="scrollable-x-auto">
-                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm"
+                    <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
                         data-datatable-table="true">
                         <thead>
                             <tr>
@@ -74,13 +74,13 @@
                     </table>
                 </div>
                 <div
-                    class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                    <div class="flex items-center gap-2">
+                    class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
+                    <div class="flex gap-2 items-center">
                         Show
-                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per
+                        <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
                         page
                     </div>
-                    <div class="flex items-center gap-4">
+                    <div class="flex gap-4 items-center">
                         <span data-datatable-info="true"> </span>
                         <div class="pagination" data-datatable-pagination="true">
                         </div>
@@ -108,7 +108,7 @@
                 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
             ];
             return months[month -
-            1];
+                1];
         }
     </script>
     <script type="module">
@@ -186,7 +186,7 @@
                 tanggal_survei: {
                     title: 'Tanggal Survei',
                     render: (item, data) => {
-                        if(data.penilaian.waktu_penilaian){
+                        if (data.penilaian.waktu_penilaian) {
                             return `${formatDate(new Date(data.penilaian.waktu_penilaian))}`;
                         }
                         return `${formatDate(new Date(data.penilaian.created_at))}`;
@@ -199,19 +199,19 @@
                         const tipe_laporan = data.penilai?.type;
                         const nilai_plafond = data.penilaian.nilaiPlafond?.name;
                         let waktu_penilaian = new Date(data.penilaian.created_at);
-                        if(data.penilaian.waktu_penilaian){
+                        if (data.penilaian.waktu_penilaian) {
                             waktu_penilaian = new Date(data.penilaian.waktu_penilaian);
                         }
 
-                        if(tujuan_penilaian.name==="RAP"){
+                        if (tujuan_penilaian.name === "RAP") {
                             waktu_penilaian.setDate(waktu_penilaian.getDate() + 3);
                         } else {
-                            if(tipe_laporan==="sederhana"){
+                            if (tipe_laporan === "sederhana") {
                                 waktu_penilaian.setDate(waktu_penilaian.getDate() + 2);
-                            } else if(tipe_laporan==="standar"){
-                                if(nilai_plafond==="2 M - 5 M"){
+                            } else if (tipe_laporan === "standar") {
+                                if (nilai_plafond === "2 M - 5 M") {
                                     waktu_penilaian.setDate(waktu_penilaian.getDate() + 3);
-                                } else if(nilai_plafond==="< 2M"){
+                                } else if (nilai_plafond === "< 2M") {
                                     waktu_penilaian.setDate(waktu_penilaian.getDate() + 3);
                                 } else {
                                     waktu_penilaian.setDate(waktu_penilaian.getDate() + 5);
@@ -224,7 +224,7 @@
                 status: {
                     title: 'Status',
                     render: (item, data) => {
-                        return `<span class="badge badge-sm badge-default uppercase flex justify-center">${data.status}</span>`;
+                        return `<span class="flex justify-center uppercase badge badge-sm badge-default">${data.status}</span>`;
                     }
                 },
                 actions: {
@@ -240,31 +240,32 @@
                         let penyelesaian = '';
 
 
-                        if(data.noc) {
-                            if (!data.noc?.tanggal_penyelesaian && !data.noc?.memo_penyelesaian) {
+                        if (data.noc) {
+                            if (!data.noc?.memo_penyelesaian) {
                                 penyelesaian = `
-                        <a href="{{ route('noc.penyelesaian') }}?id=${data.noc.id}&permohonanId=${data.noc.permohonan_id}&persetujuanPenawaranId=${data.noc.persetujuan_penawaran_id}" class="btn btn-sm btn-warning">
+                        <a href="{{ route('noc.index') }}/${data.noc.id}" class="btn btn-sm btn-warning">
                             Penyelesaian
                         </a>`;
                             }
                         }
 
-                        if(data.penilai.resume) {
+                        if (data.penilai.resume) {
                             resumeButton = `
                         <a href="{{ route('penilai.print-out') }}?permohonanId=${data.id}&documentId=${dokumenID}&inspeksiId=${inspeksiId}&jaminanId=${jenisJaminanID}&statusLpj=0" class="btn btn-sm btn-success">
                             Resume
                         </a>`;
                         }
 
-                        if(data.nilai_liquidasi==null) {
+                        if (data.nilai_liquidasi == null) {
                             laporanButton = `
                             <a href="laporan/${data.id}" class="btn btn-sm btn-primary">
                                 Laporan
                             </a>`;
                         }
 
-                        if((data.status_bayar=="sudah_bayar" || data.status_bayar=="tidak_bayar") && data.nilai_liquidasi >0) {
-                            if(data.penilai.type_penilai=='resume' && !data.penilai.resume){
+                        if ((data.status_bayar == "sudah_bayar" || data.status_bayar == "tidak_bayar") && data
+                            .nilai_liquidasi > 0) {
+                            if (data.penilai.type_penilai == 'resume' && !data.penilai.resume) {
                                 laporanButton = `
                             <a href="{{ route('penilai.print-out') }}?permohonanId=${data.id}&documentId=${dokumenID}&inspeksiId=${inspeksiId}&jaminanId=${jenisJaminanID}&statusLpj=0&type=${type}" class="btn btn-sm btn-primary">
                                 Laporan
@@ -279,7 +280,7 @@
                         }
 
 
-                        return `<div class="flex flex-wrap justify-end gap-1.5"> ${penyelesaian}  ${resumeButton} ${laporanButton} </div>`;
+                        return `<div class="flex flex-wrap gap-1.5 justify-end"> ${penyelesaian}  ${resumeButton} ${laporanButton} </div>`;
                     },
                 }
             },
diff --git a/resources/views/noc/form.blade.php b/resources/views/noc/form.blade.php
index 34ac92a..9a7d28f 100644
--- a/resources/views/noc/form.blade.php
+++ b/resources/views/noc/form.blade.php
@@ -15,197 +15,236 @@
 @endphp
 
 @section('content')
-    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
-        <div class="card border border-agi-100 pb-2.5">
+    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
+        <div class="pb-2.5 border card border-agi-100">
             <div class="card-header bg-agi-50" id="basic_settings">
-                <div class="card-title flex flex-row gap-1.5">
+                <div class="flex flex-row gap-1.5 card-title">
                     {{ $hasMemo ? 'Proses Penyelesaian NOC' : 'NOC' }}
                 </div>
-                <div class="flex items-center gap-2">
-                    <a href="{{ route('noc.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
+                <div class="flex gap-2 items-center">
+                    <a href="{{ route('noc.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="{{ !$hasMemo ? route('noc.store') : route('noc.update',$persetujuanPenawaran) }}" method="POST" class="grid gap-5" enctype="multipart/form-data">
+                <form action="{{ !$hasMemo ? route('noc.store') : route('noc.update', $persetujuanPenawaran) }}"
+                    method="POST" class="grid gap-5" enctype="multipart/form-data">
                     @csrf
-                    @if($hasMemo)
+                    @if ($hasMemo)
                         @method('PUT')
                     @endif
-                    <input type="hidden" name="penawaran_id" value="{{ $persetujuanPenawaran->penawaran_id ?? old('penawaran_id') }}">
-                    <input type="hidden" name="persetujuan_penawaran_id" value="{{ $persetujuanPenawaran->id ?? old('persetujuan_penawaran_id') }}">
-                    <input type="hidden" name="permohonan_id" value="{{ $persetujuanPenawaran->penawaran->permohonan->id ?? $persetujuanPenawaran->permohonan->id }}">
+                    <input type="hidden" name="penawaran_id"
+                        value="{{ $persetujuanPenawaran->penawaran_id ?? old('penawaran_id') }}">
+                    <input type="hidden" name="persetujuan_penawaran_id"
+                        value="{{ $persetujuanPenawaran->id ?? old('persetujuan_penawaran_id') }}">
+                    <input type="hidden" name="permohonan_id"
+                        value="{{ $persetujuanPenawaran->penawaran->permohonan->id ?? $persetujuanPenawaran->permohonan->id }}">
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Status Bayar
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            <select class="input tomselect w-full @error('status_pembayar') border-danger bg-danger-light @enderror" name="status_pembayar" id="status_pembayar" {{ $hasMemo ? 'disabled' : '' }}>
+                            <select
+                                class="input tomselect w-full @error('status_pembayar') border-danger bg-danger-light @enderror"
+                                name="status_pembayar" id="status_pembayar" {{ $hasMemo ? 'disabled' : '' }}>
                                 <option value="">Pilih Status Bayar</option>
-                                <option value="sudah_bayar" {{ (old('status_pembayar') == 'sudah_bayar') || ($persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'sudah_bayar') ? 'selected' : '' }}>Sudah Bayar</option>
-                                <option value="belum_bayar" {{ (old('status_pembayar') == 'belum_bayar') || ($persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'belum_bayar') ? 'selected' : '' }}>Belum Bayar</option>
+                                <option value="sudah_bayar"
+                                    {{ old('status_pembayar') == 'sudah_bayar' || $persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'sudah_bayar' ? 'selected' : '' }}>
+                                    Sudah Bayar</option>
+                                <option value="belum_bayar"
+                                    {{ old('status_pembayar') == 'belum_bayar' || $persetujuanPenawaran?->penawaran?->permohonan?->status_bayar == 'belum_bayar' ? 'selected' : '' }}>
+                                    Belum Bayar</option>
                             </select>
                             @error('status_bayar')
-                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                <em class="text-sm alert text-danger">{{ $message }}</em>
                             @enderror
                         </div>
                     </div>
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Bukti Pembayaran
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            @if(!empty($persetujuanPenawaran->bukti_bayar))
-                                <div class="mt-2 flex items-center">
-                                    <a href="{{ Storage::url($persetujuanPenawaran->bukti_bayar) }}" target="_blank" class="badge badge-sm badge-outline badge-warning">
-                                        <i class="ki-filled ki-eye mr-2"></i> Lihat File
+                            @if (!empty($persetujuanPenawaran->bukti_bayar))
+                                <div class="flex items-center mt-2">
+                                    <a href="{{ Storage::url($persetujuanPenawaran->bukti_bayar) }}" target="_blank"
+                                        class="badge badge-sm badge-outline badge-warning">
+                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                     </a>
                                 </div>
                             @endif
                         </div>
                     </div>
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Nominal Bayar
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            <input type="number" name="total_harus_bayar" id="total_harus_bayar" class="input w-full @error('total_harus_bayar') border-danger bg-danger-light @enderror" value="{{ old('total_harus_bayar', $persetujuanPenawaran->nominal_bayar ?? '') }}" readonly>
+                            <input type="number" name="total_harus_bayar" id="total_harus_bayar"
+                                class="input w-full @error('total_harus_bayar') border-danger bg-danger-light @enderror"
+                                value="{{ old('total_harus_bayar', $persetujuanPenawaran->nominal_bayar ?? '') }}"
+                                readonly>
                             @error('total_harus_bayar')
-                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                <em class="text-sm alert text-danger">{{ $message }}</em>
                             @enderror
                         </div>
                     </div>
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Nominal Diterima
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            <input type="number" name="nominal_bayar" id="nominal_bayar" class="input w-full @error('nominal_bayar') border-danger bg-danger-light @enderror" value="{{ old('nominal_bayar', $persetujuanPenawaran->noc->nominal_bayar ?? '') }}" placeholder="Masukkan nominal bayar" {{ $hasMemo ? 'readonly' : '' }}>
+                            <input type="number" name="nominal_bayar" id="nominal_bayar"
+                                class="input w-full @error('nominal_bayar') border-danger bg-danger-light @enderror"
+                                value="{{ old('nominal_bayar', $persetujuanPenawaran->noc->nominal_bayar ?? '') }}"
+                                placeholder="Masukkan nominal bayar" {{ $hasMemo ? 'readonly' : '' }}>
                             @error('nominal_bayar')
-                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                <em class="text-sm alert text-danger">{{ $message }}</em>
                             @enderror
                         </div>
                     </div>
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Tanggal Pembayaran
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            <input type="date" name="tanggal_pembayaran" id="tanggal_pembayaran" class="input w-full @error('tanggal_pembayaran') border-danger bg-danger-light @enderror" value="{{ old('tanggal_pembayaran', isset($persetujuanPenawaran->noc->tanggal_pembayaran) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_pembayaran)) : '') }}" {{ $hasMemo ? 'readonly' : '' }}>
+                            <input type="date" name="tanggal_pembayaran" id="tanggal_pembayaran"
+                                class="input w-full @error('tanggal_pembayaran') border-danger bg-danger-light @enderror"
+                                value="{{ old('tanggal_pembayaran', isset($persetujuanPenawaran->noc->tanggal_pembayaran) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_pembayaran)) : '') }}"
+                                {{ $hasMemo ? 'readonly' : '' }}>
                             @error('tanggal_pembayaran')
-                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                <em class="text-sm alert text-danger">{{ $message }}</em>
                             @enderror
                         </div>
                     </div>
 
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Bukti KSL
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            @if(!$hasMemo)
-                                <input type="file" name="bukti_ksl" id="bukti_ksl" class="file-input w-full @error('bukti_ksl') border-danger bg-danger-light @enderror" accept=".pdf,.jpg,.jpeg,.png">
+                            @if (!$hasMemo)
+                                <input type="file" name="bukti_ksl" id="bukti_ksl"
+                                    class="file-input w-full @error('bukti_ksl') border-danger bg-danger-light @enderror"
+                                    accept=".pdf,.jpg,.jpeg,.png">
                                 @error('bukti_ksl')
-                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                 @enderror
                             @endif
 
-                            @if(isset($persetujuanPenawaran->noc->bukti_ksl) && !empty($persetujuanPenawaran->noc->bukti_ksl))
-                                <div class="mt-2 flex items-center">
-                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_ksl) }}" target="_blank" class="badge badge-sm badge-outline badge-warning">
-                                        <i class="ki-filled ki-eye mr-2"></i> Lihat File
+                            @if (isset($persetujuanPenawaran->noc->bukti_ksl) && !empty($persetujuanPenawaran->noc->bukti_ksl))
+                                <div class="flex items-center mt-2">
+                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_ksl) }}" target="_blank"
+                                        class="badge badge-sm badge-outline badge-warning">
+                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                     </a>
                                 </div>
                             @endif
                         </div>
                     </div>
 
-                    @if($hasMemo)
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    @if ($hasMemo)
+                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                             <label class="form-label max-w-56">
                                 Memo Penyelesaian
                             </label>
                             <div class="flex flex-wrap items-baseline w-full">
                                 <div class="flex items-center">
-                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->memo_penyelesaian) }}" target="_blank" class="badge badge-sm badge-outline badge-warning">
-                                        <i class="ki-filled ki-eye mr-2"></i> Lihat File
+                                    <a href="{{ Storage::url($persetujuanPenawaran->noc->memo_penyelesaian) }}"
+                                        target="_blank" class="badge badge-sm badge-outline badge-warning">
+                                        <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                     </a>
-                                    <input type="hidden" name="memo_penyelesaian_existing" value="{{ $persetujuanPenawaran->noc->memo_penyelesaian }}">
+                                    <input type="hidden" name="memo_penyelesaian_existing"
+                                        value="{{ $persetujuanPenawaran->noc->memo_penyelesaian }}">
                                 </div>
                             </div>
                         </div>
 
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                             <label class="form-label max-w-56">
                                 Bukti Penyelesaian
                             </label>
                             <div class="flex flex-wrap items-baseline w-full">
-                                <input type="file" name="bukti_penyelesaian" id="bukti_penyelesaian" class="file-input w-full @error('bukti_penyelesaian') border-danger bg-danger-light @enderror" accept=".pdf,.jpg,.jpeg,.png">
+                                <input type="file" name="bukti_penyelesaian" id="bukti_penyelesaian"
+                                    class="file-input w-full @error('bukti_penyelesaian') border-danger bg-danger-light @enderror"
+                                    accept=".pdf,.jpg,.jpeg,.png">
                                 @error('bukti_penyelesaian')
-                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                 @enderror
 
-                                @if(isset($persetujuanPenawaran->noc->bukti_penyelesaian) && !empty($persetujuanPenawaran->noc->bukti_penyelesaian))
-                                    <div class="mt-2 flex items-center">
-                                        <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_penyelesaian) }}" target="_blank" class="badge badge-sm badge-outline badge-warning">
-                                            <i class="ki-filled ki-eye mr-2"></i> Lihat File
+                                @if (isset($persetujuanPenawaran->noc->bukti_penyelesaian) && !empty($persetujuanPenawaran->noc->bukti_penyelesaian))
+                                    <div class="flex items-center mt-2">
+                                        <a href="{{ Storage::url($persetujuanPenawaran->noc->bukti_penyelesaian) }}"
+                                            target="_blank" class="badge badge-sm badge-outline badge-warning">
+                                            <i class="mr-2 ki-filled ki-eye"></i> Lihat File
                                         </a>
-                                        <input type="hidden" name="bukti_penyelesaian_existing" value="{{ $persetujuanPenawaran->noc->bukti_penyelesaian }}">
+                                        <input type="hidden" name="bukti_penyelesaian_existing"
+                                            value="{{ $persetujuanPenawaran->noc->bukti_penyelesaian }}">
                                     </div>
                                 @endif
                             </div>
                         </div>
 
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                             <label class="form-label max-w-56">
                                 Nominal Penyelesaian
                             </label>
                             <div class="flex flex-wrap items-baseline w-full">
-                                <input type="number" name="nominal_penyelesaian" id="nominal_penyelesaian" class="input w-full @error('nominal_penyelesaian') border-danger bg-danger-light @enderror" value="{{ old('nominal_penyelesaian', $persetujuanPenawaran->noc->nominal_penyelesaian ?? '') }}" placeholder="Masukkan nominal penyelesaian">
+                                <input type="number" name="nominal_penyelesaian" id="nominal_penyelesaian"
+                                    class="input w-full @error('nominal_penyelesaian') border-danger bg-danger-light @enderror"
+                                    value="{{ old('nominal_penyelesaian', $persetujuanPenawaran->noc->nominal_penyelesaian ?? '') }}"
+                                    placeholder="Masukkan nominal penyelesaian">
                                 @error('nominal_penyelesaian')
-                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                 @enderror
                             </div>
                         </div>
 
-                        <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                             <label class="form-label max-w-56">
                                 Tanggal Penyelesaian
                             </label>
                             <div class="flex flex-wrap items-baseline w-full">
-                                <input type="date" name="tanggal_penyelesaian" id="tanggal_penyelesaian" class="input w-full @error('tanggal_penyelesaian') border-danger bg-danger-light @enderror" value="{{ old('tanggal_penyelesaian', isset($persetujuanPenawaran->noc->tanggal_penyelesaian) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_penyelesaian)) : '') }}">
+                                <input type="date" name="tanggal_penyelesaian" id="tanggal_penyelesaian"
+                                    class="input w-full @error('tanggal_penyelesaian') border-danger bg-danger-light @enderror"
+                                    value="{{ old('tanggal_penyelesaian', isset($persetujuanPenawaran->noc->tanggal_penyelesaian) ? date('Y-m-d', strtotime($persetujuanPenawaran->noc->tanggal_penyelesaian)) : '') }}">
                                 @error('tanggal_penyelesaian')
-                                <em class="alert text-danger text-sm">{{ $message }}</em>
+                                    <em class="text-sm alert text-danger">{{ $message }}</em>
                                 @enderror
                             </div>
                         </div>
                     @endif
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Catatan
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            <textarea name="catatan" id="catatan" rows="4" class="textarea w-full @error('catatan') border-danger bg-danger-light @enderror" readonly placeholder="Masukkan catatan">{{ old('catatan', $persetujuanPenawaran->catatan ?? '') }}</textarea>
+                            <textarea name="catatan" id="catatan" rows="4"
+                                class="textarea w-full @error('catatan') border-danger bg-danger-light @enderror" readonly
+                                placeholder="Masukkan catatan">{{ old('catatan', $persetujuanPenawaran->catatan ?? '') }}</textarea>
                             @error('catatan')
-                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                <em class="text-sm alert text-danger">{{ $message }}</em>
                             @enderror
                         </div>
                     </div>
 
-                    <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap">
                         <label class="form-label max-w-56">
                             Catatan NOC
                         </label>
                         <div class="flex flex-wrap items-baseline w-full">
-                            <textarea name="catatan_noc" id="catatan_noc" rows="4" class="textarea w-full @error('catatan_noc') border-danger bg-danger-light @enderror" placeholder="Masukkan catatan noc">{{ old('catatan_noc', $persetujuanPenawaran->noc->catatan_noc ?? '') }}</textarea>
+                            <textarea name="catatan_noc" id="catatan_noc" rows="4"
+                                class="textarea w-full @error('catatan_noc') border-danger bg-danger-light @enderror"
+                                placeholder="Masukkan catatan noc">{{ old('catatan_noc', $persetujuanPenawaran->noc->catatan_noc ?? '') }}</textarea>
                             @error('catatan_noc')
-                            <em class="alert text-danger text-sm">{{ $message }}</em>
+                                <em class="text-sm alert text-danger">{{ $message }}</em>
                             @enderror
                         </div>
                     </div>
diff --git a/resources/views/noc/pembayaran.blade.php b/resources/views/noc/pembayaran.blade.php
index aca056b..c063d85 100644
--- a/resources/views/noc/pembayaran.blade.php
+++ b/resources/views/noc/pembayaran.blade.php
@@ -5,9 +5,10 @@
 @endsection
 
 @section('content')
-    <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
-        <div class="card border border-agi-100 card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="noc-table" data-api-url="{{ route('noc.datatables.pembayaran') }}">
-            <div class="card-header bg-agi-50 py-5 flex-wrap">
+    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
+        <div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
+            data-datatable-state-save="false" id="noc-table" data-api-url="{{ route('noc.datatables.pembayaran') }}">
+            <div class="flex-wrap py-5 card-header bg-agi-50">
                 <h3 class="card-title">
                     Daftar NOC Pembayaran
                 </h3>
@@ -27,61 +28,62 @@
 
             <div class="card-body">
                 <div class="scrollable-x-auto">
-                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
+                    <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
+                        data-datatable-table="true">
                         <thead>
-                        <tr>
-                            <th class="w-14">
-                                <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="nomor_registrasi">
-                                <span class="sort"> <span class="sort-label"> Nomor Registrasi </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="nama_debitur">
-                                <span class="sort"> <span class="sort-label"> Nama Debitur </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="cabang">
-                                <span class="sort"> <span class="sort-label"> Cabang </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="tanggal_setor">
-                                <span class="sort"> <span class="sort-label"> Tanggal KSL </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="nominal_bayar">
-                                <span class="sort"> <span class="sort-label"> Nominal bayar </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="bukti_bayar">
-                                <span class="sort"> <span class="sort-label"> Bukti Bayar </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="nominal_diterima">
-                                <span class="sort"> <span class="sort-label"> Nominal Diterima </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="bukti_ksl">
-                                <span class="sort"> <span class="sort-label"> Bukti KSL </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[150px]" data-datatable-column="tanggal_pembayaran">
-                                <span class="sort"> <span class="sort-label"> Tanggal Pembayaran </span>
-                                    <span class="sort-icon"> </span> </span>
-                            </th>
-                            <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
-                        </tr>
+                            <tr>
+                                <th class="w-14">
+                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="nomor_registrasi">
+                                    <span class="sort"> <span class="sort-label"> Nomor Registrasi </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="nama_debitur">
+                                    <span class="sort"> <span class="sort-label"> Nama Debitur </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="cabang">
+                                    <span class="sort"> <span class="sort-label"> Cabang </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="tanggal_setor">
+                                    <span class="sort"> <span class="sort-label"> Tanggal KSL </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="nominal_bayar">
+                                    <span class="sort"> <span class="sort-label"> Nominal bayar </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="bukti_bayar">
+                                    <span class="sort"> <span class="sort-label"> Bukti Bayar </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="nominal_diterima">
+                                    <span class="sort"> <span class="sort-label"> Nominal Diterima </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="bukti_ksl">
+                                    <span class="sort"> <span class="sort-label"> Bukti KSL </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[150px]" data-datatable-column="tanggal_pembayaran">
+                                    <span class="sort"> <span class="sort-label"> Tanggal Pembayaran </span>
+                                        <span class="sort-icon"> </span> </span>
+                                </th>
+                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Action</th>
+                            </tr>
                         </thead>
                     </table>
                 </div>
                 <div
-                    class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
-                    <div class="flex items-center gap-2">
+                    class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
+                    <div class="flex gap-2 items-center">
                         Show
-                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per
+                        <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per
                         page
                     </div>
-                    <div class="flex items-center gap-4">
+                    <div class="flex gap-4 items-center">
                         <span data-datatable-info="true"> </span>
                         <div class="pagination" data-datatable-pagination="true">
                         </div>
@@ -89,110 +91,110 @@
                 </div>
             </div>
         </div>
-        @endsection
+    @endsection
 
-        @push('scripts')
-            <script type="text/javascript">
-                function prosesData(data) {
-                    Swal.fire({
-                        title: 'NOC Pembayaran',
-                        text: "Apakah Anda yakin ingin menyetujui pembayaran ini?",
-                        icon: 'info',
-                        showCancelButton: true,
-                        confirmButtonColor: '#3085d6',
-                        cancelButtonColor: '#d33',
-                        confirmButtonText: 'Ya',
-                        cancelButtonText: 'Tidak'
-                    }).then((result) => {
-                        if (result.isConfirmed) {
-                            window.location.href = `noc/${data}/edit`;
-                        }
-                    })
-                }
-            </script>
+    @push('scripts')
+        <script type="text/javascript">
+            function prosesData(data) {
+                Swal.fire({
+                    title: 'NOC Pembayaran',
+                    text: "Apakah Anda yakin ingin menyetujui pembayaran ini?",
+                    icon: 'info',
+                    showCancelButton: true,
+                    confirmButtonColor: '#3085d6',
+                    cancelButtonColor: '#d33',
+                    confirmButtonText: 'Ya',
+                    cancelButtonText: 'Tidak'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        window.location.href = `noc/${data}/edit`;
+                    }
+                })
+            }
+        </script>
 
-            <script type="module">
-                const element = document.querySelector('#noc-table');
-                const searchInput = document.getElementById('search');
+        <script type="module">
+            const element = document.querySelector('#noc-table');
+            const searchInput = document.getElementById('search');
 
-                const apiUrl = element.getAttribute('data-api-url');
-                const dataTableOptions = {
-                    apiEndpoint: apiUrl,
-                    pageSize: 5,
-                    columns: {
-                        select: {
-                            render: (item, data, context) => {
-                                const checkbox = document.createElement('input');
-                                checkbox.className = 'checkbox checkbox-sm';
-                                checkbox.type = 'checkbox';
-                                checkbox.value = data.id.toString();
-                                checkbox.setAttribute('data-datatable-row-check', 'true');
-                                return checkbox.outerHTML.trim();
-                            },
+            const apiUrl = element.getAttribute('data-api-url');
+            const dataTableOptions = {
+                apiEndpoint: apiUrl,
+                pageSize: 5,
+                columns: {
+                    select: {
+                        render: (item, data, context) => {
+                            const checkbox = document.createElement('input');
+                            checkbox.className = 'checkbox checkbox-sm';
+                            checkbox.type = 'checkbox';
+                            checkbox.value = data.id.toString();
+                            checkbox.setAttribute('data-datatable-row-check', 'true');
+                            return checkbox.outerHTML.trim();
                         },
-                        nomor_registrasi: {
-                            title: 'Nomor Registrasi'
-                        },
-                        nama_debitur: {
-                            title: 'Nama Debitur',
-                        },
-                        cabang: {
-                            title: 'Cabang',
-                        },
-                        tanggal_setor: {
-                            title: 'Tanggal Setor',
-                        },
-                        nominal_bayar: {
-                            title: 'Nominal Bayar',
-                        },
-                        bukti_bayar: {
-                            title: 'Bukti KSL',
-                            render: (item, data) => {
-                                if (data.bukti_bayar) {
-                                    return `<a href="storage/${data.bukti_bayar}" download="storage/${data.bukti_bayar}" target="_blank" class="badge badge-sm badge-outline">
+                    },
+                    nomor_registrasi: {
+                        title: 'Nomor Registrasi'
+                    },
+                    nama_debitur: {
+                        title: 'Nama Debitur',
+                    },
+                    cabang: {
+                        title: 'Cabang',
+                    },
+                    tanggal_setor: {
+                        title: 'Tanggal KSL',
+                    },
+                    nominal_bayar: {
+                        title: 'Nominal Bayar',
+                    },
+                    bukti_bayar: {
+                        title: 'Bukti KSL',
+                        render: (item, data) => {
+                            if (data.bukti_bayar) {
+                                return `<a href="storage/${data.bukti_bayar}" download="storage/${data.bukti_bayar}" target="_blank" class="badge badge-sm badge-outline">
                         Download <i class="ki-filled ki-cloud-download"></i>
                     </a>`;
-                                } else {
-                                    return '-';
-                                }
-                            },
+                            } else {
+                                return '-';
+                            }
                         },
-                        nominal_diterima: {
-                            title: 'Nominal Diterima',
-                        },
-                        bukti_ksl: {
-                            title: 'Bukti KSL',
-                            render: (item, data) => {
-                                if (data.bukti_ksl) {
-                                    return `<a href="storage/${data.bukti_ksl}" download="storage/${data.bukti_ksl}" target="_blank" class="badge badge-sm badge-outline">
+                    },
+                    nominal_diterima: {
+                        title: 'Nominal Diterima',
+                    },
+                    bukti_ksl: {
+                        title: 'Bukti KSL',
+                        render: (item, data) => {
+                            if (data.bukti_ksl) {
+                                return `<a href="storage/${data.bukti_ksl}" download="storage/${data.bukti_ksl}" target="_blank" class="badge badge-sm badge-outline">
                         Download <i class="ki-filled ki-cloud-download"></i>
                     </a>`;
-                                } else {
-                                    return '-';
-                                }
-                            },
+                            } else {
+                                return '-';
+                            }
                         },
-                        tanggal_pembayaran: {
-                            title: 'Tanggal Pembayaran',
-                        },
-                        actions: {
-                            title: 'Action',
-                            render: (item, data) => {
-                                return `<div class="flex flex-nowrap justify-center">
+                    },
+                    tanggal_pembayaran: {
+                        title: 'Tanggal Pembayaran',
+                    },
+                    actions: {
+                        title: 'Action',
+                        render: (item, data) => {
+                            return `<div class="flex flex-nowrap justify-center">
                             <a class="btn btn-sm btn-outline btn-info" onclick="prosesData(${data.id})">
                                 <i class="ki-filled ki-double-check"></i>
                             </a>
                         </div>`;
-                            },
-                        }
-                    },
-                };
+                        },
+                    }
+                },
+            };
 
-                let dataTable = new KTDataTable(element, dataTableOptions);
-                // Custom search functionality
-                searchInput.addEventListener('input', function () {
-                    const searchValue = this.value.trim();
-                    dataTable.search(searchValue, true);
-                });
-            </script>
+            let dataTable = new KTDataTable(element, dataTableOptions);
+            // Custom search functionality
+            searchInput.addEventListener('input', function() {
+                const searchValue = this.value.trim();
+                dataTable.search(searchValue, true);
+            });
+        </script>
     @endpush
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index fc822e6..b10d65e 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -673,6 +673,10 @@ Breadcrumbs::for('noc', function (BreadcrumbTrail $trail) {
     $trail->push('NOC', route('noc.index'));
 });
 
+Breadcrumbs::for('noc.show', function (BreadcrumbTrail $trail) {
+    $trail->push('NOC', route('noc.index'));
+});
+
 Breadcrumbs::for('noc.pembayaran', function (BreadcrumbTrail $trail) {
     $trail->push('NOC Pembayaran', route('noc.pembayaran.index'));
 });