Fix icon hover colors, text alignment, and UI improvements
This commit is contained in:
+39
-6
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user