1165 lines
45 KiB
Svelte
1165 lines
45 KiB
Svelte
<script lang="ts">
|
||
import { onMount } from "svelte";
|
||
import Select from "svelte-select";
|
||
import { supabase } from "$lib/supabaseClient";
|
||
import { timestampToDateTime } from "$lib/utils/conversion";
|
||
import { getSessionAuthId } from "$lib/utils/authUtil";
|
||
|
||
type PurchaseOrderInsert = {
|
||
issue_id: string;
|
||
prepared_date: string;
|
||
po_type: string;
|
||
po_quantity: number;
|
||
po_price: number;
|
||
po_total_price: number;
|
||
input_by: string;
|
||
updated_by: string;
|
||
updated_at: string;
|
||
};
|
||
|
||
let purchaseOrderInsert: PurchaseOrderInsert = {
|
||
issue_id: "",
|
||
prepared_date: "",
|
||
po_type: "",
|
||
po_quantity: 0,
|
||
po_price: 0,
|
||
po_total_price: 0,
|
||
input_by: "",
|
||
updated_by: "",
|
||
updated_at: new Date().toISOString(),
|
||
};
|
||
|
||
type PurchaseOrders = {
|
||
id: string;
|
||
purchase_order_number: string;
|
||
prepared_date: string;
|
||
po_type: string;
|
||
po_quantity: number;
|
||
po_status: string;
|
||
approved_vendor: string;
|
||
proses_to_approval: boolean;
|
||
acknowledged: boolean;
|
||
approved_vendor_id: string;
|
||
acknowledge_by: string;
|
||
approved_price: number;
|
||
approved_quantity: number;
|
||
total_approved_order_amount: number;
|
||
approval: string;
|
||
completed_status: string;
|
||
received: boolean;
|
||
received_by: string;
|
||
input_by: string;
|
||
issue_id: string;
|
||
approved_by: string;
|
||
created_at: string;
|
||
};
|
||
|
||
type PurchaseOrderDisplay = {
|
||
id: string;
|
||
name: string;
|
||
purchase_order_number: string;
|
||
villa_name: string;
|
||
priority: string;
|
||
prepared_date: string;
|
||
po_type: string;
|
||
po_quantity: number;
|
||
po_price: number;
|
||
po_total_price: number;
|
||
po_status: string;
|
||
approved_vendor: string;
|
||
acknowledged: boolean;
|
||
acknowledge_by: string;
|
||
approved_by: string;
|
||
approved_price: number;
|
||
approved_quantity: number;
|
||
total_approved_order_amount: number;
|
||
proses_to_approval: boolean;
|
||
approval: string;
|
||
completed_status: string;
|
||
received: boolean;
|
||
received_by: string;
|
||
created_at: string;
|
||
updated_at?: string;
|
||
updated_by?: string;
|
||
updated_name?: string;
|
||
input_by?: string;
|
||
input_name?: string;
|
||
};
|
||
|
||
let allRows: PurchaseOrderDisplay[] = [];
|
||
|
||
type columns = {
|
||
key: string;
|
||
title: string;
|
||
};
|
||
|
||
const columns: columns[] = [
|
||
{ key: "name", title: "Name" },
|
||
{ key: "purchase_order_number", title: "Purchase Order Number" },
|
||
{ key: "villa_name", title: "Villa Name" },
|
||
{ key: "priority", title: "Priority" },
|
||
{ key: "prepared_date", title: "Prepared Date" },
|
||
{ key: "po_type", title: "PO Type" },
|
||
{ key: "po_quantity", title: "PO Quantity" },
|
||
{ key: "po_price", title: "PO Price" },
|
||
{ key: "po_total_price", title: "PO Total Price" },
|
||
{ key: "po_status", title: "PO Status" },
|
||
{ key: "proses_to_approval", title: "PROSES TO APPROVAL" },
|
||
{ key: "approved_vendor", title: "Approved Vendor" },
|
||
{ key: "acknowledged", title: "Acknowledged" },
|
||
{ key: "acknowledged_name", title: "Acknowledged By" },
|
||
{ key: "approved_name", title: "Approved By" },
|
||
{ key: "approved_price", title: "Approved Price" },
|
||
{ key: "approved_quantity", title: "Approved Quantity" },
|
||
{
|
||
key: "total_approved_order_amount",
|
||
title: "Total Approved Order Amount",
|
||
},
|
||
{ key: "approval", title: "Approval" },
|
||
{ key: "completed_status", title: "Completed Status" },
|
||
{ key: "received", title: "Received" },
|
||
{ key: "received_name", title: "Received By" },
|
||
{ key: "inputed_name", title: "Input By" },
|
||
{ key: "updated_name", title: "Updated By" },
|
||
{ key: "updated_at", title: "Updated At" },
|
||
{ key: "created_at", title: "Created At" },
|
||
{ key: "actions", title: "Actions" }, // For edit/delete buttons
|
||
];
|
||
|
||
let currentPage = 1;
|
||
let rowsPerPage = 10;
|
||
$: totalPages = Math.ceil(allRows.length / rowsPerPage);
|
||
$: paginatedRows = allRows.slice(
|
||
(currentPage - 1) * rowsPerPage,
|
||
currentPage * rowsPerPage,
|
||
);
|
||
|
||
function goToPage(page: number) {
|
||
if (page >= 1 && page <= totalPages) currentPage = page;
|
||
}
|
||
|
||
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("vb_purchaseorder_data")
|
||
.select("*")
|
||
.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;
|
||
}
|
||
|
||
// fetch issue and villa names
|
||
const issueIds = data.map((row) => row.issue_id);
|
||
const { data: issues, error: issueError } = await supabase
|
||
.from("vb_issues")
|
||
.select("*")
|
||
.in("id", issueIds);
|
||
|
||
if (issueError) {
|
||
console.error("Error fetching issues:", issueError);
|
||
return;
|
||
}
|
||
|
||
const villaIds = issues.map((row) => row.villa_name).filter(Boolean);
|
||
const { data: villas, error: villaError } = await supabase
|
||
.from("villas")
|
||
.select("id, name")
|
||
.in("id", villaIds);
|
||
if (villaError) {
|
||
console.error("Error fetching villas:", villaError);
|
||
return;
|
||
}
|
||
|
||
// masukkan villa name dan issue name ke dalam data
|
||
allRows = data.map((row: any) => {
|
||
const issue = issues.find((issue) => issue.id === row.issue_id);
|
||
const villa = villas.find((villa) => villa.id === issue.villa_id);
|
||
const vendor = vendors.find(
|
||
(vendor) => vendor.id === row.approved_vendor,
|
||
);
|
||
|
||
return {
|
||
...row,
|
||
name: issue ? issue.name : "Unknown Issue",
|
||
villa_name: row.villa_data,
|
||
priority: issue ? issue.priority : "Unknown Priority",
|
||
approved_vendor: vendor
|
||
? vendor.name
|
||
: "Unknown Approved Vendor",
|
||
approval: row.approval || "",
|
||
completed_status: row.completed_status || "",
|
||
proses_to_approval: row.proses_to_approval || false,
|
||
po_price: row.po_price || 0,
|
||
po_total_price: row.po_total_price || 0,
|
||
} as PurchaseOrderDisplay;
|
||
});
|
||
}
|
||
|
||
//fetch all issues
|
||
async function fetchIssues() {
|
||
const { data, error } = await supabase
|
||
.from("vb_issues")
|
||
.select("id, name");
|
||
|
||
if (error) {
|
||
console.error("Error fetching issues:", error);
|
||
return [];
|
||
}
|
||
|
||
issues = data.map((issue) => ({
|
||
id: issue.id,
|
||
name: issue.name,
|
||
}));
|
||
}
|
||
|
||
async function fetchVendors() {
|
||
const { data, error } = await supabase
|
||
.from("vb_vendor")
|
||
.select("id, name");
|
||
|
||
if (error) {
|
||
console.error("Error fetching vendors:", error);
|
||
return [];
|
||
}
|
||
|
||
vendors = data.map((vendor) => ({
|
||
id: vendor.id,
|
||
name: vendor.name,
|
||
}));
|
||
}
|
||
|
||
onMount(() => {
|
||
fetchPurchaseOrder();
|
||
fetchVendors();
|
||
});
|
||
|
||
$: currentPage = 1; // Reset to first page when allRows changes
|
||
|
||
let showModal = false;
|
||
let isEditing = false;
|
||
let currentEditingId: string | null = null;
|
||
let newPurchaseOrders: Record<string, any> = {};
|
||
let vendors: { id: string; name: string }[] = [];
|
||
let issues: { id: string; name: string }[] = [];
|
||
const excludedKeys = [
|
||
"id",
|
||
"priority",
|
||
"villa_name",
|
||
"purchase_order_number",
|
||
"issue_id",
|
||
"number_project",
|
||
"input_by",
|
||
"created_at",
|
||
"actions",
|
||
"acknowledged",
|
||
"acknowledge_by",
|
||
"approval",
|
||
"completed_status",
|
||
"received",
|
||
"received_by",
|
||
"proses_to_approval",
|
||
"approved_by",
|
||
"name",
|
||
"po_status",
|
||
"approved_quantity",
|
||
"total_approved_order_amount",
|
||
"approved_vendor",
|
||
"approved_price",
|
||
"updated_at",
|
||
"updated_by",
|
||
"updated_name",
|
||
"inputed_name",
|
||
];
|
||
const formColumns = columns.filter(
|
||
(col) => !excludedKeys.includes(col.key),
|
||
);
|
||
|
||
async function openModal(purchase: PurchaseOrderDisplay | null = null) {
|
||
await fetchIssues();
|
||
if (purchase) {
|
||
isEditing = true;
|
||
currentEditingId = purchase.id;
|
||
newPurchaseOrders = { ...purchase };
|
||
} else {
|
||
isEditing = false;
|
||
currentEditingId = null;
|
||
newPurchaseOrders = {};
|
||
}
|
||
showModal = true;
|
||
}
|
||
|
||
async function saveProject() {
|
||
// session check
|
||
const session = await supabase.auth.getSession();
|
||
|
||
if (!session.data.session) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
|
||
const user = session.data.session.user;
|
||
|
||
const inputBy = user.id;
|
||
|
||
if (!validateInput()) {
|
||
return;
|
||
}
|
||
|
||
purchaseOrderInsert = {
|
||
issue_id: newPurchaseOrders.issue_id || "",
|
||
prepared_date: newPurchaseOrders.prepared_date || "",
|
||
po_type: newPurchaseOrders.po_type || "",
|
||
po_quantity: newPurchaseOrders.po_quantity || 0,
|
||
po_price: newPurchaseOrders.po_price || 0,
|
||
po_total_price:
|
||
newPurchaseOrders.po_quantity * newPurchaseOrders.po_price || 0,
|
||
input_by: inputBy,
|
||
updated_by: inputBy,
|
||
updated_at: new Date().toISOString(),
|
||
};
|
||
|
||
if (isEditing && currentEditingId) {
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update(purchaseOrderInsert)
|
||
.eq("id", currentEditingId);
|
||
|
||
if (error) {
|
||
console.error("Error updating purchase order:", error);
|
||
return;
|
||
}
|
||
} else {
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.insert(purchaseOrderInsert);
|
||
|
||
if (error) {
|
||
console.error("Error inserting purchase order:", error);
|
||
return;
|
||
}
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
showModal = false;
|
||
}
|
||
|
||
async function deleteProject(id: string) {
|
||
const { error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.delete()
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error("Error deleting project:", error);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
|
||
const statusOptions = [
|
||
{ label: "Requested", value: "REQUESTED", color: "#e5e7eb" },
|
||
{ label: "Prepared", value: "PREPARED", color: "#93c5fd" },
|
||
{ label: "Approved", value: "APPROVED", color: "#34d399" },
|
||
{ label: "Acknowledged", value: "ACKNOWLEDGE", color: "#60a5fa" },
|
||
{
|
||
label: "Received - Incomplete",
|
||
value: "RECEIVED INCOMPLETE",
|
||
color: "#fb923c",
|
||
},
|
||
{
|
||
label: "Received - Completed",
|
||
value: "RECEIVED COMPLETED",
|
||
color: "#10b981",
|
||
},
|
||
{ label: "Canceled", value: "CANCELED", color: "#f87171" },
|
||
];
|
||
|
||
function getStatusOption(value: string) {
|
||
return statusOptions.find((option) => option.value === value) ?? null;
|
||
}
|
||
|
||
//validate input fields purchase order
|
||
function validateInput() {
|
||
const requiredFields = [
|
||
"prepared_date",
|
||
"po_type",
|
||
"po_quantity",
|
||
"po_price",
|
||
];
|
||
for (const field of requiredFields) {
|
||
if (!newPurchaseOrders[field]) {
|
||
alert(`Please fill in the ${field} field.`);
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function validateInputApproval() {
|
||
const requiredFields = ["approved_price"];
|
||
for (const field of requiredFields) {
|
||
if (!newPurchaseOrders[field]) {
|
||
alert(`Please fill in the ${field} field.`);
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
function validateInputProsesToAprroval() {
|
||
const requiredFields = ["po_type", "po_quantity", "po_price"];
|
||
for (const field of requiredFields) {
|
||
if (!newPurchaseOrders[field]) {
|
||
alert(`Please fill in the ${field} field.`);
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
|
||
async function updateProsesToApproval(id: string, status: boolean) {
|
||
const sessionId = await getSessionAuthId();
|
||
if (!sessionId) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
|
||
if (!validateInputProsesToAprroval()) {
|
||
return;
|
||
}
|
||
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update({
|
||
proses_to_approval: status,
|
||
po_status: "REQUESTED",
|
||
updated_by: sessionId,
|
||
updated_at: new Date().toISOString(),
|
||
})
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error(
|
||
"Error updating purchase order proses to approval:",
|
||
error,
|
||
);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
|
||
async function updatePurchaseOrderStatus(
|
||
e: Event,
|
||
id: string,
|
||
row: PurchaseOrderDisplay,
|
||
) {
|
||
const sessionId = await getSessionAuthId();
|
||
if (!sessionId) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
const selectedOption = (e.target as HTMLSelectElement)?.value ?? "";
|
||
const option = getStatusOption(selectedOption);
|
||
|
||
newPurchaseOrders = {
|
||
...row,
|
||
po_status: option?.value || row.po_status,
|
||
};
|
||
|
||
if (option?.value === "APPROVED") {
|
||
if (!validateInput()) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
}
|
||
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update({ po_status: newPurchaseOrders.po_status })
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error("Error updating purchase order status:", error);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
|
||
async function acknowledgedOk(id: string, status: boolean) {
|
||
const sessionId = await getSessionAuthId();
|
||
if (!sessionId) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update({
|
||
acknowledged: status,
|
||
updated_by: sessionId,
|
||
updated_at: new Date().toISOString(),
|
||
})
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error("Error acknowledging purchase order:", error);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
|
||
async function receivedOk(id: string, status: boolean) {
|
||
const sessionId = await getSessionAuthId();
|
||
if (!sessionId) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update({
|
||
receivedOk: status,
|
||
updated_by: sessionId,
|
||
updated_at: new Date().toISOString(),
|
||
})
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error("Error acknowledging purchase order:", error);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
|
||
async function updatePurchaseOrderApprovalStatus(
|
||
e: Event,
|
||
id: string,
|
||
row: PurchaseOrderDisplay,
|
||
) {
|
||
const sessionId = await getSessionAuthId();
|
||
if (!sessionId) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
const selectedOption = (e.target as HTMLSelectElement)?.value ?? "";
|
||
const option = getStatusOption(selectedOption);
|
||
|
||
newPurchaseOrders = {
|
||
...row,
|
||
approval: option?.value || row.approval,
|
||
};
|
||
|
||
if (option?.value === "APPROVED") {
|
||
if (!validateInputApproval()) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
}
|
||
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update({
|
||
approval: newPurchaseOrders.approval,
|
||
updated_by: sessionId,
|
||
updated_at: new Date().toISOString(),
|
||
})
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error("Error updating purchase order status:", error);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
|
||
async function completedStatusOk(id: string, status: string) {
|
||
const sessionId = await getSessionAuthId();
|
||
if (!sessionId) {
|
||
alert("You must be logged in to perform this action.");
|
||
return;
|
||
}
|
||
const { data, error } = await supabase
|
||
.from("vb_purchase_orders")
|
||
.update({
|
||
completed_status: status,
|
||
updated_by: sessionId,
|
||
updated_at: new Date().toISOString(),
|
||
})
|
||
.eq("id", id);
|
||
|
||
if (error) {
|
||
console.error("Error acknowledging purchase order:", error);
|
||
return;
|
||
}
|
||
|
||
await fetchPurchaseOrder();
|
||
}
|
||
</script>
|
||
|
||
<div>
|
||
<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 flex items-center gap-2"
|
||
>
|
||
<span>📦</span>
|
||
Purchase Order List
|
||
</h2>
|
||
<p class="text-sm text-gray-600">
|
||
Manage your purchase orders efficiently. You can add, edit, or
|
||
delete purchase orders as needed.
|
||
</p>
|
||
</div>
|
||
<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">
|
||
<thead class="bg-gray-100">
|
||
<tr>
|
||
{#each columns as col}
|
||
{#if col.key === "name"}
|
||
<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;"
|
||
>
|
||
{col.title}
|
||
</th>
|
||
{:else}
|
||
<th
|
||
class="px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
|
||
>
|
||
{col.title}
|
||
</th>
|
||
{/if}
|
||
{/each}
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-200 bg-white">
|
||
{#each paginatedRows as row}
|
||
<tr class="hover:bg-gray-50 transition">
|
||
{#each columns as col}
|
||
{#if col.key === "name"}
|
||
<td
|
||
class="sticky left-0 px-4 py-2 font-medium text-blue-600"
|
||
style="background-color: #f0f8ff; cursor: pointer;"
|
||
>
|
||
{row[col.key as keyof PurchaseOrderDisplay]}
|
||
</td>
|
||
{:else if col.key === "approval"}
|
||
<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 text-gray-900"
|
||
on:change={(e: Event) => {
|
||
updatePurchaseOrderApprovalStatus(
|
||
e,
|
||
row.id,
|
||
row,
|
||
);
|
||
}}
|
||
disabled
|
||
>
|
||
<option value="" disabled selected
|
||
>ON PROSES</option
|
||
>
|
||
<option value="APPROVED"
|
||
>APPROVED</option
|
||
>
|
||
<option value="REJECTED"
|
||
>REJECTED</option
|
||
>
|
||
</select>
|
||
</td>
|
||
{:else if col.key === "proses_to_approval"}
|
||
<td class="px-4 py-2">
|
||
<!-- checkbox -->
|
||
<input
|
||
type="checkbox"
|
||
checked={row.proses_to_approval}
|
||
on:change={(e) => {
|
||
const isChecked = (
|
||
e.target as HTMLInputElement
|
||
).checked;
|
||
|
||
if (isChecked) {
|
||
newPurchaseOrders = {
|
||
...row,
|
||
proses_to_approval: true,
|
||
};
|
||
// map to project
|
||
updateProsesToApproval(
|
||
row.id,
|
||
isChecked,
|
||
);
|
||
} else {
|
||
newPurchaseOrders = {
|
||
...row,
|
||
proses_to_approval: false,
|
||
};
|
||
// uncheck
|
||
updateProsesToApproval(
|
||
row.id,
|
||
false,
|
||
);
|
||
}
|
||
}}
|
||
disabled={row.proses_to_approval}
|
||
/>
|
||
</td>
|
||
{:else if col.key === "acknowledged"}
|
||
<td class="px-4 py-2 text-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={row.acknowledged}
|
||
on:change={async (e) => {
|
||
const isChecked = (
|
||
e.target as HTMLInputElement
|
||
).checked;
|
||
row.acknowledged = isChecked;
|
||
|
||
if (isChecked) {
|
||
// map to project
|
||
await acknowledgedOk(
|
||
row.id,
|
||
isChecked,
|
||
);
|
||
}
|
||
}}
|
||
disabled
|
||
/>
|
||
</td>
|
||
{:else if col.key === "received"}
|
||
<td class="px-4 py-2 text-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={row.received}
|
||
on:change={async (e) => {
|
||
const isChecked = (
|
||
e.target as HTMLInputElement
|
||
).checked;
|
||
row.received = isChecked;
|
||
|
||
if (isChecked) {
|
||
// map to project
|
||
await receivedOk(
|
||
row.id,
|
||
isChecked,
|
||
);
|
||
}
|
||
}}
|
||
disabled
|
||
/>
|
||
</td>
|
||
{:else if col.key === "completed_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 text-gray-900"
|
||
on:change={async (e) => {
|
||
const isValue = (
|
||
e.target as HTMLInputElement
|
||
).value;
|
||
|
||
if (isValue) {
|
||
// map to project
|
||
await completedStatusOk(
|
||
row.id,
|
||
isValue,
|
||
);
|
||
}
|
||
}}
|
||
disabled
|
||
>
|
||
<option value="" disabled selected
|
||
>ON PROSES</option
|
||
>
|
||
<option value="RECEIVED COMPLETE"
|
||
>RECEIVED COMPLETE</option
|
||
>
|
||
<option value="RECEIVED INCOMPLETE"
|
||
>COMPLETE INCOMPLETE</option
|
||
>
|
||
</select>
|
||
</td>
|
||
{:else if col.key === "updated_at"}
|
||
<td class="px-4 py-2 text-gray-500"
|
||
>{new Date(
|
||
row[
|
||
col.key as keyof PurchaseOrderDisplay
|
||
] as string,
|
||
).toLocaleString()}</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={() => openModal(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)}
|
||
>
|
||
🗑️ Delete
|
||
</button>
|
||
</td>
|
||
{:else if col.key === "created_at"}
|
||
<td class="px-4 py-2 text-gray-500"
|
||
>{new Date(
|
||
row[
|
||
col.key as keyof PurchaseOrderDisplay
|
||
] as string,
|
||
).toLocaleString()}</td
|
||
>
|
||
{:else}
|
||
<td class="px-4 py-2 text-gray-700"
|
||
>{row[
|
||
col.key as keyof PurchaseOrderDisplay
|
||
]}</td
|
||
>
|
||
{/if}
|
||
{/each}
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Pagination controls -->
|
||
<div class="flex justify-between items-center text-sm">
|
||
<div>
|
||
Showing {(currentPage - 1) * rowsPerPage + 1}–
|
||
{Math.min(currentPage * rowsPerPage, allRows.length)} of {allRows.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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{#if showModal}
|
||
<div
|
||
class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-50"
|
||
>
|
||
<div
|
||
class="bg-white p-6 rounded shadow-lg w-[600px] max-h-[90vh] overflow-y-auto space-y-4"
|
||
>
|
||
<h3 class="text-lg font-semibold mb-4">
|
||
{isEditing ? "Edit Project" : "Add Project"}
|
||
</h3>
|
||
<form on:submit|preventDefault={saveProject}>
|
||
<!-- choose issuess -->
|
||
<div class="mb-4">
|
||
<label
|
||
for="issue_id"
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
Choose Issue
|
||
</label>
|
||
<select
|
||
id="issue_id"
|
||
bind:value={newPurchaseOrders.issue_id}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
on:change={(e: Event) => {
|
||
const selectedIssue =
|
||
(e.target as HTMLSelectElement)?.value ?? "";
|
||
newPurchaseOrders.issue_id = selectedIssue;
|
||
}}
|
||
disabled
|
||
>
|
||
<option value="">Select Issue</option>
|
||
{#each issues as issue}
|
||
<option value={issue.id}>{issue.name}</option>
|
||
{/each}
|
||
</select>
|
||
</div>
|
||
{#each formColumns as col}
|
||
{#if col.key === "po_status"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<select
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
on:change={(e: Event) => {
|
||
const selectedOption =
|
||
(e.target as HTMLSelectElement)
|
||
?.value ?? "";
|
||
const option =
|
||
getStatusOption(selectedOption);
|
||
if (
|
||
option?.value === "APPROVED" &&
|
||
!validateInput()
|
||
) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
}}
|
||
>
|
||
{#each statusOptions as option}
|
||
<option
|
||
value={option.value}
|
||
style="background-color: {option.color};"
|
||
>
|
||
{option.label}
|
||
</option>
|
||
{/each}
|
||
</select>
|
||
</div>
|
||
{:else if col.key === "po_type"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<select
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
>
|
||
<option value="">Select PO Type</option>
|
||
<option value="Regular">Regular</option>
|
||
<option value="Urgent">Urgent</option>
|
||
</select>
|
||
</div>
|
||
{:else if col.key === "prepared_date"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<input
|
||
type="date"
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
{:else if col.key === "po_price"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<input
|
||
name="po_price"
|
||
placeholder="Enter PO Price"
|
||
type="number"
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
{:else if col.key === "po_quantity"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<input
|
||
name="po_quantity"
|
||
placeholder="Enter PO Quantity"
|
||
type="number"
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
{:else if col.key === "po_total_price"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<!-- calculate po quantity * price -->
|
||
<input
|
||
name="po_total_price"
|
||
type="number"
|
||
id={col.key}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
readonly
|
||
value={newPurchaseOrders.po_quantity *
|
||
newPurchaseOrders.po_price}
|
||
/>
|
||
</div>
|
||
{:else if col.key === "approved_price"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
{:else if col.key === "approved_vendor"}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<select
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
on:change={(e: Event) => {
|
||
const selectedVendor =
|
||
(e.target as HTMLSelectElement)
|
||
?.value ?? "";
|
||
newPurchaseOrders[col.key] = selectedVendor;
|
||
}}
|
||
>
|
||
<option value="">Select Vendor</option>
|
||
{#each vendors as vendor}
|
||
<option value={vendor.id}>
|
||
{vendor.name}
|
||
</option>
|
||
{/each}
|
||
</select>
|
||
</div>
|
||
{:else}
|
||
<div class="mb-4">
|
||
<label
|
||
for={col.key}
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>
|
||
{col.title}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id={col.key}
|
||
bind:value={newPurchaseOrders[col.key]}
|
||
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
|
||
/>
|
||
</div>
|
||
{/if}
|
||
{/each}
|
||
<div class="flex justify-end space-x-2">
|
||
<button
|
||
type="button"
|
||
class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
|
||
on:click={() => (showModal = false)}
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||
>
|
||
Save
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{/if}
|