penamabahan menu approval untill received

This commit is contained in:
Aji Setiaji
2025-05-29 23:55:26 +07:00
parent 3d8575d68c
commit ec9d47846e
10 changed files with 4781 additions and 107 deletions

View File

@@ -122,12 +122,28 @@
if (page >= 1 && page <= totalPages) currentPage = page;
}
async function fetchPurchaseOrder() {
const { data, error } = await supabase
.from("purchase_orders")
.select("*")
.order("created_at", { ascending: false });
async function fetchPurchaseOrder(
filter: string | null = null,
search: string | null = null,
sort: string | null = null,
order: "asc" | "desc" = "desc",
offset: number = 0,
limit: number = 1000,
) {
let query = supabase
.from("purchaseorder_data")
.select(
"id, purchase_order_number, villa_data, issue_id, prepared_date, po_type, po_quantity, po_status, approved_vendor, acknowledged, acknowledge_by, approved_price, approved_quantity, total_approved_order_amount, approval, completed_status, received, received_by, input_by, approved_by, created_at",
)
.order(sort || "created_at", { ascending: order === "asc" })
.range(offset, offset + limit - 1);
if (filter) {
query = query.eq("po_type", filter);
}
if (search) {
query = query.ilike("purchase_order_number", `%${search}%`);
}
const { data, error } = await query;
if (error) {
console.error("Error fetching purchase orders:", error);
return;
@@ -158,7 +174,7 @@
// masukkan villa name dan issue name ke dalam data
allRows = data.map((row) => {
const issue = issues.find((issue) => issue.id === row.issue_id);
const villa = villas.find((villa) => villa.id === issue.villa_name);
const villa = villas.find((villa) => villa.id === issue.villa_id);
const vendor = vendors.find(
(vendor) => vendor.id === row.approved_vendor,
);
@@ -166,7 +182,7 @@
return {
...row,
name: issue ? issue.name : "Unknown Issue",
villa_name: villa ? villa.name : "Unknown Villa",
villa_name: row.villa_data,
priority: issue ? issue.priority : "Unknown Priority",
approved_vendor: vendor
? vendor.name
@@ -476,9 +492,14 @@
</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">
<h2
class="text-lg font-semibold text-gray-800 flex items-center gap-2"
>
<span>📦</span>
Purchase Order List
</h2>
<p class="text-sm text-gray-600">
@@ -486,12 +507,36 @@
delete purchase orders as needed.
</p>
</div>
<button
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
on:click={() => openModal()}
>
Add Purchase Order
</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();
fetchPurchaseOrder(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;
fetchPurchaseOrder(filter, null, null, "desc");
}}
>
<option value="">All Issues</option>
<option value="PROJECT">Project Issues</option>
<option value="PURCHASE_ORDER">Purchase Order Issues</option>
</select>
<button
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
on:click={() => openModal()}
>
Add Purchase Order
</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">
@@ -526,33 +571,6 @@
>
{row[col.key as keyof PurchaseOrderDisplay]}
</td>
{:else if col.key === "po_status"}
<td class="px-4 py-2">
<select
bind:value={
row[
col.key as keyof PurchaseOrderDisplay
]
}
class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
on:change={(e: Event) => {
updatePurchaseOrderStatus(
e,
row.id,
row,
);
}}
>
{#each statusOptions as option}
<option
value={option.value}
style="background-color: {option.color};"
>
{option.label}
</option>
{/each}
</select>
</td>
{:else if col.key === "approval"}
<td class="px-4 py-2">
<select
@@ -569,9 +587,10 @@
row,
);
}}
disabled
>
<option value="" disabled selected
>SELECT APPROVAL</option
>ON PROSES</option
>
<option value="APPROVED"
>APPROVED</option
@@ -600,6 +619,7 @@
);
}
}}
disabled
/>
</td>
{:else if col.key === "received"}
@@ -621,6 +641,7 @@
);
}
}}
disabled
/>
</td>
{:else if col.key === "completed_status"}
@@ -645,9 +666,10 @@
);
}
}}
disabled
>
<option value="" disabled selected
>SELECT COMPLETE</option
>ON PROSES</option
>
<option value="APPROVED"
>RECEIVED COMPLETE</option