1. add button papar margin that change to shows information about margin.

2. fix the nilai marhun not same with the calculation in javascript. we use all from PHP
This commit is contained in:
Hafifie PKB
2026-03-11 01:01:25 +08:00
parent 0a19fa3d4b
commit 55168f350a
2 changed files with 426 additions and 133 deletions
+201 -6
View File
@@ -24,6 +24,9 @@
</div>
<div class="col-12 text-right mb-2">
<button type="button" style="margin:auto" class="btn btn-primary" data-toggle="modal" data-target="#daftar_marhun">Daftar Marhun</button>
<button type="button" id="toggleTableBtn" class="btn btn-info ml-2">
<i class="fas fa-exchange-alt"></i> Papar Margin
</button>
</div>
<div class="card">
<div class="card-body">
@@ -53,6 +56,33 @@
<th colspan="5"></th>
</tfoot>
</table>
<!-- Margin Summary Table (Hidden by default) -->
<table class="table table-striped table-hover text-center" id="marginTable" style="display: none;">
<thead class="thead-dark">
<tr>
<th>Bil</th>
<th>Karat</th>
<th>Nilai Marhun</th>
<th>Margin Teller (%)</th>
<th>Margin PC (%)</th>
<th>Nilai Marhun Teller</th>
<th>Nilai Marhun PC</th>
</tr>
</thead>
<tbody id="marginTableBody">
<!-- Dynamic content will be inserted here -->
</tbody>
<tfoot class="thead-success">
<tr>
<th colspan="2" class="text-center">Jumlah</th>
<th id="totalNilaiMarhunMargin"></th>
<th colspan="2"></th>
<th id="totalNilaiTellerMargin"></th>
<th id="totalNilaiPCMargin"></th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card">
@@ -511,7 +541,21 @@
"visible": false,
"searchable": false
}
]
],
"language": {
"lengthMenu": "Papar _MENU_ rekod setiap halaman",
"zeroRecords": "Tiada rekod dijumpai",
"info": "Memapar halaman _PAGE_ dari _PAGES_",
"infoEmpty": "Tiada rekod tersedia",
"infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
"search": "Cari:",
"paginate": {
"first": "Pertama",
"last": "Akhir",
"next": "Seterusnya",
"previous": "Sebelumnya"
}
}
});
$(".select2").select2({
@@ -658,6 +702,9 @@
$('#keuntungan_sebulan').val(formatter.format(keuntungan_sebulan.toFixed(2)));
$('#keuntungan_6bln').val(formatter.format(keuntungan_6bln.toFixed(2)));
var max_teller = 0;
var max_pelulus = 0;
$.ajax({
method:'GET',
url: api_url + '/api/maxpinjaman',
@@ -668,19 +715,19 @@
success:function(data){
$.each(data,function(index,pinjaman){
if(pinjaman['user_type'] == 'teller'){
if (pinjaman['user_type'] == 'teller') {
pinjaman_teller = Number(pinjaman['max']);
max_teller = pinjaman['teller_pinjaman'];
}
if(pinjaman['user_type'] == 'khazanah'){
if (pinjaman['user_type'] == 'khazanah') {
pinjaman_pelulus = Number(pinjaman['max']);
max_pelulus = pinjaman['pc_pinjaman'];
}
});
$('.span-pinjaman-max-pelulus').text(formatter.format(pinjaman_pelulus) + ' %');
$('.span-pinjaman-max').text(formatter.format(pinjaman_teller) + ' %');
var max_teller = total_nilai_marhun * (pinjaman_teller/100);
var max_pelulus = total_nilai_marhun * (pinjaman_pelulus/100);
$('#pembiayaan_max_teller').val(formatter.format(max_teller));
$('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus.toFixed(2)));
$('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus));
}
});
}
@@ -1721,5 +1768,153 @@
}
}
}
// Toggle Table Functionality
let isMarginTableVisible = false;
$('#toggleTableBtn').on('click', function() {
if (!isMarginTableVisible) {
// Show margin table, hide main table
$('#myTable_wrapper').hide();
$('#marginTable').show();
$(this).html('<i class="fas fa-exchange-alt"></i> Papar Marhun');
loadMarginData();
isMarginTableVisible = true;
} else {
// Show main table, hide margin table
$('#marginTable_wrapper').hide();
$('#myTable_wrapper').show();
$(this).html('<i class="fas fa-exchange-alt"></i> Papar Margin');
isMarginTableVisible = false;
}
});
function loadMarginData() {
let marginData = [];
let totalNilaiMarhun = 0;
let totalNilaiTeller = 0;
let totalNilaiPC = 0;
// Process each individual row from the main table
let rowsData = [];
tablemarhun.rows().data().each(function(row, index) {
let recno = row[1]; // Recno column
let karat = row[4]; // Karat column
let nilaiMarhun = parseFloat(row[3].replace(/[^0-9.-]+/g, "")); // Nilai Marhun column
rowsData.push({
index: index,
recno: recno,
karat: karat,
nilaiMarhun: nilaiMarhun
});
});
let bil = 1;
let processedCount = 0;
let totalEntries = rowsData.length;
rowsData.forEach((rowData) => {
// Call API to get margin data for each individual item
$.ajax({
url: '{{ config("api.url") }}/api/maxmutuemas/specific',
type: 'GET',
data: { karat: rowData.karat, nilaimarhun: rowData.nilaiMarhun },
success: function(response) {
if (response && response.karat) {
let nilaiTeller = parseFloat(response.maxteller) || 0;
let nilaiPC = parseFloat(response.maxpc) || 0;
marginData.push({
index: rowData.index,
bil: rowData.index + 1,
recno: rowData.recno,
karat: rowData.karat,
nilaiMarhun: rowData.nilaiMarhun,
marginTeller: response.teller,
marginPC: response.pc,
nilaiTeller: nilaiTeller,
nilaiPC: nilaiPC
});
totalNilaiMarhun += rowData.nilaiMarhun;
totalNilaiTeller += nilaiTeller;
totalNilaiPC += nilaiPC;
}
processedCount++;
if (processedCount === totalEntries) {
// Sort by original index to maintain order
marginData.sort((a, b) => a.index - b.index);
populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
}
},
error: function() {
processedCount++;
if (processedCount === totalEntries) {
// Sort by original index to maintain order
marginData.sort((a, b) => a.index - b.index);
populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
}
}
});
});
}
let marginDataTable = null;
function populateMarginTable(data, totalMarhun, totalTeller, totalPC) {
// If DataTable already exists, destroy it first
if (marginDataTable !== null) {
marginDataTable.destroy();
marginDataTable = null;
}
let tbody = $('#marginTableBody');
tbody.empty();
data.forEach(function(item) {
let row = `
<tr>
<td>${item.bil}</td>
<td>${item.karat}</td>
<td>RM${item.nilaiMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td>${item.marginTeller}%</td>
<td>${item.marginPC}%</td>
<td>RM${item.nilaiTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td>RM${item.nilaiPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
</tr>
`;
tbody.append(row);
});
// Initialize DataTable
marginDataTable = $('#marginTable').DataTable({
"pageLength": 10,
"ordering": false,
"order": [[ 0, "asc" ]],
"responsive": true,
"language": {
"lengthMenu": "Papar _MENU_ rekod setiap halaman",
"zeroRecords": "Tiada rekod dijumpai",
"info": "Memapar halaman _PAGE_ dari _PAGES_",
"infoEmpty": "Tiada rekod tersedia",
"infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
"search": "Cari:",
"paginate": {
"first": "Pertama",
"last": "Akhir",
"next": "Seterusnya",
"previous": "Sebelumnya"
}
},
"footerCallback": function (row, data, start, end, display) {
// Update footer totals
$('#totalNilaiMarhunMargin').text('RM' + totalMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
$('#totalNilaiTellerMargin').text('RM' + totalTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
$('#totalNilaiPCMargin').text('RM' + totalPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
}
});
}
</script>
@endsection
+225 -127
View File
@@ -63,6 +63,14 @@
</div>
<div class="card">
<div class="card-body">
<!-- Toggle Button -->
<div class="mb-3">
<button type="button" class="btn btn-info" id="toggleTableBtn">
<i class="fas fa-exchange-alt"></i> Papar Margin
</button>
</div>
<!-- Main Marhun Table -->
<table class="table table-striped table-hover text-center" id="myTable">
<thead class="thead-dark">
<tr>
@@ -89,6 +97,35 @@
<th colspan="5"></th>
</tfoot>
</table>
<!-- Margin Summary Table (Hidden by default) -->
<table class="table table-striped table-hover text-center" id="marginTable" style="display: none;">
<thead class="thead-dark">
<tr>
<th>Bil</th>
<th>Karat</th>
<th>Nilai Marhun</th>
<th>Margin Teller (%)</th>
<th>Margin PC (%)</th>
<th>Nilai Marhun Teller</th>
<th>Nilai Marhun PC</th>
</tr>
</thead>
<tbody id="marginTableBody">
<!-- Data will be populated by JavaScript -->
</tbody>
<tfoot class="thead-dark">
<tr>
<th>Jumlah</th>
<th></th>
<th id="totalNilaiMarhunMargin"></th>
<th></th>
<th></th>
<th id="totalNilaiTellerMargin"></th>
<th id="totalNilaiPCMargin"></th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card">
@@ -472,21 +509,34 @@
})
}
var tablemarhun = $('#myTable').DataTable({
"ordering": false,
"columnDefs": [
{
"targets": [ 1 ],
"visible": false,
"searchable": false
var tablemarhun = $('#myTable').DataTable({
"ordering": false,
"columnDefs": [{
"targets": [1],
"visible": false,
"searchable": false
},
{
"targets": [7],
"visible": true,
"searchable": false
}
],
"language": {
"lengthMenu": "Papar _MENU_ rekod setiap halaman",
"zeroRecords": "Tiada rekod dijumpai",
"info": "Memapar halaman _PAGE_ dari _PAGES_",
"infoEmpty": "Tiada rekod tersedia",
"infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
"search": "Cari:",
"paginate": {
"first": "Pertama",
"last": "Akhir",
"next": "Seterusnya",
"previous": "Sebelumnya"
}
},
{
"targets": [ 7 ],
"visible": false,
"searchable": false
}
]
});
});
$(".select2").select2({
dropdownParent: $('#daftar_marhun'),
@@ -565,7 +615,7 @@
marhun_detail['harga'],
status_tag_permata,
marhun_detail['berat_batu_permata'],
"<div class='buttonpunya text-center'><button onclick='viewmarhun(this)' class='btn btn-info'><i class='fas fa-eye'></i></button> <button onclick='editmarhun(this)' class='btn btn-primary'><i class='fas fa-edit'></i></button> <button onclick='deletemarhun(this)' class='btn btn-danger'><i class='fas fa-trash-alt'></i></button></div>"
"<div class='buttonpunya text-center'><button onclick='editmarhun(this)' class='btn btn-primary'><i class='fas fa-edit'></i></button> <button onclick='deletemarhun(this)' class='btn btn-danger'><i class='fas fa-trash-alt'></i></button></div>"
]).draw();
counter = counter + 1;
});
@@ -576,13 +626,7 @@
$('#bilangan_marhun').val(formatter.format(counter - 1));
$('#bilangan_jumlah_kuantiti').val(formatter.format(total_kuantiti));
$('#jumlah_nilai_marhun').val(formatter.format(jumlah_nilai_marhun));
// if(total_nilai_marhun > 0 && total_nilai_marhun < 401){
// kadarupah = 1.2/100;
// }else if(total_nilai_marhun >= 401 && total_nilai_marhun < 2001){
// kadarupah = 1.5/100;
// }else if(total_nilai_marhun >= 2001 ){
// kadarupah = 1.7/100;
// }
$.ajax({
method:'GET',
@@ -597,11 +641,14 @@
}
});
$('#total_nilai_marhun').val(formatter.format(total_nilai_marhun));
$('#marhun_detail').val(marhun_details);
$('#total_berat').val(formatter.format(total_berat));
$('#kadarkeuntungan').val(formatter.format(kadarupah));
$('#kuantiti_marhun').val(formatter.format(jumlah_marhun));
$('#total_nilai_marhun').val(formatter.format(total_nilai_marhun));
$('#marhun_detail').val(marhun_details);
$('#total_berat').val(formatter.format(total_berat));
$('#kadarkeuntungan').val(formatter.format(kadarupah));
$('#kuantiti_marhun').val(formatter.format(jumlah_marhun));
var max_teller = 0;
var max_pelulus = 0;
$.ajax({
method: 'GET',
@@ -614,17 +661,17 @@
$.each(data, function(index, pinjaman) {
if (pinjaman['user_type'] == 'teller') {
pinjaman_teller = Number(pinjaman['max']);
max_teller = pinjaman['teller_pinjaman'];
}
if (pinjaman['user_type'] == 'khazanah') {
pinjaman_pelulus = Number(pinjaman['max']);
max_pelulus = pinjaman['pc_pinjaman'];
}
});
$('.span-pinjaman-max-pelulus').text(formatter.format(pinjaman_pelulus) + ' %');
$('.span-pinjaman-max').text(formatter.format(pinjaman_teller) + ' %');
var max_teller = total_nilai_marhun * (pinjaman_teller / 100);
var max_pelulus = total_nilai_marhun * (pinjaman_pelulus / 100);
$('#pembiayaan_max_teller').val(formatter.format(max_teller.toFixed(2)));
$('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus.toFixed(2)));
$('#pembiayaan_max_teller').val(formatter.format(max_teller));
$('#pembiyaan_max_pelulus').val(formatter.format(max_pelulus));
}
});
}
@@ -1627,102 +1674,6 @@
});
}
function viewmarhun(e){
let selectedrow = $(e).closest('tr');
let recno = tablemarhun.row(selectedrow).data();
let nm = recno[3];
let karat = recno[4];
let berat = recno[5];
let harga = recno[8];
let nota = recno[7];
let kuantiti = recno[6];
let jenismarhun = recno[2];
let beratpermata = recno[10];
// Call API to get specific MaxMutuEmas data by karat
$.ajax({
url: '{{ config("api.url") }}/api/maxmutuemas/specific',
type: 'GET',
data: { karat: karat,nilaimarhun: nm },
success: function(response) {
let marginInfo = '';
let marginTable = '';
if (response && response.karat) {
marginTable = `
<table class="table table-bordered table-sm mt-3">
<thead class="thead-light">
<tr><th colspan="2" class="text-center"><strong>Maklumat Margin</strong></th></tr>
</thead>
<tbody>
<tr><td><strong>Margin Teller</strong></td><td>${response.teller}%</td></tr>
<tr><td><strong>Margin PC</strong></td><td>${response.pc}%</td></tr>
<tr><td><strong>Nilai Marhun Teller</strong></td><td>${parseFloat(response.maxteller).toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td></tr>
<tr><td><strong>Nilai Marhun PC</strong></td><td>${parseFloat(response.maxpc).toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td></tr>
</tbody>
</table>
`;
}
let details = `
<table class="table table-bordered table-sm">
<thead class="thead-light">
<tr><th colspan="2" class="text-center"><strong>Maklumat Marhun</strong></th></tr>
</thead>
<tbody>
<tr><td><strong>Jenis Marhun</strong></td><td>${jenismarhun}</td></tr>
<tr><td><strong>Nilai Marhun Asal</strong></td><td>${nm}</td></tr>
<tr><td><strong>Karat</strong></td><td>${karat}</td></tr>
<tr><td><strong>Berat</strong></td><td>${berat}g</td></tr>
<tr><td><strong>Harga</strong></td><td>RM${harga}</td></tr>
</tbody>
</table>
${marginTable}
`;
Swal.fire({
title: 'Maklumat Marhun & Margin',
html: details,
icon: 'info',
confirmButtonText: 'OK',
width: '600px'
});
},
error: function(xhr) {
// If API call fails, show basic marhun info only
let details = `
<table class="table table-bordered table-sm">
<thead class="thead-light">
<tr><th colspan="2" class="text-center"><strong>Maklumat Marhun</strong></th></tr>
</thead>
<tbody>
<tr><td><strong>Jenis Marhun</strong></td><td>${jenismarhun}</td></tr>
<tr><td><strong>Nama</strong></td><td>${nm}</td></tr>
<tr><td><strong>Karat</strong></td><td>${karat}</td></tr>
<tr><td><strong>Berat</strong></td><td>${berat}g</td></tr>
<tr><td><strong>Kuantiti</strong></td><td>${kuantiti}</td></tr>
<tr><td><strong>Harga</strong></td><td>RM${harga}</td></tr>
<tr><td><strong>Nota</strong></td><td>${nota}</td></tr>
<tr><td><strong>Berat Batu Permata</strong></td><td>${beratpermata}g</td></tr>
</tbody>
</table>
<div class="alert alert-warning text-center">
<em>Maklumat margin tidak tersedia</em>
</div>
`;
Swal.fire({
title: 'Maklumat Marhun',
html: details,
icon: 'info',
confirmButtonText: 'OK',
width: '600px'
});
}
});
}
function editmarhun(e){
let norujuk = $('#norujukan').val();
let selectedrow = $(e).closest('tr');
@@ -1959,5 +1910,152 @@
}
});
// Toggle Table Functionality
let isMarginTableVisible = false;
$('#toggleTableBtn').on('click', function() {
if (!isMarginTableVisible) {
// Show margin table, hide main table
$('#myTable_wrapper').hide();
$('#marginTable').show();
$(this).html('<i class="fas fa-exchange-alt"></i> Papar Marhun');
loadMarginData();
isMarginTableVisible = true;
} else {
// Show main table, hide margin table
$('#marginTable_wrapper').hide();
$('#myTable_wrapper').show();
$(this).html('<i class="fas fa-exchange-alt"></i> Papar Margin');
isMarginTableVisible = false;
}
});
function loadMarginData() {
let marginData = [];
let totalNilaiMarhun = 0;
let totalNilaiTeller = 0;
let totalNilaiPC = 0;
// Process each individual row from the main table
let rowsData = [];
tablemarhun.rows().data().each(function(row, index) {
console.log(row);
let recno = row[1]; // Recno column
let karat = row[4]; // Karat column
let nilaiMarhun = parseFloat(row[3].replace(/[^0-9.-]+/g, "")); // Nilai Marhun column
rowsData.push({
index: index,
recno: recno,
karat: karat,
nilaiMarhun: nilaiMarhun
});
});
let bil = 1;
let processedCount = 0;
let totalEntries = rowsData.length;
rowsData.forEach((rowData) => {
// Call API to get margin data for each individual item
$.ajax({
url: '{{ config("api.url") }}/api/maxmutuemas/specific',
type: 'GET',
data: { karat: rowData.karat, nilaimarhun: rowData.nilaiMarhun },
success: function(response) {
if (response && response.karat) {
let nilaiTeller = parseFloat(response.maxteller) || 0;
let nilaiPC = parseFloat(response.maxpc) || 0;
marginData.push({
index: rowData.index,
bil: rowData.index + 1,
recno: rowData.recno,
karat: rowData.karat,
nilaiMarhun: rowData.nilaiMarhun,
marginTeller: response.teller,
marginPC: response.pc,
nilaiTeller: nilaiTeller,
nilaiPC: nilaiPC
});
totalNilaiMarhun += rowData.nilaiMarhun;
totalNilaiTeller += nilaiTeller;
totalNilaiPC += nilaiPC;
}
processedCount++;
if (processedCount === totalEntries) {
// Sort by original index to maintain order
marginData.sort((a, b) => a.index - b.index);
populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
}
},
error: function() {
processedCount++;
if (processedCount === totalEntries) {
// Sort by original index to maintain order
marginData.sort((a, b) => a.index - b.index);
populateMarginTable(marginData, totalNilaiMarhun, totalNilaiTeller, totalNilaiPC);
}
}
});
});
}
let marginDataTable = null;
function populateMarginTable(data, totalMarhun, totalTeller, totalPC) {
// If DataTable already exists, destroy it first
if (marginDataTable !== null) {
marginDataTable.destroy();
marginDataTable = null;
}
let tbody = $('#marginTableBody');
tbody.empty();
data.forEach(function(item) {
let row = `
<tr>
<td>${item.bil}</td>
<td>${item.karat}</td>
<td>RM${item.nilaiMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td>${item.marginTeller}%</td>
<td>${item.marginPC}%</td>
<td>RM${item.nilaiTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
<td>RM${item.nilaiPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
</tr>
`;
tbody.append(row);
});
// Initialize DataTable
marginDataTable = $('#marginTable').DataTable({
"pageLength": 10,
"ordering": false,
"order": [[ 0, "asc" ]],
"responsive": true,
"language": {
"lengthMenu": "Papar _MENU_ rekod setiap halaman",
"zeroRecords": "Tiada rekod dijumpai",
"info": "Memapar halaman _PAGE_ dari _PAGES_",
"infoEmpty": "Tiada rekod tersedia",
"infoFiltered": "(ditapis dari _MAX_ jumlah rekod)",
"search": "Cari:",
"paginate": {
"first": "Pertama",
"last": "Akhir",
"next": "Seterusnya",
"previous": "Sebelumnya"
}
},
"footerCallback": function (row, data, start, end, display) {
// Update footer totals
$('#totalNilaiMarhunMargin').text('RM' + totalMarhun.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
$('#totalNilaiTellerMargin').text('RM' + totalTeller.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
$('#totalNilaiPCMargin').text('RM' + totalPC.toLocaleString('en-MY', {minimumFractionDigits: 2, maximumFractionDigits: 2}));
}
});
}
</script>
@endsection