diff --git a/DataTables/DetailPenagihanDataTable.php b/DataTables/DetailPenagihanDataTable.php
new file mode 100644
index 0000000..ce09968
--- /dev/null
+++ b/DataTables/DetailPenagihanDataTable.php
@@ -0,0 +1,92 @@
+<?php
+
+    namespace Modules\Writeoff\DataTables;
+
+    use Carbon\Carbon;
+    use Illuminate\Database\Eloquent\Builder as QueryBuilder;
+    use Illuminate\Support\Number;
+    use Modules\Writeoff\Entities\DetailPenagihan;
+    use Nwidart\Modules\Facades\Module;
+    use Yajra\DataTables\EloquentDataTable;
+    use Yajra\DataTables\Html\Builder as HtmlBuilder;
+    use Yajra\DataTables\Html\Column;
+    use Yajra\DataTables\Services\DataTable;
+
+    class DetailPenagihanDataTable extends DataTable
+    {
+        /**
+         * Build the DataTable class.
+         *
+         * @param QueryBuilder $query Results from query() method.
+         */
+        public function dataTable(QueryBuilder $query)
+        : EloquentDataTable
+        {
+            return (new EloquentDataTable($query))->filter(function ($query) {
+                if (request()->has('search')) {
+                    $search = request()->get('search');
+                    $query->where('nomor_pinjaman', 'like', "%" . $search['value'] . "%");
+                }
+            })->addIndexColumn()->editColumn('tanggal_penagihan', function ($row) {
+                $date = Carbon::create($row->tanggal_penagihan);
+                return $date->locale('id')->translatedFormat('d F Y');
+            })->setRowId('id');
+        }
+
+        /**
+         * Get the query source of dataTable.
+         */
+        public function query(DetailPenagihan $model)
+        : QueryBuilder
+        {
+            return $model->newQuery();
+        }
+
+        /**
+         * Optional method if you want to use the html builder.
+         */
+        public function html()
+        : HtmlBuilder
+        {
+            return $this->builder()
+                        ->setTableId('detail-penagihan-table')
+                        ->columns($this->getColumns())
+                        ->minifiedAjax()
+                        ->stateSave(false)
+                        ->responsive()
+                        ->autoWidth(true)
+                        ->orderBy(1)
+                        ->parameters([
+                            'scrollX'      => false,
+                            'drawCallback' => 'function() { KTMenu.createInstances(); }',
+                        ])
+                        ->addTableClass('align-middle table-row-dashed fs-6 gy-5')
+                        ->drawCallback("function() {" . file_get_contents(Module::getModulePath('writeoff').'Resources/views/pencatatan/detail_penagihan/_draw-scripts.js') . "}");
+        }
+
+        /**
+         * Get the dataTable columns definition.
+         */
+        public function getColumns()
+        : array
+        {
+            return [
+                Column::make('DT_RowIndex')->title('No')->orderable(false)->searchable(false),
+                Column::make('tanggal_penagihan')->title('Tanggal Penagihan'),
+                Column::make('pic_penagihan')->title('PIC Penagihan'),
+                Column::make('tindakan')->title('Tindakan'),
+                Column::make('informasi_lku')->title('Informasi LKU'),
+                Column::make('prose_hukum')->title('Proses Hukum'),
+                Column::make('komitmen_debitur')->title('Komitmen Debitur')
+            ];
+        }
+
+        /**
+         * Get the filename for export.
+         */
+        protected function filename()
+        : string
+        {
+            return 'Detail_Penagihan_' . date('YmdHis');
+        }
+    }
diff --git a/Database/Migrations/2023_12_18_140550_create_detail_penagihan_table.php b/Database/Migrations/2023_12_18_140550_create_detail_penagihan_table.php
new file mode 100644
index 0000000..2e9f781
--- /dev/null
+++ b/Database/Migrations/2023_12_18_140550_create_detail_penagihan_table.php
@@ -0,0 +1,43 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('detail_penagihan', function (Blueprint $table) {
+            $table->id();
+            $table->string('nomor_pinjaman');
+            $table->string('kode_penagihan');
+            $table->date('tanggal_penagihan');
+            $table->string('tindakan')->nullable();
+            $table->string('informasi_lku')->nullable();
+            $table->string('pic_penagihan')->nullable();
+            $table->string('prose_hukum')->nullable();
+            $table->string('komitmen_debitur')->nullable();
+            $table->boolean('status')->default(true)->nullable();
+            $table->timestamps();
+            $table->timestamp('authorized_at')->nullable();
+            $table->char('authorized_status', 1)->nullable();
+            $table->softDeletes();
+            $table->unsignedBigInteger('created_by')->nullable();
+            $table->unsignedBigInteger('updated_by')->nullable();
+            $table->unsignedBigInteger('deleted_by')->nullable();
+            $table->unsignedBigInteger('authorized_by')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('detail_penagihan');
+    }
+};
diff --git a/Database/Migrations/2023_12_18_145244_create_detail_subrogasi_jamkrindo_table.php b/Database/Migrations/2023_12_18_145244_create_detail_subrogasi_jamkrindo_table.php
new file mode 100644
index 0000000..4359f39
--- /dev/null
+++ b/Database/Migrations/2023_12_18_145244_create_detail_subrogasi_jamkrindo_table.php
@@ -0,0 +1,42 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('detail_subrogasi_jamkrindo', function (Blueprint $table) {
+            $table->id();
+            $table->string('nomor_pinjaman');
+            $table->string('kode_pembayaran');
+            $table->date('tanggal_pembayaran');
+            $table->double('pembayaran_debitur', 20, 2);
+            $table->double('subrogasi_jamkrindo', 20, 2);
+            $table->double('pendapatan_bank', 20, 2);
+            $table->string('keterangan')->nullable();
+            $table->boolean('status')->default(true)->nullable();
+            $table->timestamps();
+            $table->timestamp('authorized_at')->nullable();
+            $table->char('authorized_status', 1)->nullable();
+            $table->softDeletes();
+            $table->unsignedBigInteger('created_by')->nullable();
+            $table->unsignedBigInteger('updated_by')->nullable();
+            $table->unsignedBigInteger('deleted_by')->nullable();
+            $table->unsignedBigInteger('authorized_by')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('detail_subrogasi_jamkrindo');
+    }
+};
diff --git a/Entities/DetailPenagihan.php b/Entities/DetailPenagihan.php
new file mode 100644
index 0000000..10044fc
--- /dev/null
+++ b/Entities/DetailPenagihan.php
@@ -0,0 +1,23 @@
+<?php
+
+    namespace Modules\Writeoff\Entities;
+
+    class DetailPenagihan extends BaseModel
+    {
+        protected $table = 'detail_penagihan';
+
+        protected $fillable = [
+            'nomor_pinjaman',
+            'kode_penagihan',
+            'tanggal_penagihan',
+            'tindakan',
+            'informasi_lku',
+            'pic_penagihan',
+            'prose_hukum',
+            'komitmen_debitur',
+            'status',
+            'authorized_at',
+            'authorized_status',
+            'authorized_by',
+        ];
+    }
diff --git a/Http/Controllers/DetailPenagihanController.php b/Http/Controllers/DetailPenagihanController.php
new file mode 100644
index 0000000..6938042
--- /dev/null
+++ b/Http/Controllers/DetailPenagihanController.php
@@ -0,0 +1,63 @@
+<?php
+
+    namespace Modules\Writeoff\Http\Controllers;
+
+    use App\Http\Controllers\Controller;
+    use Illuminate\Http\Request;
+    use Illuminate\Support\Facades\Auth;
+    use Modules\Writeoff\DataTables\DetailPenagihanDataTable;
+    use Modules\Writeoff\Entities\Branch;
+    use Modules\Writeoff\Entities\HapusBuku;
+
+    class DetailPenagihanController extends Controller
+    {
+        public $user;
+
+        public function __construct()
+        {
+            $this->middleware(function ($request, $next) {
+                $this->user = Auth::guard('web')->user();
+                return $next($request);
+            });
+        }
+
+        public function index()
+        {
+            return view('writeoff::pencatatan.detail_penagihan.index');
+        }
+
+        public function store(Request $request)
+        {
+            $hapusbuku = HapusBuku::where('nomor_pinjaman', $request->nomor_pinjaman)->first();
+            if ($hapusbuku) {
+
+                echo json_encode(['status'   => 'success',
+                                  'message'  => 'Nomor Pinjaman ditemukan.',
+                                  'redirect' => route('pencatatan.detail_penagihan.show', ['nomor_pinjaman' => $request->nomor_pinjaman])
+                ]);
+            } else {
+                echo json_encode(['status' => 'error', 'message' => 'Nomor Pinjaman tidak ditemukan.']);
+            }
+        }
+
+        public function show(DetailPenagihanDataTable $dataTable, $nomor_pinjaman)
+        {
+            if (is_null($this->user) || !$this->user->can('master.read')) {
+                abort(403, 'Sorry !! You are Unauthorized to view any master data !');
+            }
+
+            session_start();
+            $_SESSION['nomor_pinjaman']= $nomor_pinjaman;
+
+            $hapusbuku = HapusBuku::where('nomor_pinjaman', $nomor_pinjaman)->first();
+            if ($hapusbuku) {
+                $cabang = Branch::where('kode', $hapusbuku->kode_cabang)->first();
+                return $dataTable->render('writeoff::pencatatan.detail_penagihan.show', compact('hapusbuku', 'cabang'));
+            } else {
+                return redirect()
+                    ->route('pencatatan.detail_penagihan.index')
+                    ->with('error', 'Nomor Pinjaman tidak ditemukan.');
+            }
+        }
+
+    }
diff --git a/Http/Requests/DetailPenagihan/StoreDetailPenagihanRequest.php b/Http/Requests/DetailPenagihan/StoreDetailPenagihanRequest.php
new file mode 100644
index 0000000..93f7b14
--- /dev/null
+++ b/Http/Requests/DetailPenagihan/StoreDetailPenagihanRequest.php
@@ -0,0 +1,51 @@
+<?php
+
+    namespace Modules\Writeoff\Http\Requests\DetailPembayaran;
+
+    use Illuminate\Foundation\Http\FormRequest;
+
+    class StoreDetailPenagihanRequest extends FormRequest
+    {
+        /**
+         * Determine if the user is authorized to make this request.
+         */
+        public function authorize()
+        : bool
+        {
+            return true;
+        }
+
+        /**
+         * Get the validation rules that apply to the request.
+         *
+         * @return array<string, \Illuminate\Contracts\Validation\Rule|array|string>
+         */
+        public function rules()
+        : array
+        {
+            return [
+                'nomor_pinjaman'    => 'nullable|string',
+                'kode_penagihan'    => 'nullable|string',
+                'tanggal_penagihan' => 'nullable|date',
+                'tindakan'          => 'nullable|string',
+                'informasi_lku'     => 'nullable|string',
+                'pic_penagihan'     => 'nullable|string',
+                'prose_hukum'       => 'nullable|string',
+                'komitmen_debitur'  => 'nullable|string',
+                'status'            => 'nullable',
+            ];
+        }
+
+        public function ignored()
+        : string
+        {
+            return $this->id;
+        }
+
+        protected function prepareForValidation()
+        {
+            $this->merge([
+                'nomor_pinjaman' => $_SESSION['nomor_pinjaman'],
+            ]);
+        }
+    }
diff --git a/Livewire/DetailPembayaran/DetailPembayaranModal.php b/Livewire/DetailPembayaran/DetailPembayaranModal.php
index d4ee60b..4b5d57b 100644
--- a/Livewire/DetailPembayaran/DetailPembayaranModal.php
+++ b/Livewire/DetailPembayaran/DetailPembayaranModal.php
@@ -5,7 +5,7 @@
     use Illuminate\Support\Facades\DB;
     use Livewire\Component;
     use Modules\Writeoff\Entities\DetailPembayaran;
-    use Modules\Writeoff\Http\Requests\DetailPembayaran\StoreDetailPembayaranRequest;
+    use Modules\Writeoff\Http\Requests\DetailPembayaran\StoreDetailPenagihanRequest;
     use Request;
 
     class DetailPembayaranModal extends Component
@@ -59,7 +59,7 @@
 
         protected function rules()
         {
-            $request = new StoreDetailPembayaranRequest();
+            $request = new StoreDetailPenagihanRequest();
 
             return $request->rules();
         }
diff --git a/Livewire/DetailPenagihan/DetailPenagihanModal.php b/Livewire/DetailPenagihan/DetailPenagihanModal.php
new file mode 100644
index 0000000..c77f78e
--- /dev/null
+++ b/Livewire/DetailPenagihan/DetailPenagihanModal.php
@@ -0,0 +1,73 @@
+<?php
+
+    namespace Modules\Writeoff\Livewire\DetailPenagihan;
+
+    use Illuminate\Support\Facades\DB;
+    use Livewire\Component;
+    use Modules\Writeoff\Entities\DetailPenagihan;
+    use Modules\Writeoff\Http\Requests\DetailPenagihan\StoreDetailPenagihanRequest;
+    use Request;
+
+    class DetailPenagihanModal extends Component
+    {
+        public $id;
+        public $nomor_pinjaman;
+        public $tanggal_penagihan;
+        public $tindakan;
+        public $informasi_lku;
+        public $pic_penagihan;
+        public $prose_hukum;
+        public $komitmen_debitur;
+        public $status;
+        public $pinjaman;
+
+        public function render()
+        {
+            $this->pinjaman       = request()->segment(3);
+            $this->nomor_pinjaman = $this->pinjaman;
+            return view('writeoff::livewire.detail-penagihan.detail-penagihan-modal');
+        }
+
+        public function submit()
+        {
+            $this->validate();
+            session_start();
+            // Validate the form input data
+            DB::transaction(function () {
+                // Prepare the data for creating a new user
+                $data = [
+                    'nomor_pinjaman'    => $_SESSION['nomor_pinjaman'],
+                    'kode_penagihan'    => round(microtime(true) * 100),
+                    'tanggal_penagihan' => $this->tanggal_penagihan,
+                    'tindakan'          => $this->tindakan,
+                    'informasi_lku'     => $this->informasi_lku,
+                    'pic_penagihan'     => $this->pic_penagihan,
+                    'prose_hukum'       => $this->prose_hukum,
+                    'komitmen_debitur'  => $this->komitmen_debitur,
+                    'status'            => $this->status,
+                ];
+
+                DetailPenagihan::create($data);
+                $this->dispatch('success', __('Data Detail Penagihan berhasil ditambahkan'));
+            });
+
+            // Reset the form fields after successful submission
+            $this->reset();
+            $this->nomor_pinjaman = request()->segment(3);
+        }
+
+
+        public function hydrate()
+        {
+            $this->resetErrorBag();
+            $this->resetValidation();
+        }
+
+        protected function rules()
+        {
+            $request = new StoreDetailPenagihanRequest();
+
+            return $request->rules();
+        }
+    }
+
diff --git a/Resources/views/livewire/detail-penagihan/detail-penagihan-modal.blade.php b/Resources/views/livewire/detail-penagihan/detail-penagihan-modal.blade.php
new file mode 100644
index 0000000..86154ae
--- /dev/null
+++ b/Resources/views/livewire/detail-penagihan/detail-penagihan-modal.blade.php
@@ -0,0 +1,138 @@
+<div class="modal fade" id="kt_modal_add_detail_penagihan" tabindex="-1" aria-hidden="true" wire:ignore.self>
+    <!--begin::Modal dialog-->
+    <div class="modal-dialog modal-dialog-centered mw-650px">
+        <!--begin::Modal content-->
+        <div class="modal-content">
+            <!--begin::Modal header-->
+            <div class="modal-header" id="kt_modal_add_detail_penagihan_header">
+                <!--begin::Modal title-->
+                <h2 class="fw-bold">Add Detail Penagihan</h2>
+                <!--end::Modal title-->
+                <!--begin::Close-->
+                <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal" aria-label="Close">
+                    {!! getIcon('cross','fs-1') !!}
+                </div>
+                <!--end::Close-->
+            </div>
+            <!--end::Modal header-->
+            <!--begin::Modal body-->
+            <div class="modal-body px-5 my-7">
+                <!--begin::Form-->
+                <form id="kt_modal_add_detail_penagihan" class="form" action="#" wire:submit.prevent="submit">
+                    <!--begin::Scroll-->
+                    <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_detail_penagihan_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_detail_penagihan_header" data-kt-scroll-wrappers="#kt_modal_add_detail_penagihan_scroll" data-kt-scroll-offset="300px">
+                        <!--begin::Input group-->
+                        <input type="text" wire:model.defer="nomor_pinjaman" name="nomor_pinjaman" id="nomor_pinjaman" value="{{ request()->segment(3) }}">
+                        <!--begin::Input group-->
+                        <div class="fv-row mb-7">
+                            <!--begin::Label-->
+                            <label class="required fw-semibold fs-6 mb-2">Tanggal Penagihan</label>
+                            <!--end::Label-->
+                            <!--begin::Input-->
+                            <input type="date" wire:model.defer="tanggal_penagihan" name="tanggal_penagihan" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Nomor Jaminan"/>
+                            <!--end::Input-->
+                            @error('tanggal_penagihan')
+                            <span class="text-danger">{{ $message }}</span> @enderror
+                        </div>
+                        <!--end::Input group-->
+
+                        <!--begin::Input group-->
+                        <div class="fv-row mb-7">
+                            <!--begin::Label-->
+                            <label class="required fw-semibold fs-6 mb-2">Tindakan</label>
+                            <!--end::Label-->
+                            <!--begin::Input-->
+                            <textarea wire:model.defer="tindakan" name="tindakan" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Tindakan"></textarea>
+                            <!--end::Input-->
+                            @error('tindakan')
+                            <span class="text-danger">{{ $message }}</span> @enderror
+                        </div>
+                        <!--end::Input group-->
+
+                        <!--begin::Input group-->
+                        <div class="fv-row mb-7">
+                            <!--begin::Label-->
+                            <label class="required fw-semibold fs-6 mb-2">Informasi LKU</label>
+                            <!--end::Label-->
+                            <!--begin::Input-->
+                            <textarea wire:model.defer="informasi_lku" name="informasi_lku" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Informasi LKU"></textarea>
+                            <!--end::Input-->
+                            @error('informasi_lku')
+                            <span class="text-danger">{{ $message }}</span> @enderror
+                        </div>
+                        <!--end::Input group-->
+
+                        <!--begin::Input group-->
+                        <div class="fv-row mb-7">
+                            <!--begin::Label-->
+                            <label class="required fw-semibold fs-6 mb-2">PIC Penagihan</label>
+                            <!--end::Label-->
+                            <!--begin::Input-->
+                            <input type="text"  wire:model.defer="pic_penagihan" name="pic_penagihan" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="PIC Penagihan"/>
+                            <!--end::Input-->
+                            @error('pic_penagihan')
+                            <span class="text-danger">{{ $message }}</span> @enderror
+                        </div>
+                        <!--end::Input group-->
+
+                        <!--begin::Input group-->
+                        <div class="fv-row mb-7">
+                            <!--begin::Label-->
+                            <label class="required fw-semibold fs-6 mb-2">Proses Hukum</label>
+                            <!--end::Label-->
+                            <!--begin::Input-->
+                            <input type="text"  wire:model.defer="proses_hukum" name="proses_hukum" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Proses Hukum"/>
+                            <!--end::Input-->
+                            @error('proses_hukum')
+                            <span class="text-danger">{{ $message }}</span> @enderror
+                        </div>
+                        <!--end::Input group-->
+
+                        <!--begin::Input group-->
+                        <div class="fv-row mb-7">
+                            <!--begin::Label-->
+                            <label class="required fw-semibold fs-6 mb-2">Komitmen Debitur</label>
+                            <!--end::Label-->
+                            <!--begin::Input-->
+                            <input type="text"  wire:model.defer="komitmen_debitur" name="komitmen_debitur" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Komitmen Debitur"/>
+                            <!--end::Input-->
+                            @error('komitmen_debitur')
+                            <span class="text-danger">{{ $message }}</span> @enderror
+                        </div>
+                        <!--end::Input group-->
+
+                        <div class="fv-row mb-7">
+                            <label class="fw-semibold fs-6 mb-2">Status Data</label>
+                            <div class="form-check form-switch form-check-custom form-check-solid" style="display: block!important;">
+                                <input class="form-check-input h-20px w-30px me-5" type="checkbox" wire:model.defer="status" id="status" name="status"/>
+                                <label class="form-check-label" for="status">
+                                    Aktif
+                                </label>
+                                @error('status')
+                                <span class="text-danger">{{ $message }}</span> @enderror
+                            </div>
+                        </div>
+
+                    </div>
+                    <!--end::Scroll-->
+                    <!--begin::Actions-->
+                    <div class="text-center pt-15">
+                        <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal" aria-label="Close" wire:loading.attr="disabled">Discard</button>
+                        <button type="submit" class="btn btn-primary" data-kt-detail_penagihan-modal-action="submit">
+                            <span class="indicator-label" wire:loading.remove>Submit</span>
+                            <span class="indicator-progress" wire:loading wire:target="submit">
+                                Please wait...
+                                <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
+                            </span>
+                        </button>
+                    </div>
+                    <!--end::Actions-->
+                </form>
+                <!--end::Form-->
+            </div>
+            <!--end::Modal body-->
+        </div>
+        <!--end::Modal content-->
+    </div>
+    <!--end::Modal dialog-->
+</div>
diff --git a/Resources/views/partials/menu/_app.blade.php b/Resources/views/partials/menu/_app.blade.php
index 47de48a..304eebc 100644
--- a/Resources/views/partials/menu/_app.blade.php
+++ b/Resources/views/partials/menu/_app.blade.php
@@ -117,7 +117,7 @@
         </div>
     </div>
 
-    <div data-kt-menu-trigger="click" class="menu-item menu-accordion  {{ $route[0] == 'pencatatan' && $route[1] == 'detail_jaminan' ? 'show' : '' }}">
+    <div data-kt-menu-trigger="click" class="menu-item menu-accordion  {{ $route[0] == 'pencatatan' && $route[1] == 'detail_jaminan' || $route[0] == 'pencatatan' && $route[1] == 'detail_pembayaran' || $route[0] == 'pencatatan' && $route[1] == 'detail_penagihan' ? 'show' : '' }}">
         <!--begin:Menu link-->
         <span class="menu-link">
 					<span class="menu-icon">{!! getIcon('cheque', 'fs-2') !!}</span>
@@ -142,7 +142,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_pembayaran' ? 'active' : '' }}" href="{{ route('pencatatan.detail_pembayaran.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
@@ -154,7 +154,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_penagihan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_penagihan.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
@@ -166,7 +166,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? '' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
@@ -178,7 +178,7 @@
         </div>
     </div>
 
-    <div data-kt-menu-trigger="click" class="menu-item menu-accordion  {{ $route[0] == 'pencatatan' && $route[1] == 'detail_jaminan' ? 'show' : '' }}">
+    <div data-kt-menu-trigger="click" class="menu-item menu-accordion  {{ $route[0] == 'pencatatan' && $route[1] == 'detail_jaminan' ? '' : '' }}">
         <!--begin:Menu link-->
         <span class="menu-link">
 					<span class="menu-icon">{!! getIcon('book', 'fs-2') !!}</span>
@@ -191,7 +191,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? '' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
@@ -203,7 +203,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? '' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
@@ -215,7 +215,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? '' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
@@ -227,7 +227,7 @@
             <!--begin:Menu item-->
             <div class="menu-item ">
                 <!--begin:Menu link-->
-                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? 'active' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
+                <a class="menu-link {{ isset($route[1]) && $route[1] == 'detail_jaminan' ? '' : '' }}" href="{{ route('pencatatan.detail_jaminan.index') }}">
 							<span class="menu-bullet">
 								<span class="bullet bullet-dot"></span>
 							</span>
diff --git a/Resources/views/pencatatan/detail_jaminan/_draw-scripts.js b/Resources/views/pencatatan/detail_jaminan/_draw-scripts.js
index 635fc52..b8afc6a 100644
--- a/Resources/views/pencatatan/detail_jaminan/_draw-scripts.js
+++ b/Resources/views/pencatatan/detail_jaminan/_draw-scripts.js
@@ -9,11 +9,11 @@ document.querySelectorAll('[data-kt-action="delete_row"]').forEach(function (ele
             icon: 'warning',
             buttonsStyling: false,
             showCancelButton: true,
-            confirmButtonText: 'Yes',
-            cancelButtonText: 'No',
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'Cancel',
             customClass: {
-                confirmButton: 'btn btn-danger',
-                cancelButton: 'btn btn-secondary',
+                confirmButton: 'btn btn-primary',
+                cancelButton: 'btn btn-danger',
             }
         }).then((result) => {
             if (result.isConfirmed) {
diff --git a/Resources/views/pencatatan/detail_pembayaran/_draw-scripts.js b/Resources/views/pencatatan/detail_pembayaran/_draw-scripts.js
index 10d1a4a..f1ee7fa 100644
--- a/Resources/views/pencatatan/detail_pembayaran/_draw-scripts.js
+++ b/Resources/views/pencatatan/detail_pembayaran/_draw-scripts.js
@@ -9,11 +9,11 @@ document.querySelectorAll('[data-kt-action="delete_row"]').forEach(function (ele
             icon: 'warning',
             buttonsStyling: false,
             showCancelButton: true,
-            confirmButtonText: 'Yes',
-            cancelButtonText: 'No',
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'Cancel',
             customClass: {
-                confirmButton: 'btn btn-danger',
-                cancelButton: 'btn btn-secondary',
+                confirmButton: 'btn btn-primary',
+                cancelButton: 'btn btn-danger',
             }
         }).then((result) => {
             if (result.isConfirmed) {
diff --git a/Resources/views/pencatatan/detail_penagihan/_draw-scripts.js b/Resources/views/pencatatan/detail_penagihan/_draw-scripts.js
new file mode 100644
index 0000000..4a49eab
--- /dev/null
+++ b/Resources/views/pencatatan/detail_penagihan/_draw-scripts.js
@@ -0,0 +1,37 @@
+// Initialize KTMenu
+KTMenu.init();
+
+// Add click event listener to delete buttons
+document.querySelectorAll('[data-kt-action="delete_row"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+        Swal.fire({
+            text: 'Are you sure you want to remove?',
+            icon: 'warning',
+            buttonsStyling: false,
+            showCancelButton: true,
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'Cancel',
+            customClass: {
+                confirmButton: 'btn btn-primary',
+                cancelButton: 'btn btn-danger',
+            }
+        }).then((result) => {
+            if (result.isConfirmed) {
+                Livewire.dispatch('delete', { id : this.getAttribute('data-kt-id') });
+            }
+        });
+    });
+});
+
+// Add click event listener to update buttons
+document.querySelectorAll('[data-kt-action="update_row"]').forEach(function (element) {
+    element.addEventListener('click', function () {
+        Livewire.dispatch('update', { id : this.getAttribute('data-kt-id') });
+    });
+});
+
+// Listen for 'success' event emitted by Livewire
+Livewire.on('success', (message) => {
+    // Reload the users-table datatable
+    LaravelDataTables['detail_penagihan-table'].ajax.reload();
+});
diff --git a/Resources/views/pencatatan/detail_penagihan/index.blade.php b/Resources/views/pencatatan/detail_penagihan/index.blade.php
new file mode 100644
index 0000000..a112b90
--- /dev/null
+++ b/Resources/views/pencatatan/detail_penagihan/index.blade.php
@@ -0,0 +1,74 @@
+<x-default-layout>
+
+    @section('title')
+        Detail Penagihan Pinjaman Write-off
+    @endsection
+
+    @section('breadcrumbs')
+        {{ Breadcrumbs::render('detail.penagihan') }}
+    @endsection
+
+    <div class="card">
+        <!--begin::Card body-->
+        <div class="card-body py-4">
+            <form id="form_jaminan" class="form" action="{{ route('pencatatan.detail_penagihan.store') }}" method="POST" >
+                @csrf
+                <!--begin::Scroll-->
+                <div class="d-flex flex-column px-5 px-lg-10">
+                    <!--begin::Input group-->
+                    <div class="fv-row mb-7">
+                        <label class="required fw-semibold fs-6 mb-2">Nomor Pinjaman</label>
+                        <!--end::Label-->
+                        <!--begin::Input-->
+                        <input type="number" name="nomor_pinjaman" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Nomor Pinjaman"/>
+                        <!--end::Input-->
+                        @error('nomor_pinjaman')
+                        <span class="text-danger">{{ $message }}</span> @enderror
+                    </div>
+                </div>
+                <!--begin::Actions-->
+                <div class="text-center pt-15">
+                    <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal" aria-label="Close">Discard</button>
+                    <button type="submit" class="btn btn-primary" data-kt-hapus_bukues-modal-action="submit">
+                        <span class="indicator-label">Submit</span>
+                    </button>
+                </div>
+                <!--end::Actions-->
+            </form>
+        </div>
+        <!--end::Card body-->
+    </div>
+    @push('scripts')
+        <script>
+            $(function () {
+                $("#form_jaminan").on('submit',function (e) {
+                    e.preventDefault(); // avoid to execute the actual submit of the form.
+
+                    var form = $(this);
+                    var actionUrl = form.attr('action');
+
+                    $.ajax({
+                        type: "POST",
+                        url: actionUrl,
+                        data: form.serialize(),
+                        success: function (data) {
+                            var _data = JSON.parse(data);
+                            if(_data.status === 'error'){
+                                toastr.error(_data.message);
+                                return false;
+                            } else{
+                                toastr.success(_data.message);
+                                window.location.href = _data.redirect;
+                            }
+
+                        },
+                        error: function (data, textStatus, errorThrown) {
+                            var _data = JSON.parse(data);
+                            toastr.error(_data.message);
+                        }
+                    });
+                });
+            })
+        </script>
+    @endpush
+</x-default-layout>
diff --git a/Resources/views/pencatatan/detail_penagihan/show.blade.php b/Resources/views/pencatatan/detail_penagihan/show.blade.php
new file mode 100644
index 0000000..6dd09d9
--- /dev/null
+++ b/Resources/views/pencatatan/detail_penagihan/show.blade.php
@@ -0,0 +1,108 @@
+<x-default-layout>
+
+    @section('title')
+        Detail Penagihan Pinjaman Write-off
+    @endsection
+
+    @section('breadcrumbs')
+        {{ Breadcrumbs::render('detail.penagihan') }}
+    @endsection
+
+     <div class="card">
+        <!--begin::Card header-->
+        <div class="card-header border-0 pt-6">
+            <!--begin::Card title-->
+            <div class="card-title">
+                <div class="d-flex flex-column px-5 px-lg-10">
+                    <!--begin::Input group-->
+                    <div class="fv-row mb-7">
+                        <label class="fw-semibold fs-6 mb-2">Nomor Pinjaman</label>
+                        <!--end::Label-->
+                        <br>
+                        <!--end::Label-->
+                        {{ $hapusbuku->nomor_pinjaman}}
+                    </div>
+                </div>
+                <div class="d-flex flex-column px-5 px-lg-10">
+                    <!--begin::Input group-->
+                    <div class="fv-row mb-7">
+                        <label class="fw-semibold fs-6 mb-2">Debitur</label><br>
+                        <!--end::Label-->
+                        {{ $hapusbuku->kode_debitur.'/'.$hapusbuku->nama_debitur }}
+                    </div>
+                </div>
+
+                <div class="d-flex flex-column px-5 px-lg-10">
+                    <!--begin::Input group-->
+                    <div class="fv-row mb-7">
+                        <label class="fw-semibold fs-6 mb-2">Cabang</label><br>
+                        <!--end::Label-->
+                        {{ $hapusbuku->kode_cabang.'/'.$cabang->name }}
+                    </div>
+                </div>
+            </div>
+            <!--begin::Card title-->
+
+            <!--begin::Card toolbar-->
+            <div class="card-toolbar">
+                <!--begin::Toolbar-->
+                <div class="d-flex justify-content-end" data-kt-hapus_buku-table-toolbar="base">
+                    <!--begin::Add hapus_buku-->
+                    <button type="button" id="showModal" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_detail_penagihan">
+                        {!! getIcon('plus', 'fs-2', '', 'i') !!}
+                        Add Detail Penagihan
+                    </button>
+                    <!--end::Add hapus_buku-->
+                </div>
+                <!--end::Toolbar-->
+
+                <!--begin::Modal-->
+                <livewire:writeoff::detail-penagihan.detail-penagihan-modal/>
+            </div>
+            <!--end::Card toolbar-->
+        </div>
+        <!--end::Card header-->
+
+        <!--begin::Card body-->
+        <div class="card-body py-4">
+            <!--begin::Table-->
+            <div class="table-responsive">
+                {{ $dataTable->table() }}
+            </div>
+            <!--end::Table-->
+        </div>
+        <!--end::Card body-->
+    </div>
+
+    @push('scripts')
+        {{ $dataTable->scripts() }}
+        <script>
+            document.addEventListener('livewire:initialized', function () {
+                Livewire.on('success', function () {
+                    $('#kt_modal_add_detail_penagihan').modal('hide');
+                    window.LaravelDataTables['detail-penagihan-table'].ajax.reload();
+                });
+            });
+
+            Inputmask.extendAliases({
+                'currency': {
+                    autoUnmask: true,
+                    allowPlus: true,
+                    allowMinus: true,
+                }
+            });
+
+            $(function () {
+                $('#kt_modal_add_detail_penagihan').on('hidden.bs.modal', function () {
+                    $(this).find('form').trigger('reset');
+                    $("#nomor_pinjaman").val("{{ request()->segment(3) }}");
+                });
+
+                $("#showModal").on('click',function(){
+                    $("#nomor_pinjaman").val("{{ request()->segment(3) }}");
+                });
+            });
+        </script>
+    @endpush
+
+</x-default-layout>
diff --git a/Resources/views/pencatatan/hapus_buku/_draw-scripts.js b/Resources/views/pencatatan/hapus_buku/_draw-scripts.js
index 9040a9e..bfcd9de 100644
--- a/Resources/views/pencatatan/hapus_buku/_draw-scripts.js
+++ b/Resources/views/pencatatan/hapus_buku/_draw-scripts.js
@@ -9,11 +9,11 @@ document.querySelectorAll('[data-kt-action="delete_row"]').forEach(function (ele
             icon: 'warning',
             buttonsStyling: false,
             showCancelButton: true,
-            confirmButtonText: 'Yes',
-            cancelButtonText: 'No',
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'Cancel',
             customClass: {
-                confirmButton: 'btn btn-danger',
-                cancelButton: 'btn btn-secondary',
+                confirmButton: 'btn btn-primary',
+                cancelButton: 'btn btn-danger',
             }
         }).then((result) => {
             if (result.isConfirmed) {
diff --git a/Resources/views/pencatatan/klaim_jamkrindo/_draw-scripts.js b/Resources/views/pencatatan/klaim_jamkrindo/_draw-scripts.js
index 7d42e9e..b53ea36 100644
--- a/Resources/views/pencatatan/klaim_jamkrindo/_draw-scripts.js
+++ b/Resources/views/pencatatan/klaim_jamkrindo/_draw-scripts.js
@@ -9,11 +9,11 @@ document.querySelectorAll('[data-kt-action="delete_row"]').forEach(function (ele
             icon: 'warning',
             buttonsStyling: false,
             showCancelButton: true,
-            confirmButtonText: 'Yes',
-            cancelButtonText: 'No',
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'Cancel',
             customClass: {
-                confirmButton: 'btn btn-danger',
-                cancelButton: 'btn btn-secondary',
+                confirmButton: 'btn btn-primary',
+                cancelButton: 'btn btn-danger',
             }
         }).then((result) => {
             if (result.isConfirmed) {
diff --git a/Resources/views/pencatatan/subrogasi_jamkrindo/_draw-scripts.js b/Resources/views/pencatatan/subrogasi_jamkrindo/_draw-scripts.js
index 601d3ee..f9e37b9 100644
--- a/Resources/views/pencatatan/subrogasi_jamkrindo/_draw-scripts.js
+++ b/Resources/views/pencatatan/subrogasi_jamkrindo/_draw-scripts.js
@@ -9,11 +9,11 @@ document.querySelectorAll('[data-kt-action="delete_row"]').forEach(function (ele
             icon: 'warning',
             buttonsStyling: false,
             showCancelButton: true,
-            confirmButtonText: 'Yes',
-            cancelButtonText: 'No',
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'Cancel',
             customClass: {
-                confirmButton: 'btn btn-danger',
-                cancelButton: 'btn btn-secondary',
+                confirmButton: 'btn btn-primary',
+                cancelButton: 'btn btn-danger',
             }
         }).then((result) => {
             if (result.isConfirmed) {
diff --git a/Routes/breadcrumbs.php b/Routes/breadcrumbs.php
index 20bd41f..1e1de21 100644
--- a/Routes/breadcrumbs.php
+++ b/Routes/breadcrumbs.php
@@ -76,3 +76,8 @@
         $trail->parent('detail');
         $trail->push('Detail Pembayaran Pinjaman Write-off', route('pencatatan.detail_pembayaran.index'));
     });
+
+    Breadcrumbs::for('detail.penagihan', function (BreadcrumbTrail $trail) {
+        $trail->parent('detail');
+        $trail->push('Detail Penagihan Pinjaman Write-off', route('pencatatan.detail_penagihan.index'));
+    });
diff --git a/Routes/web.php b/Routes/web.php
index 5d75dc7..34f34a8 100644
--- a/Routes/web.php
+++ b/Routes/web.php
@@ -35,4 +35,8 @@ Route::name('parameter.')->prefix('parameter')->group(function() {
         Route::get('detail-pembayaran', 'DetailPembayaranController@index')->name('detail_pembayaran.index');
         Route::post('detail-pembayaran', 'DetailPembayaranController@store')->name('detail_pembayaran.store');
         Route::get('detail-pembayaran/{nomor_pinjaman}', 'DetailPembayaranController@show')->name('detail_pembayaran.show');
+
+        Route::get('detail-penagihan', 'DetailPenagihanController@index')->name('detail_penagihan.index');
+        Route::post('detail-penagihan', 'DetailPenagihanController@store')->name('detail_penagihan.store');
+        Route::get('detail-penagihan/{nomor_pinjaman}', 'DetailPenagihanController@show')->name('detail_penagihan.show');
     });