fix styling filter dealer report technician

This commit is contained in:
2025-07-09 11:15:09 +07:00
parent 685c6df82e
commit e468672bbe
2 changed files with 66 additions and 120 deletions

View File

@@ -129,38 +129,6 @@
background-color: #f8f9fa; background-color: #f8f9fa;
} }
/* Button styling */
.btn-primary {
background-color: #007bff;
border-color: #007bff;
font-weight: 500;
transition: all 0.15s ease-in-out;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn i {
margin-right: 0.5rem;
}
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
.row.mb-4 { .row.mb-4 {

View File

@@ -62,55 +62,6 @@
text-align: center; text-align: center;
} }
/* Select2 styling - Fixed to prevent conflicts */
.select2-container--default .select2-selection--single {
height: 38px !important;
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
background-color: #ffffff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 36px !important;
padding-left: 12px !important;
color: #495057 !important;
background-color: transparent !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px !important;
background-color: transparent !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
background-color: #ffffff !important;
color: #495057 !important;
}
.select2-dropdown {
border: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
background-color: #ffffff !important;
}
.select2-container--default .select2-results__option {
background-color: #ffffff !important;
color: #495057 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #007bff !important;
color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #e9ecef !important;
color: #495057 !important;
}
/* Form label styling */ /* Form label styling */
.form-label { .form-label {
font-weight: 600; font-weight: 600;
@@ -299,7 +250,7 @@ $(document).ready(function() {
if (typeof $.fn.select2 !== 'undefined') { if (typeof $.fn.select2 !== 'undefined') {
$('#filter-dealer').select2({ $('#filter-dealer').select2({
placeholder: 'Pilih...', placeholder: 'Semua Dealer',
allowClear: true, allowClear: true,
width: '100%' width: '100%'
}); });
@@ -336,13 +287,10 @@ $(document).ready(function() {
console.log('Default set to "Semua Dealer"'); console.log('Default set to "Semua Dealer"');
$('#default-dealer-info').text('Pilih dealer untuk memfilter data atau biarkan "Semua Dealer" untuk melihat data lengkap.'); $('#default-dealer-info').text('Pilih dealer untuk memfilter data atau biarkan "Semua Dealer" untuk melihat data lengkap.');
// Load initial DataTable only once // Load initial mechanics and then initialize DataTable
if (!isInitialized) { if (!isInitialized) {
console.log('Dealers loaded, initializing DataTable...'); console.log('Dealers loaded, loading initial mechanics...');
setTimeout(function() { loadInitialMechanics();
initializeDataTable();
isInitialized = true;
}, 100);
} }
} else { } else {
toastr.error('Gagal memuat data dealer'); toastr.error('Gagal memuat data dealer');
@@ -356,6 +304,43 @@ $(document).ready(function() {
}); });
} }
function loadInitialMechanics() {
// Get initial filter values (empty dealer, default dates)
let dealerId = '';
const startDate = $('#filter-start-date').val();
const endDate = $('#filter-end-date').val();
// Show loading overlay
showLoadingOverlay("Memuat data laporan teknisi...");
// Get mechanics first, then initialize DataTable
$.ajax({
url: '{{ route("reports.technician.data") }}',
type: 'GET',
data: { dealer_id: dealerId, start_date: startDate, end_date: endDate },
success: function(response) {
if (response.status === 'success' && Array.isArray(response.mechanics)) {
mechanics = response.mechanics;
console.log('Initial mechanics loaded:', mechanics.length);
// Now initialize DataTable with mechanics ready
updateTableStructureWithMechanics();
isInitialized = true;
} else {
console.warn('Invalid mechanics data, using fallback');
mechanics = [];
updateTableStructureWithMechanics();
isInitialized = true;
}
},
error: function() {
console.warn('Error loading initial mechanics, using fallback');
mechanics = [];
updateTableStructureWithMechanics();
isInitialized = true;
}
});
}
function loadTechnicianData() { function loadTechnicianData() {
console.log('loadTechnicianData called'); console.log('loadTechnicianData called');
@@ -542,15 +527,6 @@ $(document).ready(function() {
dom: '<"row"<"col-sm-12"f>>' + dom: '<"row"<"col-sm-12"f>>' +
'<"row"<"col-sm-12"tr>>' + '<"row"<"col-sm-12"tr>>' +
'<"row"<"col-sm-12"i>>', '<"row"<"col-sm-12"i>>',
language: {
emptyTable: "Tidak ada data yang tersedia",
info: "Menampilkan _TOTAL_ entri",
infoEmpty: "Menampilkan 0 entri",
infoFiltered: "(difilter dari _MAX_ total entri)",
search: "Cari:",
zeroRecords: "Tidak ditemukan data yang sesuai",
processing: "Memuat data..."
},
initComplete: function() { initComplete: function() {
try { try {
var api = this.api(); var api = this.api();
@@ -778,10 +754,10 @@ $(document).ready(function() {
dataSrc: function(json) { dataSrc: function(json) {
console.log('DataTable response:', json); console.log('DataTable response:', json);
// Update mechanics from response // Don't update mechanics from datatable response - use existing mechanics
if (json.mechanics && Array.isArray(json.mechanics)) { // if (json.mechanics && Array.isArray(json.mechanics)) {
mechanics = json.mechanics; // mechanics = json.mechanics;
} // }
return json.data || []; return json.data || [];
} }
@@ -794,15 +770,6 @@ $(document).ready(function() {
dom: '<"row"<"col-sm-12"f>>' + dom: '<"row"<"col-sm-12"f>>' +
'<"row"<"col-sm-12"tr>>' + '<"row"<"col-sm-12"tr>>' +
'<"row"<"col-sm-12"i>>', '<"row"<"col-sm-12"i>>',
language: {
emptyTable: "Tidak ada data yang tersedia",
info: "Menampilkan _TOTAL_ entri",
infoEmpty: "Menampilkan 0 entri",
infoFiltered: "(difilter dari _MAX_ total entri)",
search: "Cari:",
zeroRecords: "Tidak ditemukan data yang sesuai",
processing: "Memuat data..."
},
initComplete: function() { initComplete: function() {
try { try {
var api = this.api(); var api = this.api();
@@ -911,13 +878,11 @@ $(document).ready(function() {
// Sum up values from all rows // Sum up values from all rows
data.forEach(function(row, index) { data.forEach(function(row, index) {
console.log(`Row ${index}:`, row);
if (Array.isArray(mechanics) && mechanics.length > 0) { if (Array.isArray(mechanics) && mechanics.length > 0) {
mechanics.forEach(function(mechanic) { mechanics.forEach(function(mechanic) {
if (mechanic && mechanic.id) { if (mechanic && mechanic.id) {
const value = parseInt(row[`mechanic_${mechanic.id}_total`] || 0); const value = parseInt(row[`mechanic_${mechanic.id}_total`] || 0);
totals[`mechanic_${mechanic.id}_total`] += value; totals[`mechanic_${mechanic.id}_total`] += value;
console.log(`Mechanic ${mechanic.name}: adding ${value}, total now: ${totals[`mechanic_${mechanic.id}_total`]}`);
} }
}); });
} }
@@ -982,7 +947,6 @@ $(document).ready(function() {
const $cell = $cells.eq(cellIndex); const $cell = $cells.eq(cellIndex);
const value = parseInt($cell.text() || 0); const value = parseInt($cell.text() || 0);
totals[`mechanic_${mechanic.id}_total`] += value; totals[`mechanic_${mechanic.id}_total`] += value;
console.log(`Row ${index}, Mechanic ${mechanic.name}: cell ${cellIndex} = ${value}, total now: ${totals[`mechanic_${mechanic.id}_total`]}`);
} }
}); });
} }
@@ -1098,7 +1062,8 @@ $(document).ready(function() {
// Reset initialization flag to allow re-initialization // Reset initialization flag to allow re-initialization
isInitialized = false; isInitialized = false;
// Ambil mechanics terbaru dari endpoint filter
// Get mechanics first, then initialize DataTable
let dealerId = ''; let dealerId = '';
if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) { if (typeof $.fn.select2 !== 'undefined' && $('#filter-dealer').data('select2')) {
dealerId = $('#filter-dealer').select2('val') || ''; dealerId = $('#filter-dealer').select2('val') || '';
@@ -1107,6 +1072,7 @@ $(document).ready(function() {
} }
const startDate = $('#filter-start-date').val(); const startDate = $('#filter-start-date').val();
const endDate = $('#filter-end-date').val(); const endDate = $('#filter-end-date').val();
$.ajax({ $.ajax({
url: '{{ route("reports.technician.data") }}', url: '{{ route("reports.technician.data") }}',
type: 'GET', type: 'GET',
@@ -1114,13 +1080,18 @@ $(document).ready(function() {
success: function(response) { success: function(response) {
if (response.status === 'success' && Array.isArray(response.mechanics)) { if (response.status === 'success' && Array.isArray(response.mechanics)) {
mechanics = response.mechanics; mechanics = response.mechanics;
updateTableStructureWithMechanics(); // DataTable akan rebuild dengan mechanics baru console.log('Filter mechanics loaded:', mechanics.length);
updateTableStructureWithMechanics();
} else { } else {
initializeDataTable(); // fallback console.warn('Invalid mechanics data, using fallback');
mechanics = [];
updateTableStructureWithMechanics();
} }
}, },
error: function() { error: function() {
initializeDataTable(); console.warn('Error loading mechanics, using fallback');
mechanics = [];
updateTableStructureWithMechanics();
} }
}); });
}); });
@@ -1155,10 +1126,12 @@ $(document).ready(function() {
dataTable.destroy(); dataTable.destroy();
dataTable = null; dataTable = null;
} }
// Ambil mechanics terbaru dari endpoint data reset
// Get mechanics first, then initialize DataTable
let dealerId = ''; let dealerId = '';
const startDate = $('#filter-start-date').val(); const startDate = $('#filter-start-date').val();
const endDate = $('#filter-end-date').val(); const endDate = $('#filter-end-date').val();
$.ajax({ $.ajax({
url: '{{ route("reports.technician.data") }}', url: '{{ route("reports.technician.data") }}',
type: 'GET', type: 'GET',
@@ -1166,13 +1139,18 @@ $(document).ready(function() {
success: function(response) { success: function(response) {
if (response.status === 'success' && Array.isArray(response.mechanics)) { if (response.status === 'success' && Array.isArray(response.mechanics)) {
mechanics = response.mechanics; mechanics = response.mechanics;
console.log('Reset mechanics loaded:', mechanics.length);
updateTableStructureWithMechanics(); updateTableStructureWithMechanics();
} else { } else {
initializeDataTable(); console.warn('Invalid mechanics data, using fallback');
mechanics = [];
updateTableStructureWithMechanics();
} }
}, },
error: function() { error: function() {
initializeDataTable(); console.warn('Error loading mechanics, using fallback');
mechanics = [];
updateTableStructureWithMechanics();
} }
}); });
}); });