Enhances AI booking optimization with smart slot recommendations
Implements AI-driven time slot selection algorithm for booking system Adds intelligent slot scoring mechanism that considers: - Minimizing calendar gaps - Optimizing employee time utilization - Providing recommended time slots for customers Introduces new AI features across booking interfaces to improve scheduling efficiency
This commit is contained in:
Janus C. H. Knudsen
parent
3b86a6c8b3
commit
2a066c6d14
18 changed files with 4496 additions and 25 deletions
|
|
@ -504,6 +504,58 @@
|
|||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* AI Recommended Slots */
|
||||
.time-slot.recommended {
|
||||
position: relative;
|
||||
border: 2px solid var(--color-green);
|
||||
background: color-mix(in srgb, var(--color-green) 8%, white);
|
||||
}
|
||||
|
||||
.time-slot.recommended:hover:not(.disabled):not(.selected) {
|
||||
background: color-mix(in srgb, var(--color-green) 15%, white);
|
||||
}
|
||||
|
||||
.time-slot.recommended.selected {
|
||||
background: var(--color-green);
|
||||
border-color: var(--color-green);
|
||||
}
|
||||
|
||||
.ai-badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: var(--color-green);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
.ai-badge i {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ai-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: color-mix(in srgb, var(--color-green) 10%, white);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
.ai-info i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
WAITLIST
|
||||
========================================== */
|
||||
|
|
@ -1917,6 +1969,133 @@
|
|||
{ id: "EMP004", name: "Viktor", role: "Junior Stylist", color: "#009688", priceModifier: -100 }
|
||||
];
|
||||
|
||||
// ==========================================
|
||||
// EKSISTERENDE BOOKINGER (Mock data til AI-optimering)
|
||||
// ==========================================
|
||||
const existingBookings = {
|
||||
'EMP001': {
|
||||
'2026-01-06': [
|
||||
{ start: '10:00', end: '11:00', service: 'Dameklip' },
|
||||
{ start: '13:30', end: '14:30', service: 'Herreklip' }
|
||||
],
|
||||
'2026-01-07': [
|
||||
{ start: '09:00', end: '10:30', service: 'Bundfarve' },
|
||||
{ start: '11:00', end: '12:00', service: 'Dameklip' },
|
||||
{ start: '14:00', end: '15:00', service: 'Dameklip' }
|
||||
]
|
||||
},
|
||||
'EMP002': {
|
||||
'2026-01-06': [
|
||||
{ start: '09:00', end: '10:00', service: 'Herreklip' },
|
||||
{ start: '11:00', end: '12:00', service: 'Dameklip' },
|
||||
{ start: '15:00', end: '16:30', service: 'Striber' }
|
||||
],
|
||||
'2026-01-07': [
|
||||
{ start: '10:00', end: '11:00', service: 'Dameklip' },
|
||||
{ start: '13:00', end: '14:00', service: 'Herreklip' }
|
||||
]
|
||||
},
|
||||
'EMP003': {
|
||||
'2026-01-06': [
|
||||
{ start: '08:30', end: '09:30', service: 'Herreklip' },
|
||||
{ start: '12:00', end: '13:00', service: 'Dameklip' }
|
||||
]
|
||||
},
|
||||
'EMP004': {
|
||||
'2026-01-06': [
|
||||
{ start: '09:00', end: '10:00', service: 'Herreklip' },
|
||||
{ start: '14:00', end: '15:30', service: 'Bundfarve' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const SALON_OPEN = '08:00';
|
||||
const SALON_CLOSE = '17:00';
|
||||
|
||||
// ==========================================
|
||||
// AI SLOT OPTIMERING
|
||||
// ==========================================
|
||||
function timeToMinutes(time) {
|
||||
const [h, m] = time.split(':').map(Number);
|
||||
return h * 60 + m;
|
||||
}
|
||||
|
||||
function minutesToTime(mins) {
|
||||
const h = Math.floor(mins / 60);
|
||||
const m = mins % 60;
|
||||
return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function getBookingsForSlot(date, employeeId) {
|
||||
if (!employeeId) {
|
||||
let bestEmployee = 'EMP001';
|
||||
let minBookings = Infinity;
|
||||
for (const empId of Object.keys(existingBookings)) {
|
||||
const bookings = existingBookings[empId]?.[date] || [];
|
||||
if (bookings.length < minBookings) {
|
||||
minBookings = bookings.length;
|
||||
bestEmployee = empId;
|
||||
}
|
||||
}
|
||||
return existingBookings[bestEmployee]?.[date] || [];
|
||||
}
|
||||
return existingBookings[employeeId]?.[date] || [];
|
||||
}
|
||||
|
||||
function calculateOptimalSlots(serviceDuration, date, employeeId) {
|
||||
const bookings = getBookingsForSlot(date, employeeId);
|
||||
const openMins = timeToMinutes(SALON_OPEN);
|
||||
const closeMins = timeToMinutes(SALON_CLOSE);
|
||||
|
||||
const slots = [];
|
||||
for (let mins = openMins; mins <= closeMins - serviceDuration; mins += 30) {
|
||||
const slotStart = mins;
|
||||
const slotEnd = mins + serviceDuration;
|
||||
const time = minutesToTime(mins);
|
||||
|
||||
let isTaken = false;
|
||||
for (const booking of bookings) {
|
||||
const bookStart = timeToMinutes(booking.start);
|
||||
const bookEnd = timeToMinutes(booking.end);
|
||||
if (slotStart < bookEnd && slotEnd > bookStart) {
|
||||
isTaken = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let score = 0;
|
||||
if (!isTaken) {
|
||||
if (slotStart === openMins) score += 3;
|
||||
for (const booking of bookings) {
|
||||
if (slotEnd === timeToMinutes(booking.start)) { score += 3; break; }
|
||||
}
|
||||
for (const booking of bookings) {
|
||||
if (slotStart === timeToMinutes(booking.end)) { score += 2; break; }
|
||||
}
|
||||
for (const booking of bookings) {
|
||||
const gap = timeToMinutes(booking.start) - slotEnd;
|
||||
if (gap > 0 && gap < 30) { score -= 2; break; }
|
||||
}
|
||||
for (const booking of bookings) {
|
||||
const gap = slotStart - timeToMinutes(booking.end);
|
||||
if (gap > 0 && gap < 30) { score -= 2; break; }
|
||||
}
|
||||
if (slotEnd >= closeMins - 60) score += 1;
|
||||
}
|
||||
|
||||
slots.push({ time, taken: isTaken, score, recommended: false });
|
||||
}
|
||||
|
||||
const availableSlots = slots.filter(s => !s.taken);
|
||||
availableSlots.sort((a, b) => b.score - a.score);
|
||||
const topSlots = availableSlots.slice(0, 3);
|
||||
for (const slot of topSlots) {
|
||||
if (slot.score > 0) slot.recommended = true;
|
||||
}
|
||||
|
||||
return slots;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// STEP ANIMATION
|
||||
// ==========================================
|
||||
|
|
@ -2196,8 +2375,18 @@
|
|||
daysHtml += `<div class="${cls}" data-date="${dateStr}">${d}</div>`;
|
||||
}
|
||||
|
||||
const times = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30'];
|
||||
const taken = ['10:30', '14:00'];
|
||||
// Beregn total varighed for valgte ydelser
|
||||
const serviceDuration = state.services.reduce((sum, s) => sum + s.duration, 0) || 60;
|
||||
|
||||
// Brug AI-algoritme til at beregne optimale slots
|
||||
const selectedDate = state.date || new Date().toISOString().split('T')[0];
|
||||
const slots = calculateOptimalSlots(serviceDuration, selectedDate, state.employee);
|
||||
|
||||
// Filtrer til åbningstider (08:00-17:00)
|
||||
const displaySlots = slots.filter(s => {
|
||||
const mins = timeToMinutes(s.time);
|
||||
return mins >= timeToMinutes('08:00') && mins <= timeToMinutes('16:30');
|
||||
});
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="datetime-grid">
|
||||
|
|
@ -2222,12 +2411,20 @@
|
|||
</div>
|
||||
<div class="time-section">
|
||||
<div class="time-section-title">Ledige tider</div>
|
||||
<div class="ai-info">
|
||||
<i class="ph ph-sparkle"></i>
|
||||
<span>Anbefalede tider passer bedst i vores kalender</span>
|
||||
</div>
|
||||
<div class="time-grid">
|
||||
${times.map(t => {
|
||||
${displaySlots.map(slot => {
|
||||
let cls = 'time-slot';
|
||||
if (taken.includes(t)) cls += ' disabled';
|
||||
if (state.time === t) cls += ' selected';
|
||||
return `<div class="${cls}" data-time="${t}">${t}</div>`;
|
||||
if (slot.taken) cls += ' disabled';
|
||||
if (slot.recommended && !slot.taken) cls += ' recommended';
|
||||
if (state.time === slot.time) cls += ' selected';
|
||||
return `<div class="${cls}" data-time="${slot.time}">
|
||||
${slot.time}
|
||||
${slot.recommended && !slot.taken ? '<span class="ai-badge"><i class="ph ph-sparkle"></i></span>' : ''}
|
||||
</div>`;
|
||||
}).join('')}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue