diff --git a/src/lib/utils/conversion.ts b/src/lib/utils/conversion.ts
index b6e99b5..88448b6 100644
--- a/src/lib/utils/conversion.ts
+++ b/src/lib/utils/conversion.ts
@@ -19,4 +19,14 @@ export function timestampToDate(timestamp: number): string {
     const day = String(date.getDate()).padStart(2, '0');
 
     return `${year}-${month}-${day}`;
+}
+
+export function formatCurrency(value: number | string): string {
+    if (typeof value === 'string') {
+        value = parseFloat(value);
+    }
+    return new Intl.NumberFormat('id-ID', {
+        style: 'currency',
+        currency: 'IDR',
+    }).format(value);
 }
\ No newline at end of file
diff --git a/src/routes/backoffice/villa/+page.svelte b/src/routes/backoffice/villa/+page.svelte
index 9299732..75fceaf 100644
--- a/src/routes/backoffice/villa/+page.svelte
+++ b/src/routes/backoffice/villa/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { supabase } from "$lib/supabaseClient";
+    import { formatCurrency } from "$lib/utils/conversion";
     import { onMount } from "svelte";
     import { writable } from "svelte/store";
 
@@ -23,13 +24,14 @@
         season_6_rate: number;
         season_7_rate: number;
         villa_email_address: string;
-        villa_recovery_email_adress: string;
+        villa_recovery_email_address: string;
         owner_portal_username: string;
         owner_portal_password: string;
         created_by: string;
         created_at: string;
     };
 
+    let searchTerm: string = "";
     let allRows: Villa[] = [];
     let offset = 0;
     let limit = 10;
@@ -70,7 +72,7 @@
         { key: "season_7_rate", title: "Season 7 Rate" },
         { key: "villa_email_address", title: "Villa Email Address" },
         {
-            key: "villa_recovery_email_adress",
+            key: "villa_recovery_email_address",
             title: "Villa Recovery Email Address",
         },
         { key: "owner_portal_username", title: "Owner Portal Username" },
@@ -159,15 +161,36 @@
     $: formColumns = columns.filter((col) => !excludedKeys.includes(col.key));
 
     function openModal(villa?: Villa) {
+        console.log("Opening modal for villa:", villa);
+
         showModal = true;
         isEditing = !!villa;
         currentEditingId = villa?.id ?? null;
-        newVilla = {};
+        newVilla = currentEditingId ? { ...villa } : {};
+
+        console.log("New villa data:", newVilla);
+
         for (const col of formColumns) {
-            newVilla[col.key] = villa
-                ? (villa[col.key as keyof Villa] ?? "")
-                : "";
+            if (villa) {
+                // kalau kolom boolean, langsung pakai boolean
+                if (col.key === "closeable_living_room") {
+                    newVilla[col.key] = villa.closeable_living_room ? "true" : "false";
+                } else if (col.key === "monthly_rental_pre_approved_status") {
+                    newVilla[col.key] = villa.monthly_rental_pre_approved_status ? "true" : "false";
+                } else if (col.key === "long_term_rental_pre_approval") {
+                    newVilla[col.key] = villa.long_term_rental_pre_approval ? "true" : "false";
+                } else if (col.key === "pet_allowed_pre_approval_status") {
+                    newVilla[col.key] = villa.pet_allowed_pre_approval_status ? "true" : "false";
+                } else {
+                    newVilla[col.key] = villa[col.key as keyof Villa] ?? "";
+                }
+            } else {
+                newVilla[col.key] = "";
+            }
         }
+
+        console.log(" new villa after processing:", newVilla);
+        
     }
 
     //validation function
@@ -195,7 +218,7 @@
             //            "monthly_rental_pre_approved_status",
             //            "long_term_rental_pre_approval",
             //            "pet_allowed_pre_approval_status",
-            //            "villa_recovery_email_adress",
+            //            "villa_recovery_email_address",
             //            "villa_email_address",
         ];
         requiredFields.forEach((field) => {
@@ -222,8 +245,19 @@
             return;
         }
 
+        if (newVilla.season_1_rate === "") newVilla.season_1_rate = 0;
+        if (newVilla.season_2_rate === "") newVilla.season_2_rate = 0;
+        if (newVilla.season_3_rate === "") newVilla.season_3_rate = 0;
+        if (newVilla.season_4_rate === "") newVilla.season_4_rate = 0;
+        if (newVilla.season_5_rate === "") newVilla.season_5_rate = 0;
+        if (newVilla.season_6_rate === "") newVilla.season_6_rate = 0;
+        if (newVilla.season_7_rate === "") newVilla.season_7_rate = 0;
+
         if (isEditing && currentEditingId) {
-            const { error } = await supabase
+            console.log("Updating villa with ID:", currentEditingId);
+            console.log("New villa data:", newVilla);
+
+            const { data, error } = await supabase
                 .from("vb_villas")
                 .update(newVilla)
                 .eq("id", currentEditingId);
@@ -231,6 +265,8 @@
                 alert("Error updating villa: " + error.message);
                 return;
             }
+
+            console.log("Villa updated:", data);
         } else {
             const { error } = await supabase
                 .from("vb_villas")
@@ -241,8 +277,18 @@
             }
         }
 
-        await fetchVillas();
+        await fetchVillas(
+            searchTerm,
+            "created_at",
+            "desc",
+            rowsPerPage,
+            (currentPage - 1) * rowsPerPage,
+        );
         showModal = false;
+
+        alert(
+            isEditing ? "Villa updated successfully!" : "Villa added successfully!",
+        );
     }
 
     async function deleteVilla(id: string) {
@@ -254,7 +300,13 @@
             if (error) {
                 alert("Error deleting villa: " + error.message);
             } else {
-                await fetchVillas();
+                await fetchVillas(
+                    searchTerm,
+                    "created_at",
+                    "desc",
+                    rowsPerPage,
+                    (currentPage - 1) * rowsPerPage,
+                );
             }
         }
     }
@@ -273,7 +325,13 @@
         if (error) {
             console.error("Error updating villa status:", error);
         } else {
-            await fetchVillas();
+            await fetchVillas(
+                searchTerm,
+                "created_at",
+                "desc",
+                rowsPerPage,
+                (currentPage - 1) * rowsPerPage,
+            );
         }
     }
 
@@ -286,7 +344,13 @@
         if (error) {
             console.error("Error updating villa condition:", error);
         } else {
-            await fetchVillas();
+            await fetchVillas(
+                searchTerm,
+                "created_at",
+                "desc",
+                rowsPerPage,
+                (currentPage - 1) * rowsPerPage,
+            );
         }
     }
 </script>
@@ -307,10 +371,16 @@
                 placeholder="🔍 Search by name..."
                 class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-64 transition"
                 on:input={(e) => {
-                    const searchTerm = (
+                    searchTerm = (
                         e.target as HTMLInputElement
                     ).value.toLowerCase();
-                    fetchVillas(searchTerm, "created_at", "desc", limit, 0);
+                    fetchVillas(
+                        searchTerm,
+                        "created_at",
+                        "desc",
+                        rowsPerPage,
+                        0,
+                    );
                 }}
             />
             <!-- filter -->
@@ -339,7 +409,7 @@
             <button
                 class="bg-gray-200 text-gray-700 px-4 py-2 rounded-xl hover:bg-gray-300 text-sm transition"
                 on:click={() =>
-                    fetchVillas(null, "created_at", "desc", limit, 0)}
+                    fetchVillas(null, "created_at", "desc", rowsPerPage, 0)}
             >
                 🔄 Reset
             </button>
@@ -499,31 +569,31 @@
                                 </td>
                             {:else if col.key === "season_1_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "season_2_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "season_3_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "season_4_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "season_5_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "season_6_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "season_7_rate"}
                                 <td class="px-4 py-2">
-                                    {row[col.key] || "N/A"}
+                                    {formatCurrency(row[col.key]) || "N/A"}
                                 </td>
                             {:else if col.key === "actions"}
                                 <td class="px-4 py-2">
@@ -612,11 +682,9 @@
                                 )}"
                                 bind:value={newVilla[col.key]}
                             >
-                                <option value="" disabled selected
-                                    >SELECT STATUS</option
-                                >
-                                <option value="available">ACTIVE</option>
-                                <option value="rented">INACTIVE</option>
+                                <option value="" disabled>SELECT STATUS</option>
+                                <option value="Active">ACTIVE</option>
+                                <option value="Inactive">INACTIVE</option>
                             </select>
                         </label>
                     </div>
@@ -637,13 +705,12 @@
                             )}"
                             bind:value={newVilla[col.key]}
                         >
-                            <option value="" disabled selected
-                                >SELECT CONDITION</option
-                            >
-                            <option value="new">New</option>
-                            <option value="good">Good</option>
-                            <option value="needs_maintenance"
-                                >Needs Maintenance</option
+                            <option value="" disabled>SELECT CONDITION</option>
+                            <option value="Occupied">Occupied</option>
+                            <option value="Vacant clean">Vacant clean</option>
+                            <option value="Vacant dirty">Vacant Dirty</option>
+                            <option value="Ready for Inspection"
+                                >Ready for Inspection</option
                             >
                         </select>
                     </div>
@@ -664,9 +731,7 @@
                             )}"
                             bind:value={newVilla[col.key]}
                         >
-                            <option value="" disabled selected
-                                >SELECT OPTION</option
-                            >
+                            <option value="" disabled>SELECT OPTION</option>
                             <option value="true">Yes</option>
                             <option value="false">No</option>
                         </select>
@@ -688,9 +753,7 @@
                             )}"
                             bind:value={newVilla[col.key]}
                         >
-                            <option value="" disabled selected
-                                >SELECT OPTION</option
-                            >
+                            <option value="" disabled>SELECT OPTION</option>
                             <option value="true">Yes</option>
                             <option value="false">No</option>
                         </select>
@@ -712,9 +775,7 @@
                             )}"
                             bind:value={newVilla[col.key]}
                         >
-                            <option value="" disabled selected
-                                >SELECT OPTION</option
-                            >
+                            <option value="" disabled>SELECT OPTION</option>
                             <option value="true">Yes</option>
                             <option value="false">No</option>
                         </select>
@@ -736,9 +797,7 @@
                             )}"
                             bind:value={newVilla[col.key]}
                         >
-                            <option value="" disabled selected
-                                >SELECT OPTION</option
-                            >
+                            <option value="" disabled>SELECT OPTION</option>
                             <option value="true">Yes</option>
                             <option value="false">No</option>
                         </select>
@@ -748,7 +807,7 @@
                             {$formErrors.pet_allowed_pre_approval_status}
                         </p>
                     {/if}
-                {:else if col.key === "session_1_rate" || col.key === "session_2_rate" || col.key === "session_3_rate" || col.key === "session_4_rate" || col.key === "session_5_rate" || col.key === "session_6_rate" || col.key === "session_7_rate"}
+                {:else if col.key === "season_1_rate" || col.key === "season_2_rate" || col.key === "season_3_rate" || col.key === "season_4_rate" || col.key === "season_5_rate" || col.key === "season_6_rate" || col.key === "season_7_rate"}
                     <div class="space-y-1">
                         <label class="block text-sm font-medium text-gray-700"
                             >{col.title}</label