feedback backend table

This commit is contained in:
2025-06-19 11:03:09 +08:00
parent 0da81363e2
commit f2c8d8c05d

View File

@@ -2,7 +2,22 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { supabase } from "$lib/supabaseClient"; 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 feedbackList = [];
let loading = true; let loading = true;
let error = ""; let error = "";
@@ -23,7 +38,7 @@
}); });
</script> </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} {#if loading}
<p class="text-center text-gray-500">Loading feedback...</p> <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> <p class="text-center text-gray-500">No feedback submitted yet.</p>
{:else} {:else}
<div class="overflow-x-auto px-4"> <div class="overflow-x-auto px-4">
<table <table class="min-w-[1000px] divide-y divide-gray-200 text-sm w-max">
class="min-w-full bg-white border border-gray-200 rounded-lg shadow-sm"
>
<thead class="bg-gray-100 text-left"> <thead class="bg-gray-100 text-left">
<tr> <tr>
<th class="py-2 px-4 border-b">Villa</th> <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">Customer</th>
<th class="py-2 px-4 border-b">Check-in</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">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> </tr>
</thead> </thead>
<tbody> <tbody>
{#each feedbackList as item} {#each feedbackList as item}
<tr class="hover:bg-gray-50"> <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 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">{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.customer_name}</td>
<td class="py-2 px-4 border-b">{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.checkin_date}</td>
<td class="py-2 px-4 border-b">{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.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.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> </tr>
{/each} {/each}
</tbody> </tbody>