345 lines
18 KiB
Svelte
345 lines
18 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { api } from '$lib/stores/api.js';
|
|
import { CalendarDays, ChevronLeft, ChevronRight, Plus, X, Check, RefreshCw, Upload } from 'lucide-svelte';
|
|
|
|
let properties = [];
|
|
let events = [];
|
|
let filterProperty = '';
|
|
let showForm = false;
|
|
let error = '';
|
|
|
|
let today = new Date();
|
|
let viewYear = today.getFullYear();
|
|
let viewMonth = today.getMonth(); // 0-indexed
|
|
|
|
const empty = () => ({
|
|
property_id: '', title: '',
|
|
start_date: today.toISOString().slice(0,10),
|
|
end_date: today.toISOString().slice(0,10),
|
|
notes: ''
|
|
});
|
|
let form = empty();
|
|
|
|
onMount(async () => {
|
|
properties = await api.properties.list() || [];
|
|
await load();
|
|
});
|
|
|
|
async function load() {
|
|
const from = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-01`;
|
|
const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
const to = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${lastDay}`;
|
|
const params = { from, to };
|
|
if (filterProperty) params.property_id = filterProperty;
|
|
events = await api.calendar.list(params) || [];
|
|
}
|
|
|
|
function prevMonth() {
|
|
if (viewMonth === 0) { viewMonth = 11; viewYear--; } else { viewMonth--; }
|
|
load();
|
|
}
|
|
function nextMonth() {
|
|
if (viewMonth === 11) { viewMonth = 0; viewYear++; } else { viewMonth++; }
|
|
load();
|
|
}
|
|
|
|
// Génère les jours du mois pour la grille
|
|
$: calendarDays = (() => {
|
|
const firstDay = new Date(viewYear, viewMonth, 1).getDay();
|
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
const days = [];
|
|
// Padding début (lundi = 0)
|
|
const offset = (firstDay === 0 ? 6 : firstDay - 1);
|
|
for (let i = 0; i < offset; i++) days.push(null);
|
|
for (let d = 1; d <= daysInMonth; d++) days.push(d);
|
|
return days;
|
|
})();
|
|
|
|
function isToday(day) {
|
|
return day === today.getDate() && viewMonth === today.getMonth() && viewYear === today.getFullYear();
|
|
}
|
|
|
|
// Calcule pour chaque jour du mois : l'événement correspondant (ou null)
|
|
// iCal (airbnb) : DTEND exclusif → ds < end_date
|
|
// Manuel : date départ incluse → ds <= end_date
|
|
$: eventByDay = (() => {
|
|
const map = {};
|
|
const mStr = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}`;
|
|
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
const ds = `${mStr}-${String(d).padStart(2, '0')}`;
|
|
map[d] = events.find(e =>
|
|
ds >= e.start_date && (e.source === 'airbnb' ? ds < e.end_date : ds <= e.end_date)
|
|
) || null;
|
|
}
|
|
return map;
|
|
})();
|
|
|
|
$: occupiedDays = Object.values(eventByDay).filter(Boolean).length;
|
|
$: daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
|
$: occupancyRate = daysInMonth > 0 ? Math.round((occupiedDays / daysInMonth) * 100) : 0;
|
|
// Séjours dont l'arrivée est dans le mois affiché (pas les séjours démarrés avant)
|
|
$: sejoursThisMonth = (() => {
|
|
const monthStr = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}`;
|
|
return events.filter(e => e.start_date.startsWith(monthStr)).length;
|
|
})();
|
|
|
|
const monthNames = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
|
|
const dayNames = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'];
|
|
|
|
let syncing = false;
|
|
let syncMsg = '';
|
|
let syncError = '';
|
|
|
|
async function syncCalendars() {
|
|
syncing = true;
|
|
syncMsg = '';
|
|
syncError = '';
|
|
try {
|
|
const res = await fetch('/api/calendar/sync', { method: 'POST', credentials: 'include' });
|
|
const results = await res.json();
|
|
const total = results.reduce((s, r) => s + (r.imported || 0), 0);
|
|
const errs = results.filter(r => r.error);
|
|
if (errs.length > 0) {
|
|
syncError = errs.map(r => `${r.property}: ${r.error}`).join(' | ');
|
|
} else {
|
|
syncMsg = `${total} événement(s) importé(s)`;
|
|
}
|
|
await load();
|
|
} catch (e) {
|
|
syncError = 'Erreur de synchronisation: ' + e.message;
|
|
}
|
|
syncing = false;
|
|
}
|
|
|
|
async function saveEvent() {
|
|
error = '';
|
|
if (!form.property_id || !form.start_date || !form.end_date) { error = 'Bien et dates requis.'; return; }
|
|
try {
|
|
await api.calendar.createEvent(form);
|
|
showForm = false;
|
|
await load();
|
|
} catch (e) { error = e.message; }
|
|
}
|
|
|
|
// ── Import Booking.com CSV ────────────────────────────────────────────────
|
|
let showBookingImport = false;
|
|
let bookingPropertyId = '';
|
|
let bookingFile = null;
|
|
let bookingImporting = false;
|
|
let bookingMsg = '';
|
|
let bookingError = '';
|
|
|
|
async function importBookingCSV() {
|
|
bookingError = '';
|
|
bookingMsg = '';
|
|
if (!bookingPropertyId) { bookingError = 'Sélectionner un bien.'; return; }
|
|
if (!bookingFile) { bookingError = 'Sélectionner un fichier CSV.'; return; }
|
|
bookingImporting = true;
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append('property_id', bookingPropertyId);
|
|
fd.append('file', bookingFile);
|
|
const res = await fetch('/api/calendar/import-booking', { method: 'POST', body: fd, credentials: 'include' });
|
|
if (!res.ok) throw new Error(await res.text());
|
|
const r = await res.json();
|
|
bookingMsg = `${r.imported} réservation(s) importée(s) sur ${r.total}`;
|
|
showBookingImport = false;
|
|
await load();
|
|
} catch (e) { bookingError = e.message; }
|
|
bookingImporting = false;
|
|
}
|
|
</script>
|
|
|
|
<div class="p-6 max-w-5xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<CalendarDays size={22} class="text-gray-400"/>
|
|
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Calendrier</h1>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button on:click={syncCalendars} disabled={syncing}
|
|
class="flex items-center gap-2 px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50">
|
|
<RefreshCw size={15} class={syncing ? 'animate-spin' : ''}/> Synchroniser
|
|
</button>
|
|
<button on:click={() => { showBookingImport = true; bookingMsg = ''; bookingError = ''; bookingFile = null; }}
|
|
class="flex items-center gap-2 px-4 py-2 border border-teal-200 dark:border-teal-700 rounded-lg text-sm text-teal-700 dark:text-teal-300 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors">
|
|
<Upload size={15}/> Booking.com
|
|
</button>
|
|
<button on:click={() => { showForm = true; form = empty(); error = ''; }}
|
|
class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
|
|
<Plus size={16}/> Ajouter occupation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{#if syncMsg}
|
|
<p class="text-sm text-green-600 dark:text-green-400 mb-3">{syncMsg}</p>
|
|
{/if}
|
|
{#if syncError}
|
|
<p class="text-sm text-red-500 dark:text-red-400 mb-3">{syncError}</p>
|
|
{/if}
|
|
{#if bookingMsg}
|
|
<p class="text-sm text-teal-600 dark:text-teal-400 mb-3">{bookingMsg}</p>
|
|
{/if}
|
|
|
|
<!-- Filtres + navigation -->
|
|
<div class="flex flex-wrap items-center gap-3 mb-5">
|
|
<select bind:value={filterProperty} on:change={load}
|
|
class="px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">Tous les biens</option>
|
|
{#each properties as p}<option value={p.id}>{p.name}</option>{/each}
|
|
</select>
|
|
<div class="flex items-center gap-2 ml-auto">
|
|
<button on:click={prevMonth} class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 transition-colors"><ChevronLeft size={18}/></button>
|
|
<span class="text-base font-semibold text-gray-900 dark:text-white w-36 text-center">{monthNames[viewMonth]} {viewYear}</span>
|
|
<button on:click={nextMonth} class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400 transition-colors"><ChevronRight size={18}/></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats bar -->
|
|
<div class="grid grid-cols-3 gap-3 mb-5">
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-100 dark:border-gray-800">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Jours occupés</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{occupiedDays} <span class="text-sm font-normal text-gray-400">/ {daysInMonth}</span></p>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-100 dark:border-gray-800">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Taux d'occupation</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{occupancyRate}%</p>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 border border-gray-100 dark:border-gray-800">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Séjours ce mois</p>
|
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white mt-1">{sejoursThisMonth}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calendrier grille -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 overflow-hidden">
|
|
<!-- Jours de la semaine -->
|
|
<div class="grid grid-cols-7 border-b border-gray-100 dark:border-gray-800">
|
|
{#each dayNames as d}
|
|
<div class="py-3 text-center text-xs font-medium text-gray-400 dark:text-gray-500">{d}</div>
|
|
{/each}
|
|
</div>
|
|
<!-- Jours -->
|
|
<div class="grid grid-cols-7">
|
|
{#each calendarDays as day}
|
|
{@const event = eventByDay[day] ?? null}
|
|
{@const occupied = !!event}
|
|
<div class="border-b border-r border-gray-50 dark:border-gray-800/50 min-h-[72px] p-2 relative
|
|
{!day ? 'bg-gray-50/50 dark:bg-gray-800/20' : ''}
|
|
{occupied ? (event.source === 'airbnb' ? 'bg-orange-50 dark:bg-orange-950/30' : event.source === 'booking' ? 'bg-teal-50 dark:bg-teal-950/30' : 'bg-blue-50 dark:bg-blue-950/30') : ''}">
|
|
{#if day}
|
|
<span class="text-xs font-medium {isToday(day) ? 'bg-blue-600 text-white w-6 h-6 flex items-center justify-center rounded-full' : 'text-gray-700 dark:text-gray-300'}">
|
|
{day}
|
|
</span>
|
|
{#if event && event.start_date === `${viewYear}-${String(viewMonth+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`}
|
|
<div class="mt-1 text-xs px-1.5 py-0.5 rounded font-medium truncate
|
|
{event.source === 'airbnb' ? 'bg-orange-200 text-orange-800 dark:bg-orange-900 dark:text-orange-200' : event.source === 'booking' ? 'bg-teal-200 text-teal-800 dark:bg-teal-900 dark:text-teal-200' : 'bg-blue-200 text-blue-800 dark:bg-blue-900 dark:text-blue-200'}">
|
|
{event.title || (event.source === 'airbnb' ? 'Airbnb' : event.source === 'booking' ? 'Booking.com' : 'Locataire')}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Légende -->
|
|
<div class="flex gap-4 mt-3 text-xs text-gray-500 dark:text-gray-400">
|
|
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded bg-orange-200 dark:bg-orange-900"></span>Airbnb (sync auto)</span>
|
|
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded bg-teal-200 dark:bg-teal-900"></span>Booking.com (import CSV)</span>
|
|
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded bg-blue-200 dark:bg-blue-900"></span>Manuel</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
{#if showForm}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
|
<div role="dialog" aria-modal="true" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4" on:click|self={() => showForm = false}>
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl w-full max-w-md shadow-xl border border-gray-100 dark:border-gray-800">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-800">
|
|
<h2 class="font-semibold text-gray-900 dark:text-white">Ajouter une période d'occupation</h2>
|
|
<button on:click={() => showForm = false} class="text-gray-400 hover:text-gray-600"><X size={18}/></button>
|
|
</div>
|
|
<div class="px-6 py-5 space-y-4">
|
|
{#if error}<p class="text-red-500 text-sm">{error}</p>{/if}
|
|
<div>
|
|
<label for="form-property" class="block text-xs font-medium text-gray-500 mb-1">Bien *</label>
|
|
<select id="form-property" bind:value={form.property_id}
|
|
class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">Sélectionner...</option>
|
|
{#each properties as p}<option value={p.id}>{p.name}</option>{/each}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="form-title" class="block text-xs font-medium text-gray-500 mb-1">Intitulé</label>
|
|
<input id="form-title" bind:value={form.title} placeholder="Ex: Famille Dupont"
|
|
class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"/>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="form-start" class="block text-xs font-medium text-gray-500 mb-1">Arrivée *</label>
|
|
<input id="form-start" type="date" bind:value={form.start_date}
|
|
class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"/>
|
|
</div>
|
|
<div>
|
|
<label for="form-end" class="block text-xs font-medium text-gray-500 mb-1">Départ *</label>
|
|
<input id="form-end" type="date" bind:value={form.end_date}
|
|
class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100 dark:border-gray-800">
|
|
<button on:click={() => showForm = false} class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">Annuler</button>
|
|
<button on:click={saveEvent}
|
|
class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors">
|
|
<Check size={15}/> Ajouter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Modal import Booking.com -->
|
|
{#if showBookingImport}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
|
<div role="dialog" aria-modal="true" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4" on:click|self={() => showBookingImport = false}>
|
|
<div class="bg-white dark:bg-gray-900 rounded-2xl w-full max-w-md shadow-xl border border-gray-100 dark:border-gray-800">
|
|
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-800">
|
|
<h2 class="font-semibold text-gray-900 dark:text-white">Importer réservations Booking.com</h2>
|
|
<button on:click={() => showBookingImport = false} class="text-gray-400 hover:text-gray-600"><X size={18}/></button>
|
|
</div>
|
|
<div class="px-6 py-5 space-y-4">
|
|
{#if bookingError}<p class="text-red-500 text-sm">{bookingError}</p>{/if}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">Bien *</label>
|
|
<select bind:value={bookingPropertyId}
|
|
class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
|
|
<option value="">Sélectionner...</option>
|
|
{#each properties as p}<option value={p.id}>{p.name}</option>{/each}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-500 mb-1">Fichier CSV Booking.com *</label>
|
|
<input type="file" accept=".xls,.xlsx,.csv"
|
|
on:change={(e) => bookingFile = e.target.files[0]}
|
|
class="w-full text-sm text-gray-700 dark:text-gray-300 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100 dark:file:bg-teal-900/30 dark:file:text-teal-300"/>
|
|
<p class="text-xs text-gray-400 mt-1">Extranet Booking.com → Réservations → Exporter → CSV</p>
|
|
</div>
|
|
<p class="text-xs text-gray-400">Les réservations annulées sont ignorées. L'import remplace les données Booking.com précédentes pour ce bien.</p>
|
|
</div>
|
|
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100 dark:border-gray-800">
|
|
<button on:click={() => showBookingImport = false} class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">Annuler</button>
|
|
<button on:click={importBookingCSV} disabled={bookingImporting}
|
|
class="flex items-center gap-2 px-4 py-2 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium transition-colors">
|
|
{#if bookingImporting}<div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"/>{:else}<Upload size={15}/>{/if}
|
|
Importer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|