Fix icon hover colors, text alignment, and UI improvements

This commit is contained in:
Krikorios
2026-02-25 23:25:59 +02:00
parent 00fda3e045
commit fcc4352afa
46 changed files with 4011 additions and 600 deletions
+39 -6
View File
@@ -484,6 +484,39 @@
document.getElementById('filter-date-from').addEventListener('change', loadBookings);
document.getElementById('filter-date-to').addEventListener('change', loadBookings);
document.getElementById('bookings-search').addEventListener('input', filterBookings);
document.getElementById('bookings-table-body').addEventListener('click', function(event) {
const actionBtn = event.target.closest('[data-action]');
if (actionBtn) {
event.stopPropagation();
const { action, id } = actionBtn.dataset;
if (action === 'select-booking' && id) {
selectBooking(id);
} else if (action === 'confirm-booking' && id) {
confirmBooking(id);
} else if (action === 'cancel-booking' && id) {
cancelBooking(id);
}
return;
}
const row = event.target.closest('[data-row-action="select-booking"]');
if (row && row.dataset.id) {
selectBooking(row.dataset.id);
}
});
document.getElementById('booking-details').addEventListener('click', function(event) {
const actionBtn = event.target.closest('[data-action]');
if (!actionBtn) return;
const { action, id } = actionBtn.dataset;
if (action === 'confirm-booking' && id) {
confirmBooking(id);
} else if (action === 'cancel-booking' && id) {
cancelBooking(id);
}
});
}
async function loadBookings() {
@@ -536,7 +569,7 @@
const statusClass = `status-${booking.status}`;
return `
<tr class="booking-row" data-id="${booking.id}" onclick="selectBooking('${booking.id}')">
<tr class="booking-row" data-id="${booking.id}" data-row-action="select-booking">
<td>
<div style="font-weight: 600;">${formattedDate}</div>
<div style="font-size: 0.75rem; color: var(--gray-500);">${date.toLocaleDateString('en-US', { weekday: 'long' })}</div>
@@ -550,14 +583,14 @@
<td>${formatService(booking.service_interest)}</td>
<td><span class="status-badge ${statusClass}">${booking.status}</span></td>
<td>
<button class="action-btn view" onclick="event.stopPropagation(); selectBooking('${booking.id}')">
<button class="action-btn view" data-action="select-booking" data-id="${booking.id}">
<i class="fas fa-eye"></i>
</button>
${booking.status === 'pending' ? `
<button class="action-btn confirm" onclick="event.stopPropagation(); confirmBooking('${booking.id}')">
<button class="action-btn confirm" data-action="confirm-booking" data-id="${booking.id}">
<i class="fas fa-check"></i>
</button>
<button class="action-btn cancel" onclick="event.stopPropagation(); cancelBooking('${booking.id}')">
<button class="action-btn cancel" data-action="cancel-booking" data-id="${booking.id}">
<i class="fas fa-times"></i>
</button>
` : ''}
@@ -644,10 +677,10 @@
${selectedBooking.status === 'pending' ? `
<div class="booking-actions">
<button class="btn btn-success" onclick="confirmBooking('${selectedBooking.id}')">
<button class="btn btn-success" data-action="confirm-booking" data-id="${selectedBooking.id}">
<i class="fas fa-check"></i> Confirm Booking
</button>
<button class="btn btn-danger" onclick="cancelBooking('${selectedBooking.id}')">
<button class="btn btn-danger" data-action="cancel-booking" data-id="${selectedBooking.id}">
<i class="fas fa-times"></i> Cancel Booking
</button>
</div>