add Feedback form

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}
+