penamabahan menu approval untill received

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

@@ -10,6 +10,7 @@
         input_by: string;
         project_due_date: string;
         picture_link: string;
+        villa_data?: string; // Optional, if not always present
     };
 
     type insetProject = {
@@ -31,7 +32,6 @@
         input_by: string;
         issue_number: string;
         issue_id: string;
-        villa_name: string;
         report_date: string;
         project_due_date: string;
     };
@@ -82,12 +82,34 @@
         if (page >= 1 && page <= totalPages) currentPage = page;
     }
 
-    async function fetchProjects() {
-        // Fetch all projects
-        const { data, error } = await supabase
-            .from("projects")
-            .select("*")
-            .order("id", { ascending: false });
+    async function fetchProjects(
+        filter: string | null = null,
+        searchTerm: string | null = null,
+        sortBy: string | null = null,
+        sortOrder: "asc" | "desc" = "asc",
+        offset: number = 0,
+        limit: number = 10,
+    ) {
+        let query = supabase
+            .from("projects_data")
+            .select("*", { count: "exact" })
+            .order(sortBy || "created_at", { ascending: sortOrder === "asc" })
+            .range(offset, offset + limit - 1);
+        // Apply filter if provided
+        if (filter) {
+            query = query.eq("priority", filter);
+        }
+        // Apply search term if provided
+        if (searchTerm) {
+            query = query.ilike("issue_name", `%${searchTerm}%`);
+        }
+
+        // Fetch projects
+        const { data, error } = await query;
+        if (error) {
+            console.error("Error fetching projects:", error);
+            return;
+        }
 
         // ambil issue_id dari projects kemudian ambil data issue yang sesuai
         const issueIds = data?.map((project: Project) => project.issue_id);
@@ -103,6 +125,8 @@
             return;
         }
 
+        allRows = []; // Reset allRows before populating
+
         // Set allRows to the combined data
         allRows = data.map((project: Project) => {
             const issue = issueData.find(
@@ -122,7 +146,7 @@
                 area_of_villa: issue ? issue.area_of_villa : "Unknown",
                 input_by: project.input_by,
                 issue_number: issue ? issue.issue_number : "Unknown",
-                villa_name: issue ? issue.villa_name : "Unknown",
+                villa_name: issue ? project.villa_data : "Unknown",
                 report_date: issue ? issue.reported_date : "Unknown",
                 project_due_date: project.project_due_date,
             };
@@ -357,20 +381,53 @@
 </script>
 
 <div>
-    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+    <div
+        class="p-6 bg-white shadow-md rounded-2xl mb-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4"
+    >
         <div>
-            <h2 class="text-lg font-semibold text-gray-800">Project List</h2>
+            <h2 class="text-lg font-semibold text-gray-800">📋 Project List</h2>
             <p class="text-sm text-gray-600">
-                Manage your projects here. You can add, edit, or delete
-                projects.
+                Manage your projects and tasks efficiently.
             </p>
         </div>
-        <button
-            class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
-            on:click={() => openModal()}
-        >
-            ➕ Add Projects
-        </button>
+        <div class="flex flex-col sm:flex-row sm:items-center gap-2">
+            <input
+                type="text"
+                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 = (
+                        e.target as HTMLInputElement
+                    ).value.toLowerCase();
+                    fetchProjects(null, searchTerm, "created_at", "desc");
+                }}
+            />
+            <select
+                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) => {
+                    const filter = (e.target as HTMLSelectElement).value;
+                    fetchProjects(filter, null, null, "desc");
+                }}
+            >
+                <option value="">Filter by Priority</option>
+                <option value="High">High</option>
+                <option value="Medium">Medium</option>
+                <option value="Low">Low</option>
+            </select>
+            <button
+                class="bg-gray-200 text-gray-700 px-4 py-2 rounded-xl hover:bg-gray-300 text-sm transition"
+                on:click={() =>
+                    fetchProjects(null, null, "created_at", "desc", 0, 10)}
+            >
+                🔄 Reset
+            </button>
+            <button
+                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
+                on:click={() => openModal()}
+            >
+                ➕ Add Project
+            </button>
+        </div>
     </div>
     <div class="overflow-x-auto rounded-lg shadow mb-4">
         <table class="min-w-[1000px] divide-y divide-gray-200 text-sm w-max">