666419507f
Buat berkas `index.blade.php` untuk menampilkan daftar persetujuan penawaran dengan tabel yang mendukung pencarian dan ekspor ke Excel. Halaman ini juga mencakup pengelolaan melalui kolom-kolom seperti nomor registrasi, nama debitur, nomor proposal, tanggal proposal, biaya final, SLA resume, SLA final, dan catatan. Menyertakan interaksi seperti pengeditan melalui aksi pada setiap baris tabel.
155 lines
7.9 KiB
PHP
155 lines
7.9 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('breadcrumbs')
|
|
{{ Breadcrumbs::render('persetujuan-penawaran') }}
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
|
|
<div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="5" data-datatable-state-save="false" id="persetujuan-penawaran-table" data-api-url="{{ route('persetujuan-penawaran.datatables') }}">
|
|
<div class="card-header py-5 flex-wrap">
|
|
<h3 class="card-title">
|
|
Daftar Persetujuan Penawaran
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2 lg:gap-5">
|
|
<div class="flex">
|
|
<label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
|
|
<input placeholder="Search Persetujuan Penawaran" id="search" type="text" value="">
|
|
</label>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2.5">
|
|
<div class="h-[24px] border border-r-gray-200"></div>
|
|
<a class="btn btn-sm btn-light" href="#"> Export to Excel </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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">
|
|
<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="nomor_proposal_penawaran">
|
|
<span class="sort"> <span class="sort-label"> Nomor Proposal </span>
|
|
<span class="sort-icon"> </span> </span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="tanggal_proposal_penawaran">
|
|
<span class="sort"> <span class="sort-label"> Tanggal Proposal </span>
|
|
<span class="sort-icon"> </span> </span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="biaya_final">
|
|
<span class="sort"> <span class="sort-label"> Biaya Final </span>
|
|
<span class="sort-icon"> </span> </span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="sla_resume">
|
|
<span class="sort"> <span class="sort-label"> SLA Resume </span>
|
|
<span class="sort-icon"> </span> </span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="sla_final">
|
|
<span class="sort"> <span class="sort-label"> SLA Final </span>
|
|
<span class="sort-icon"> </span> </span>
|
|
</th>
|
|
<th class="min-w-[150px]" data-datatable-column="catatan">
|
|
<span class="sort"> <span class="sort-label"> Catatan </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>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script type="module">
|
|
const element = document.querySelector('#persetujuan-penawaran-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();
|
|
},
|
|
},
|
|
nomor_registrasi: {
|
|
title: 'Nomor Registrasi',
|
|
},
|
|
nama_debitur: {
|
|
title: 'Nama Debitur',
|
|
render: (item, data) => {
|
|
return `${data.debiture.name}`;
|
|
},
|
|
},
|
|
nomor_proposal_penawaran: {
|
|
title: 'Nomor Proposal',
|
|
render: (item, data) => {
|
|
return `${data.penawaran_tender.detail.no_proposal}`;
|
|
},
|
|
},
|
|
tanggal_proposal_penawaran: {
|
|
title: 'Tanggal Proposal',
|
|
render: (item, data) => {
|
|
return `${data.penawaran_tender.detail.tgl_proposal}`;
|
|
},
|
|
|
|
},
|
|
biaya_final: {
|
|
title: 'Biaya Final',
|
|
render: (item, data) => {
|
|
return `${data.penawaran_tender.detail.biaya_penawaran}`;
|
|
},
|
|
},
|
|
sla_resume: {
|
|
title: 'SLA Resume',
|
|
},
|
|
sla_final: {
|
|
title: 'SLA Final',
|
|
},
|
|
catatan: {
|
|
title: 'Catatan',
|
|
},
|
|
actions: {
|
|
title: 'Action',
|
|
render: (item, data) => {
|
|
return `<div class="flex flex-nowrap justify-center">
|
|
<a class="btn btn-sm btn-icon btn-clear btn-warning" href="persetujuan-penawaran/${data.id}/edit">
|
|
<i class="ki-outline ki-pencil"></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>
|
|
@endpush
|