Add booking system with calendar and email notifications (v0.3.0)
All checks were successful
Create Release Package / build-release (push) Successful in 1m5s
All checks were successful
Create Release Package / build-release (push) Successful in 1m5s
- Booking Custom Post Type with full management features - Room and guest relationship tracking - Check-in/check-out date management with validation - Booking status workflow (pending, confirmed, checked_in, checked_out, cancelled) - Automatic price calculation using existing Calculator - Availability system with real-time conflict detection - AJAX endpoint for instant availability validation - Calendar admin page with monthly view and room/building filters - Color-coded booking status display with legend - Email notifications for new bookings, confirmations, and cancellations - HTML email templates with placeholder-based system - Auto-generated booking references (BNB-YYYY-NNNNN) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -323,3 +323,368 @@
|
||||
.bnb-season-form input[type="text"].small-text {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Booking System Styles
|
||||
========================================================================== */
|
||||
|
||||
/* Booking Info Display */
|
||||
.bnb-booking-info {
|
||||
padding: 8px 12px;
|
||||
background: #f6f7f7;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bnb-booking-info.bnb-checking {
|
||||
color: #646970;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bnb-booking-info.bnb-available {
|
||||
background: #d4edda;
|
||||
border-color: #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.bnb-booking-info.bnb-not-available {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.bnb-booking-info .dashicons {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/* Booking Price Display */
|
||||
.bnb-booking-price {
|
||||
padding: 12px 15px;
|
||||
background: #f0f6fc;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bnb-booking-price strong {
|
||||
font-size: 18px;
|
||||
color: #135e96;
|
||||
}
|
||||
|
||||
/* Price Breakdown */
|
||||
.bnb-booking-breakdown,
|
||||
.bnb-breakdown-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.bnb-breakdown-list li {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px dotted #c3c4c7;
|
||||
}
|
||||
|
||||
.bnb-breakdown-list li:last-child {
|
||||
border-bottom: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Price Override Indicator */
|
||||
.bnb-price-override {
|
||||
color: #dba617;
|
||||
font-weight: bold;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Status Preview */
|
||||
.bnb-status-preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bnb-status-timestamp {
|
||||
font-size: 11px;
|
||||
color: #646970;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Required Field Indicator */
|
||||
.required {
|
||||
color: #d63638;
|
||||
}
|
||||
|
||||
/* Booking Admin Columns */
|
||||
.column-room,
|
||||
.column-guest,
|
||||
.column-dates,
|
||||
.column-nights,
|
||||
.column-price {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.column-room small,
|
||||
.column-guest small,
|
||||
.column-dates small {
|
||||
display: block;
|
||||
color: #646970;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Calendar Page Styles
|
||||
========================================================================== */
|
||||
|
||||
/* Calendar Container */
|
||||
.bnb-calendar-container {
|
||||
background: #fff;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Calendar Header */
|
||||
.bnb-calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
background: #f6f7f7;
|
||||
border-bottom: 1px solid #c3c4c7;
|
||||
}
|
||||
|
||||
.bnb-calendar-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.bnb-calendar-nav {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Calendar Filters */
|
||||
.bnb-calendar-filters {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #c3c4c7;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.bnb-calendar-filters label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bnb-calendar-filters select {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* Calendar Grid */
|
||||
.bnb-calendar-grid {
|
||||
padding: 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.bnb-calendar-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.bnb-calendar-table th,
|
||||
.bnb-calendar-table td {
|
||||
border: 1px solid #c3c4c7;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
.bnb-calendar-table th {
|
||||
background: #f6f7f7;
|
||||
font-weight: 600;
|
||||
padding: 8px 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bnb-calendar-table th.room-header {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Calendar Day Cell */
|
||||
.bnb-calendar-day {
|
||||
height: 35px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.past {
|
||||
background: #f0f0f1;
|
||||
color: #a7aaad;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.today {
|
||||
background: #f0f6fc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.today::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #2271b1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.available {
|
||||
background: #d4edda;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.booked {
|
||||
background: #d63638;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.booked.booking-hover {
|
||||
background: #a02424;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.booked-start {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.booked-end {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Booking Status Colors in Calendar */
|
||||
.bnb-calendar-day.status-pending {
|
||||
background: #dba617;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.status-confirmed {
|
||||
background: #00a32a;
|
||||
}
|
||||
|
||||
.bnb-calendar-day.status-checked_in {
|
||||
background: #72aee6;
|
||||
}
|
||||
|
||||
/* Room Row in Multi-Room Calendar */
|
||||
.bnb-calendar-room {
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
background: #f6f7f7;
|
||||
}
|
||||
|
||||
.bnb-calendar-room small {
|
||||
font-weight: normal;
|
||||
color: #646970;
|
||||
}
|
||||
|
||||
/* Calendar Legend */
|
||||
.bnb-calendar-legend {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #c3c4c7;
|
||||
background: #f6f7f7;
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-color {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-color.available {
|
||||
background: #d4edda;
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-color.booked {
|
||||
background: #d63638;
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-color.pending {
|
||||
background: #dba617;
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-color.confirmed {
|
||||
background: #00a32a;
|
||||
}
|
||||
|
||||
.bnb-calendar-legend-color.checked-in {
|
||||
background: #72aee6;
|
||||
}
|
||||
|
||||
/* Tooltip for booking details */
|
||||
.bnb-calendar-day[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* No Rooms Message */
|
||||
.bnb-no-rooms {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: #646970;
|
||||
}
|
||||
|
||||
.bnb-no-rooms .dashicons {
|
||||
font-size: 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Calendar Single Room View */
|
||||
.bnb-calendar-single-room .bnb-calendar-day {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bnb-calendar-single-room .bnb-calendar-day.booked .guest-name {
|
||||
font-size: 10px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media screen and (max-width: 782px) {
|
||||
.bnb-calendar-filters {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bnb-calendar-filters select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bnb-calendar-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user