up

2026-04-19 12:59:18 +02:00
parent c01876ad81
commit 7065cb3945
8 changed files with 347 additions and 25 deletions
@@ -207,7 +207,7 @@
    let occupied = 0;
    for (let d = 1; d <= days; d++) {
      const ds = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
-      if (calEvents.some(e => ds >= e.start_date && ds < e.end_date)) occupied++;
+      if (calEvents.some(e => ds >= e.start_date && (e.source === 'airbnb' ? ds < e.end_date : ds <= e.end_date))) occupied++;
    }
    return days > 0 ? Math.round((occupied/days)*100) : 0;
  })();
@@ -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}