From f2c8d8c05dac53586fdee24fae8d4514f239b87f Mon Sep 17 00:00:00 2001
From: arteons <naja@catalis.app>
Date: Thu, 19 Jun 2025 11:03:09 +0800
Subject: [PATCH] feedback backend table

---
 src/routes/backoffice/feedback/+page.svelte | 51 ++++++++++++++++-----
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/routes/backoffice/feedback/+page.svelte b/src/routes/backoffice/feedback/+page.svelte
index 1117d72..54d4a7d 100644
--- a/src/routes/backoffice/feedback/+page.svelte
+++ b/src/routes/backoffice/feedback/+page.svelte
@@ -2,7 +2,22 @@
   import { onMount } from "svelte";
   import { supabase } from "$lib/supabaseClient";
 
-  /** @type {{ villa_name: string; customer_name: string; checkin_date: string; checkout_date: string; feedback: string }[]} */
+  /** @type {{ 
+   * villa_name: string; 
+   * customer_name: string; 
+   * checkin_date: string; 
+   * checkout_date: string; 
+   * feedback: string; 
+   * book_process: string; 
+   * airport_greet: string; 
+   * arrival_greet: string;
+   * overal_star: string;
+   * maintenance_proc: string;
+   * bf_service: string;
+   * nextstay_disc: string;
+   * extend_disc: string;
+   * become_sponsor: string;
+   * }[]} */
   let feedbackList = [];
   let loading = true;
   let error = "";
@@ -23,7 +38,7 @@
   });
 </script>
 
-<h1 class="text-3xl font-bold text-center my-6">Submitted Feedb ack</h1>
+<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>
@@ -33,26 +48,40 @@
   <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"
-    >
+    <table class="min-w-[1000px] divide-y divide-gray-200 text-sm w-max">
       <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>
+          <th class="py-2 px-4 border-b">Book Process</th>
+          <th class="py-2 px-4 border-b">Airport Greet</th>
+          <th class="py-2 px-4 border-b">Arrival Greet</th>
+          <th class="py-2 px-4 border-b">Maintenance Process</th>
+          <th class="py-2 px-4 border-b">Breakfast Service</th>
+          <th class="py-2 px-4 border-b">Villa in General</th>
+          <th class="py-2 px-4 border-b">Want Extend Discount</th>
+          <th class="py-2 px-4 border-b">Want Next Stay Discount</th>
+          <th class="py-2 px-4 border-b">Want Become Sponsor</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>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.villa_name}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.customer_name}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.checkin_date}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.checkout_date}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.book_process}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.airport_greet}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.arrival_greet}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.maintenance_proc}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.bf_service}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.feedback}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.extend_disc}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.nextstay_disc}</td>
+            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.become_sponsor}</td>
           </tr>
         {/each}
       </tbody>