add Feedback form

2025-06-06 09:50:05 +08:00
parent 2192d9eb16
commit f568b365c7
3 changed files with 122 additions and 105 deletions
--- a/src/routes/backoffice/feedback/+page.svelte
+++ b/src/routes/backoffice/feedback/+page.svelte
@@ -0,0 +1,59 @@
+<script>
+    import { onMount } from 'svelte';
+    import { supabase } from '$lib/supabaseClient';
+  
+    let feedbackList = [];
+    let loading = true;
+    let error = '';
+  
+    onMount(async () => {
+      const { data, error: fetchError } = await supabase
+        .from('vb_feedback')
+        .select('*')
+        .order('checkin_date', { ascending: false });
+  
+      if (fetchError) {
+        error = 'Failed to fetch feedback.';
+        console.error(fetchError);
+      } else {
+        feedbackList = data;
+      }
+      loading = false;
+    });
+  </script>
+  
+  <h1 class="text-3xl font-bold text-center my-6">Submitted Feedback</h1>
+  
+  {#if loading}
+    <p class="text-center text-gray-500">Loading feedback...</p>
+  {:else if error}
+    <p class="text-center text-red-600 font-semibold">{error}</p>
+  {:else if feedbackList.length === 0}
+    <p class="text-center text-gray-500">No feedback submitted yet.</p>
+  {:else}
+    <div class="overflow-x-auto px-4">
+      <table class="min-w-full bg-white border border-gray-200 rounded-lg shadow-sm">
+        <thead class="bg-gray-100 text-left">
+          <tr>
+            <th class="py-2 px-4 border-b">Villa</th>
+            <th class="py-2 px-4 border-b">Customer</th>
+            <th class="py-2 px-4 border-b">Check-in</th>
+            <th class="py-2 px-4 border-b">Check-out</th>
+            <th class="py-2 px-4 border-b">Feedback</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each feedbackList as item}
+            <tr class="hover:bg-gray-50">
+              <td class="py-2 px-4 border-b">{item.villa_name}</td>
+              <td class="py-2 px-4 border-b">{item.customer_name}</td>
+              <td class="py-2 px-4 border-b">{item.checkin_date}</td>
+              <td class="py-2 px-4 border-b">{item.checkout_date}</td>
+              <td class="py-2 px-4 border-b">{item.feedback}</td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+  
--- a/src/routes/feedback/+page.svelte
+++ b/src/routes/feedback/+page.svelte
@@ -0,0 +1,63 @@
+<script>
+    import { supabase } from '$lib/supabaseClient';
+  
+    let villa_name = '';
+    let customer_name = '';
+    let checkin_date = '';
+    let checkout_date = '';
+    let feedback = '';
+    let errorMessage = '';
+  
+    async function handleSubmit() {
+      errorMessage = '';
+  
+      if (!villa_name.trim() || !customer_name.trim() || !feedback.trim()) {
+        errorMessage = 'Villa name, customer name, and feedback are required.';
+        return;
+      }
+  
+      if (new Date(checkout_date) <= new Date(checkin_date)) {
+        errorMessage = 'Check-out date must be after check-in date.';
+        return;
+      }
+  
+      const { data, error } = await supabase
+        .from('vb_feedback')
+        .insert([{
+          villa_name,
+          customer_name,
+          checkin_date,
+          checkout_date,
+          feedback
+        }]);
+  
+      if (error) {
+        console.error('Error submitting feedback:', error.message);
+        errorMessage = 'Failed to submit feedback. Please try again.';
+      } else {
+        console.log('Feedback submitted:', data);
+        villa_name = '';
+        customer_name = '';
+        checkin_date = '';
+        checkout_date = '';
+        feedback = '';
+        alert("Feedback submitted successfully!");
+      }
+    }
+  </script>
+  
+  <h1 class="text-3xl font-bold text-center my-6">Feedback Form</h1>
+  
+  <form on:submit|preventDefault={handleSubmit} class="flex flex-col gap-4 max-w-md mx-auto p-6 bg-white rounded-xl shadow-md">
+    {#if errorMessage}
+      <div class="text-red-600 font-semibold">{errorMessage}</div>
+    {/if}
+  
+    <input type="text" bind:value={villa_name} placeholder="Villa Name" class="p-2 border rounded-md" required />
+    <input type="text" bind:value={customer_name} placeholder="Customer Name" class="p-2 border rounded-md" required />
+    <input type="date" bind:value={checkin_date} class="p-2 border rounded-md" required />
+    <input type="date" bind:value={checkout_date} class="p-2 border rounded-md" required />
+    <textarea bind:value={feedback} placeholder="Write your feedback here..." class="p-2 border rounded-md min-h-[120px]" required></textarea>
+    <button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">Submit Feedback</button>
+  </form>
+