clean code

src/app.css

@@ -1 +1,4 @@
-@import "tailwindcss";
+@import "tailwindcss";
+table td {
+    vertical-align: top;
+}

src/routes/backoffice/timesheets/+page.svelte

@@ -191,6 +191,7 @@
             .order("villa_name", { ascending: true });
 
         if (!villaErr && villaData) {
+            dataVilla = villaData;
             villas = villaData;
         } else {
             console.error("Failed to load villas", villaErr);
@@ -282,7 +283,7 @@
     }
     // Function to fetch timesheets with optional filters and sorting
     async function fetchTimeSheets(
-        villaNameFilter: string | null = null,
+        villaIdFilter: string | null = null,
         searchTerm: string | null = null,
         sortColumn: string | null = "created_at",
         sortOrder: "asc" | "desc" = "desc",
@@ -295,11 +296,11 @@
             .order(sortColumn || "created_at", {
                 ascending: sortOrder === "asc",
         });
-        if (villaNameFilter) {
+        if (villaIdFilter) {
             const { data: villaMatch } = await supabase
                 .from("vb_villas")
                 .select("id")
-                .eq("villa_name", villaNameFilter);
+                .eq("villa_name", villaIdFilter);
 
             const matchedId = villaMatch?.[0]?.id;
             if (matchedId) {
@@ -622,7 +623,7 @@
                                     {/if}
                                 </td>
                             {:else if col.key === "approved_by"}
-                                <td class="px-4 py-2">
+                                <td class="px-4 py-2 align-text-top">
                                     {row[col.key] || "Not Approved"}
                                 </td>
                             {:else if col.key === "approved_date"}