daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tambah halaman daftar persetujuan penawaran

Browse Source 
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.
This commit is contained in:
Daeng Deni Mardaeni
2024-11-20 22:48:52 +07:00
parent 5fdbe4fc25
commit 666419507f
1 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
resources/views/persetujuan_penawaran/index.blade.php Normal file
View File

@@ -0,0 +1,154 @@
@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