diff --git a/src/lib/CurrencyInput.svelte b/src/lib/CurrencyInput.svelte
new file mode 100644
index 0000000..69437cf
--- /dev/null
+++ b/src/lib/CurrencyInput.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    export let value: number = 0;      // The raw number
+    export let label: string = "";     // Field label
+    export let onInput: (() => void) | null = null; // Optional extra handler
+  
+    let formatted = "";
+  
+    // Format whenever value changes
+    $: formatted = `Rp ${value.toLocaleString("id-ID", {
+      minimumFractionDigits: 0
+    })}`;
+  
+    function handleInput(e: Event) {
+      let raw = (e.target as HTMLInputElement).value;
+      raw = raw.replace(/^Rp\s?/, "").replace(/[^\d]/g, "");
+      value = parseInt(raw) || 0;
+      formatted = `Rp ${value.toLocaleString("id-ID")}`;
+  
+      // ✅ If extra handler provided, run it
+      if (onInput) onInput();
+    }
+  </script>
+  
+  <label class="block text-sm font-medium text-gray-700">{label}</label>
+  <input
+    type="text"
+    bind:value={formatted}
+    placeholder="Rp 0"
+    class="w-full border p-2 rounded"
+    on:input={handleInput}
+  />
+  
\ No newline at end of file
diff --git a/src/routes/backoffice/issue/+page.svelte b/src/routes/backoffice/issue/+page.svelte
index 4f88317..c9146e8 100644
--- a/src/routes/backoffice/issue/+page.svelte
+++ b/src/routes/backoffice/issue/+page.svelte
@@ -2,6 +2,7 @@
     import { supabase } from "$lib/supabaseClient";
     import { onMount } from "svelte";
     import { writable } from "svelte/store";
+    import Pagination from "$lib/Pagination.svelte";
 
     const priority = [
         { label: "Low", value: "Low" },
@@ -137,8 +138,9 @@
         { label: "Water Feature", value: "Water Feature" }
     ];
     const columns: columns[] = [
-        { key: "description_of_the_issue", title: "Description of The Issue" },
+        
         { key: "issue_number", title: "Issue Number" },
+        { key: "description_of_the_issue", title: "Description of The Issue" },
         { key: "villa_name", title: "Villa Name" },
         { key: "villa_id", title: "Villa ID" },
         { key: "input_by", title: "Input By" },
@@ -253,7 +255,7 @@
     };
 
     // Reactive variables
-    let currentVillaFilter: string | null = null;
+    let currentVillaFilter: string | null = "";
     let currentSearchTerm: string | null = null;
     let showProjectModal = false;
     let selectedIssueId: string | null = null;
@@ -295,8 +297,31 @@
     let totalItems = 0;
     let currentPage = offset + 1;
     let rowsPerPage = limit;
-    $: totalPages = Math.ceil(totalItems / rowsPerPage);
+    let filteredRows: Issue[] = [];
+    $: paginatedRows = filteredRows.slice(
+        (currentPage - 1) * rowsPerPage,
+        currentPage * rowsPerPage
+        );
 
+    $: totalItems = filteredRows.length;
+    $: totalPages = Math.ceil(totalItems / rowsPerPage);
+    $: {
+        let rows = allRows;
+
+        if (currentVillaFilter) {
+            rows = rows.filter(r => r.villa_id === currentVillaFilter);
+        }
+
+        if (currentSearchTerm && currentSearchTerm.trim() !== "") {
+            const term = currentSearchTerm.toLowerCase();
+            rows = rows.filter(r =>
+            (r.description_of_the_issue || "").toLowerCase().includes(term)
+            );
+        }
+
+        filteredRows = rows;
+        currentPage = 1; // Optional: reset page when filter/search changes
+    }
     // Fetch existing project links and purchase orders
     async function fetchExistingProjectLinks() {
         const { data, error } = await supabase
@@ -319,49 +344,21 @@
         if (data) poItems = data;
     }
     // Fetch issues with optional filters
-    async function fetchIssues(
-        search: string | null = null,
-        villaNameFilter: string | null = null,
-        sort: string | null = "created_at",
-        order: "asc" | "desc" = "desc",
-        offset: number = 0,
-        limit: number = 10,
-    ) {
+    async function fetchIssues() {
         let query = supabase
             .from("vb_issues_data")
-            .select("*", { count: "exact" })
-            .order(sort || "created_at", { ascending: order === "asc" })
-            .range(offset, offset + limit - 1);
+            .select("*").order("issue_number", { ascending: true });
 
-        if (villaNameFilter) {
-            const villa = dataVilla.find(v => v.villa_name === villaNameFilter);
-            if (villa) {
-                query = query.eq("villa_id", villa.id);
-            }
-        }
+        const { data: issues, error } = await query;
 
-        if (search) {
-            query = query.ilike("description_of_the_issue", `%${search}%`);
-        }
-
-        const { data: issues, error, count } = await query;
         if (error) {
-            console.error("Error fetching issues:", error);
+            console.error(error);
             return;
         }
 
-        if (count !== undefined) {
-            totalItems = count ?? 0;
-        }
-
-        if (!issues || issues.length === 0) {
-            allRows = [];
-            return;
-        }
-
-        // Gabungkan data villa ke dalam setiap issue
-        allRows = issues;
+        allRows = issues || [];
     }
+
     // Function to handle form submission and save issue
     async function saveIssue(event: Event) {
         const session = await supabase.auth.getSession();
@@ -610,8 +607,6 @@
             requested_by: "",
             requested_date: formatDate(today),
             po_due: formatDate(dueDate),
-            po_item: "",
-            po_quantity: "",
             po_type: ""
         };
 
@@ -748,39 +743,24 @@
                 id="issue-search"
                 placeholder="🔍 Search by Issue..."
                 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) => {
-                    currentSearchTerm = (e.target as HTMLInputElement).value.toLowerCase();
-                    fetchIssues( currentSearchTerm, currentVillaFilter);
-                }}
+                bind:value={currentSearchTerm}
+
             />
             <select
                 id="villa-filter"
                 class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-48 transition"
-                on:change={(e) => {
-                        currentVillaFilter = (e.target as HTMLSelectElement).value || null;
-                        fetchIssues(currentSearchTerm, currentVillaFilter);
-                    }}
+                bind:value={currentVillaFilter}
                 >
                     <option value="">All Villas</option>
                     {#each dataVilla as villa}
-                        <option value={villa.villa_name}>{villa.villa_name}</option>
+                        <option value={villa.id}>{villa.villa_name}</option>
                     {/each}
             </select>
             <button
                 class="bg-gray-200 text-gray-700 px-4 py-2 rounded-xl hover:bg-gray-300 text-sm transition"
                 on:click={() =>{
-                    currentVillaFilter = null;
-                    currentSearchTerm = null;
-                    const searchInput = document.getElementById("issue-search") as HTMLInputElement;
-                    if (searchInput) searchInput.value = "";
-
-                    const moveSelect = document.getElementById("move-filter") as HTMLSelectElement;
-                    if (moveSelect) moveSelect.value = "";
-
-                    const villaSelect = document.getElementById("villa-filter") as HTMLSelectElement;
-                    if (villaSelect) villaSelect.value = "";
-
-                    fetchIssues(null, null, null);
+                currentVillaFilter = "";
+                currentSearchTerm = "";
                 }}
             >
                 🔄 Reset
@@ -798,7 +778,7 @@
             <thead class="bg-gray-100">
                 <tr>
                     {#each formColumnsDisplay as col}
-                        {#if col.key === "description_of_the_issue"}
+                        {#if col.key === "issue_number"}
                             <th
                                 class="sticky left-0 px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
                                 style="background-color: #f0f8ff; z-index: 10;"
@@ -816,10 +796,10 @@
                 </tr>
             </thead>
             <tbody class="divide-y divide-gray-200 bg-white">
-                {#each allRows as row}
+                {#each paginatedRows as row}
                     <tr class="hover:bg-gray-50 transition">
                         {#each formColumnsDisplay as col}
-                            {#if col.key === "description_of_the_issue"}
+                            {#if col.key === "issue_number"}
                                 <td
                                     class="sticky left-0 px-4 py-2 font-medium text-blue-600 max-w-xs whitespace-normal align-top break-words"
                                     style="background-color: #f0f8ff; cursor: pointer;"
@@ -1007,39 +987,31 @@
     </div>
 
     <!-- Pagination controls -->
-    <div class="flex justify-between items-center text-sm">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 text-sm">
+        <!-- Left: Showing X–Y of Z -->
         <div>
-            Showing {(currentPage - 1) * rowsPerPage + 1}–
-            {Math.min(currentPage * rowsPerPage, allRows.length)} of {allRows.length}
+          Showing {(currentPage - 1) * rowsPerPage + 1}–
+          {Math.min(currentPage * rowsPerPage, filteredRows.length)}
+          of {filteredRows.length}
         </div>
-        <div class="space-x-2">
-            <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
-                on:click={() => goToPage(currentPage - 1)}
-                disabled={currentPage === 1}
-            >
-                Previous
-            </button>
-            {#each Array(totalPages)
-                .fill(0)
-                .map((_, i) => i + 1) as page}
-                <button
-                    class="px-3 py-1 rounded border text-sm
-                        {currentPage === page
-                        ? 'bg-blue-600 text-white border-blue-600'
-                        : 'bg-white border-gray-300 hover:bg-gray-100'}"
-                    on:click={() => goToPage(page)}
-                >
-                    {page}
-                </button>
-            {/each}
-            <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
-                on:click={() => goToPage(currentPage + 1)}
-                disabled={currentPage === totalPages}
-            >
-                Next
-            </button>
+      
+        <!-- Right: Rows per page & Pagination -->
+        <div class="flex items-center space-x-2">
+          <label class="text-gray-600">Rows per page:</label>
+          <select
+            bind:value={rowsPerPage}
+            class="border px-2 py-1 rounded"
+            on:change={() => {
+              currentPage = 1; // Reset to first page when changing page size
+            }}
+          >
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+      
+          <Pagination {totalPages} {currentPage} {goToPage} />
         </div>
     </div>
 </div>
@@ -1486,21 +1458,6 @@
             </select>
         </label>
 
-        <label class="block">
-            Product *
-            <select bind:value={newPO.po_item} class="input w-full">
-                <option value="">-- Select Product --</option>
-                {#each poItems as item}
-                    <option value={item.item_name}>{item.item_name}</option>
-                {/each}
-            </select>
-        </label>
-
-        <label class="block">
-            Quantity *
-            <input type="number" bind:value={newPO.po_quantity} class="input w-full" />
-        </label>
-
         <label class="block">
             Type *
             <select bind:value={newPO.po_type} class="input w-full">
diff --git a/src/routes/backoffice/purchaseorder/+page.svelte b/src/routes/backoffice/purchaseorder/+page.svelte
index 71def2b..e39ff8b 100644
--- a/src/routes/backoffice/purchaseorder/+page.svelte
+++ b/src/routes/backoffice/purchaseorder/+page.svelte
@@ -2,6 +2,7 @@
     import { onMount } from "svelte";
     import { supabase } from "$lib/supabaseClient";
     import { getSessionAuthId } from "$lib/utils/authUtil";
+    import CurrencyInput from "$lib/CurrencyInput.svelte";
 
 
     type PurchaseOrderInsert = {
@@ -77,9 +78,10 @@
     };
 
     const columns: columns[] = [
+        
+        { key: "purchase_order_number", title: "PO Number" },
         { key: "issue_name", title: "Issue Name" },
         { key: "requested_date", title: "Requested Date" },
-        { key: "purchase_order_number", title: "PO Number" },
         { key: "po_status", title: "PO Status" },
         { key: "villa_data", title: "Villa Name" },
         { key: "po_item", title: "PO Product" },
@@ -224,6 +226,8 @@
         acknowledged_by: "",
         acknowledged_date: ""
     };
+    let selectedVillaId: string | null = null;
+    let searchTerm: string = "";
     let showPreparedModal = false;
     let selectedPO = null;
     let preparedByOptions: any[] = [];
@@ -244,7 +248,8 @@
         approved_vendor: "",
         approved_price: 0,
         total_approved_order_amount: 0
-    };    
+    };
+    let formattedPrice = "";    
     let showReceivedModal = false;
     let receivedForm = {
         po_number: "",
@@ -273,6 +278,11 @@
         currentPage * rowsPerPage,
     );
     $: currentPage = 1; // Reset to first page when allRows changes
+    $: formattedPrice = preparedForm.q1_vendor_price.toLocaleString("id-ID", {
+    style: "currency",
+    currency: "IDR",
+    minimumFractionDigits: 0,
+  });
 
     // Function to format numbers as ordinal (1st, 2nd, 3rd, etc.)
     function ordinal(num: number) {
@@ -682,7 +692,7 @@
         let query = supabase
             .from("vb_purchaseorder_data")
             .select("*")
-            .order(sort || "created_at", { ascending: order === "asc" })
+            .order(sort || "purchase_order_number", { ascending: order === "desc" })
             .range(offset, offset + limit - 1);
 
             if (filter) {
@@ -1065,7 +1075,7 @@
             <thead class="bg-gray-100">
                 <tr>
                     {#each columns as col}
-                        {#if col.key === "issue_name"}
+                        {#if col.key === "purchase_order_number"}
                             <th
                                 class="sticky left-0 px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
                                 style="background-color: #f0f8ff; z-index: 10;"
@@ -1098,10 +1108,10 @@
                         <td class="px-4 py-2 text-gray-700 max-w-xs whitespace-normal align-top break-words">
                             {row[col.key] || "—"}
                         </td>
-                        {:else if col.key === "issue_name"}
+                        {:else if col.key === "purchase_order_number"}
                         <td class="sticky left-0 px-4 py-2 font-medium text-blue-600 max-w-xs whitespace-normal align-top break-words"
                                 style="background-color: #f0f8ff; cursor: pointer;">
-                            {row.issue_name || "—"}
+                            {row.purchase_order_number || "—"}
                         </td>
                         {:else if col.key === "prepared"}
                         <td class="px-4 py-2 text-center">
@@ -1209,16 +1219,7 @@
                           >
                             Payment
                           </button>
-                        </td>
-                      {:else if col.key === "actions"}
-                        <td class="px-4 py-2">
-                            <button
-                                class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
-                                on:click={() => openEditModal(row)}
-                            >
-                                ✏️ Edit
-                            </button>
-                            
+                          
                             <button
                                 class="inline-flex items-center gap-1 rounded bg-teal-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-teal-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
                                 on:click={() => printPO(row)}
@@ -1232,6 +1233,16 @@
                                 🖨️ Print
                                 {/if}
                             </button>
+                        </td>
+                      {:else if col.key === "actions"}
+                        <td class="px-4 py-2">
+                            <button
+                                class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
+                                on:click={() => openEditModal(row)}
+                            >
+                                ✏️ Edit
+                            </button>
+                            
                             <button
                                 class="inline-flex items-center gap-1 rounded bg-red-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-red-700"
                                 on:click={() => deleteProject(row.id)}
@@ -1567,8 +1578,23 @@
           <option value={v.name}>{v.name}</option>
         {/each}
       </select>
-      <input type="number" bind:value={preparedForm.q1_vendor_price} placeholder="Q1 Vendor Price" class="w-full border p-2" />
-
+      <CurrencyInput bind:value={preparedForm.q1_vendor_price} label="Q1 Vendor Price" />
+      <label>Q2 Vendor</label>
+      <select bind:value={preparedForm.q2_vendor} class="w-full border p-2">
+        <option value="" disabled>Select Vendor</option>
+        {#each vendorOptions as v}
+          <option value={v.name}>{v.name}</option>
+        {/each}
+      </select>
+      <CurrencyInput bind:value={preparedForm.q2_vendor_price} label="Q1 Vendor Price" />
+      <label>Q3 Vendor</label>
+      <select bind:value={preparedForm.q3_vendor} class="w-full border p-2">
+        <option value="" disabled>Select Vendor</option>
+        {#each vendorOptions as v}
+          <option value={v.name}>{v.name}</option>
+        {/each}
+      </select>
+      <CurrencyInput bind:value={preparedForm.q3_vendor_price} label="Q1 Vendor Price" />
       <!-- Repeat for Q2, Q3 -->
       <!-- Approved -->
       <label>Approved Quantity</label>
@@ -1581,9 +1607,11 @@
           <option value={v.name}>{v.name}</option>
         {/each}
       </select>
-
-      <label>Approved Price</label>
-      <input type="number" bind:value={preparedForm.approved_price} on:input={() => updateTotalAmount()} class="w-full border p-2" />
+      <CurrencyInput
+        bind:value={preparedForm.approved_price}
+        label="Approved Price"
+        onInput={updateTotalAmount}
+        />
 
       <label>Total Approved Order Amount</label>
       <input type="number" value={preparedForm.total_approved_order_amount} disabled class="w-full border p-2 bg-gray-100" />