rouggy/RentalManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Gregory Salaun
2026-04-19 12:59:18 +02:00
parent c01876ad81
commit 7065cb3945
8 changed files with 347 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/calendar/+page.svelte
+91 -22
View File
@@ -1,11 +1,10 @@
<script>
import { onMount } from 'svelte';
import { api } from '$lib/stores/api.js';
import { CalendarDays, ChevronLeft, ChevronRight, Plus, X, Check, RefreshCw } from 'lucide-svelte';
import { CalendarDays, ChevronLeft, ChevronRight, Plus, X, Check, RefreshCw, Upload } from 'lucide-svelte';
let properties = [];
let events = [];
let loading = true;
let filterProperty = '';
let showForm = false;
let error = '';
@@ -28,14 +27,12 @@
});
async function load() {
loading = true;
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) || [];
loading = false;
}
function prevMonth() {
@@ -91,11 +88,6 @@
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'];
const sourceBg = {
airbnb: 'bg-orange-100 dark:bg-orange-900',
manual: 'bg-blue-100 dark:bg-blue-900'
};
let syncing = false;
let syncMsg = '';
let syncError = '';
@@ -130,6 +122,34 @@
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">
@@ -144,6 +164,10 @@
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
@@ -157,6 +181,9 @@
{#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">
@@ -198,20 +225,20 @@
</div>
<!-- Jours -->
<div class="grid grid-cols-7">
{#each calendarDays as day, i}
{#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' : 'bg-blue-50 dark:bg-blue-950/30') : ''}">
{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' : 'bg-blue-200 text-blue-800 dark:bg-blue-900 dark:text-blue-200'}">
{event.title || (event.source === 'airbnb' ? 'Airbnb' : 'Locataire')}
{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}
@@ -223,13 +250,15 @@
<!-- 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}
<div class="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4" on:click|self={() => showForm = false}>
<!-- 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>
@@ -238,27 +267,27 @@
<div class="px-6 py-5 space-y-4">
{#if error}<p class="text-red-500 text-sm">{error}</p>{/if}
<div>
<label class="block text-xs font-medium text-gray-500 mb-1">Bien *</label>
<select bind:value={form.property_id}
<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 class="block text-xs font-medium text-gray-500 mb-1">Intitulé</label>
<input bind:value={form.title} placeholder="Ex: Famille Dupont"
<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 class="block text-xs font-medium text-gray-500 mb-1">Arrivée *</label>
<input type="date" bind:value={form.start_date}
<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 class="block text-xs font-medium text-gray-500 mb-1">Départ *</label>
<input type="date" bind:value={form.end_date}
<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>
@@ -273,3 +302,43 @@
</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}