naja/vberp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

penambahan menu approval per po per proses

Browse Source
This commit is contained in:
Aji Setiaji
2025-05-30 21:59:22 +07:00
parent ec9d47846e
commit 4126f378f5
6 changed files with 239 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/backoffice/project/+page.svelte
View File

@@ -504,6 +504,21 @@
};
currentEditingId = row.id;
await addToPo(project);
} else {
// uncheck
const { data, error } =
await supabase
.from("projects")
.update({
add_to_po: false,
})
.eq("id", row.id);
if (error) {
console.error(
"Error updating project:",
error,
);
}
}
}}
/>

190
src/routes/backoffice/purchaseorder/+page.svelte
View File

@@ -8,12 +8,8 @@
prepared_date: string;
po_type: string;
po_quantity: number;
po_status: string;
approved_vendor: string;
acknowledge_by: string;
approved_by: string;
approved_price: number;
completed_status: string;
po_price: number;
po_total_price: number;
};
let purchaseOrderInsert: PurchaseOrderInsert = {
@@ -21,12 +17,8 @@
prepared_date: "",
po_type: "",
po_quantity: 0,
po_status: "REQUESTED",
approved_vendor: "",
acknowledge_by: "",
approved_by: "",
approved_price: 0,
completed_status: "",
po_price: 0,
po_total_price: 0,
};
type PurchaseOrders = {
@@ -37,6 +29,7 @@
po_quantity: number;
po_status: string;
approved_vendor: string;
proses_to_approval: boolean;
acknowledged: boolean;
approved_vendor_id: string;
acknowledge_by: string;
@@ -62,6 +55,8 @@
prepared_date: string;
po_type: string;
po_quantity: number;
po_price: number;
po_total_price: number;
po_status: string;
approved_vendor: string;
acknowledged: boolean;
@@ -70,6 +65,7 @@
approved_price: number;
approved_quantity: number;
total_approved_order_amount: number;
proses_to_approval: boolean;
approval: string;
completed_status: string;
received: boolean;
@@ -91,7 +87,10 @@
{ 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: "acknowledge_by", title: "Acknowledged By" },
@@ -132,9 +131,7 @@
) {
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",
)
.select("*")
.order(sort || "created_at", { ascending: order === "asc" })
.range(offset, offset + limit - 1);
if (filter) {
@@ -172,7 +169,7 @@
}
// masukkan villa name dan issue name ke dalam data
allRows = data.map((row) => {
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(
@@ -189,6 +186,9 @@
: "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;
});
}
@@ -255,11 +255,14 @@
"completed_status",
"received",
"received_by",
"approved_quantity",
"total_approved_order_amount",
"proses_to_approval",
"approved_by",
"name",
"po_status",
"approved_quantity",
"total_approved_order_amount",
"approved_vendor",
"approved_price",
];
const formColumns = columns.filter(
(col) => !excludedKeys.includes(col.key),
@@ -280,17 +283,18 @@
}
async function saveProject() {
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_status: newPurchaseOrders.po_status || "REQUESTED",
approved_vendor: newPurchaseOrders.approved_vendor || "",
acknowledge_by: newPurchaseOrders.acknowledge_by || "",
approved_price: newPurchaseOrders.approved_price || "",
approved_by: newPurchaseOrders.approved_by || "",
completed_status: newPurchaseOrders.completed_status || "",
po_price: newPurchaseOrders.po_price || 0,
po_total_price:
newPurchaseOrders.po_quantity * newPurchaseOrders.po_price || 0,
};
if (isEditing && currentEditingId) {
@@ -339,12 +343,12 @@
{ label: "Acknowledged", value: "ACKNOWLEDGE", color: "#60a5fa" },
{
label: "Received - Incomplete",
value: "RECEIVE - INCOMPLETE",
value: "RECEIVED INCOMPLETE",
color: "#fb923c",
},
{
label: "Received - Completed",
value: "RECEIVE COMPLETED",
value: "RECEIVED COMPLETED",
color: "#10b981",
},
{ label: "Canceled", value: "CANCELED", color: "#f87171" },
@@ -360,7 +364,7 @@
"prepared_date",
"po_type",
"po_quantity",
"approved_vendor",
"po_price",
];
for (const field of requiredFields) {
if (!newPurchaseOrders[field]) {
@@ -382,6 +386,38 @@
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) {
if (!validateInputProsesToAprroval()) {
return;
}
const { data, error } = await supabase
.from("purchase_orders")
.update({ proses_to_approval: status, po_status: "REQUESTED" })
.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,
@@ -600,6 +636,42 @@
>
</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
@@ -671,10 +743,10 @@
<option value="" disabled selected
>ON PROSES</option
>
<option value="APPROVED"
<option value="RECEIVED COMPLETE"
>RECEIVED COMPLETE</option
>
<option value="REJECTED"
<option value="RECEIVED INCOMPLETE"
>COMPLETE INCOMPLETE</option
>
</select>
@@ -694,27 +766,6 @@
🗑️ Delete
</button>
</td>
{:else if col.key === "move_issue"}
<td class="px-4 py-2">
<button
class="inline-flex items-center gap-1 rounded bg-green-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-green-700"
on:click={() =>
alert(
`Move issue ${row.id} to project`,
)}
>
➡️ PROJECT
</button>
<button
class="inline-flex items-center gap-1 rounded bg-yellow-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-yellow-700"
on:click={() =>
alert(
`Move issue ${row.id} to another area`,
)}
>
➡️ PURCHASE ORDER
</button>
</td>
{:else}
<td class="px-4 py-2 text-gray-700"
>{row[
@@ -795,6 +846,7 @@
(e.target as HTMLSelectElement)?.value ?? "";
newPurchaseOrders.issue_id = selectedIssue;
}}
disabled
>
<option value="">Select Issue</option>
{#each issues as issue}
@@ -873,6 +925,23 @@
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
@@ -882,12 +951,33 @@
{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

23
src/routes/backoffice/purchaseorder/acknowledged/+page.svelte
View File

@@ -98,7 +98,6 @@
{ key: "acknowledged", title: "Acknowledged" },
{ key: "acknowledge_by", title: "Acknowledge By" },
{ key: "created_at", title: "Created At" },
{ key: "actions", title: "Actions" }, // For edit/delete buttons
];
let currentPage = 1;
@@ -123,9 +122,8 @@
) {
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",
)
.select("*")
.eq("po_status", "APPROVED")
.order(sort || "created_at", { ascending: order === "asc" })
.range(offset, offset + limit - 1);
if (filter) {
@@ -409,7 +407,7 @@
async function acknowledgedOk(id: string, status: boolean) {
const { data, error } = await supabase
.from("purchase_orders")
.update({ acknowledged: status })
.update({ acknowledged: status, po_status: "ACKNOWLEDGED" })
.eq("id", id);
if (error) {
@@ -660,21 +658,6 @@
>
</select>
</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 === "move_issue"}
<td class="px-4 py-2">
<button

117
src/routes/backoffice/purchaseorder/approval/+page.svelte
View File

@@ -5,28 +5,20 @@
type PurchaseOrderInsert = {
issue_id: string;
prepared_date: string;
po_type: string;
po_quantity: number;
po_status: string;
approved_vendor: string;
acknowledge_by: string;
approved_by: string;
approved_price: number;
completed_status: string;
approved_quantity: number;
total_approved_order_amount?: number;
};
let purchaseOrderInsert: PurchaseOrderInsert = {
issue_id: "",
prepared_date: "",
po_type: "",
po_quantity: 0,
po_status: "REQUESTED",
approved_vendor: "",
acknowledge_by: "",
approved_by: "",
approved_price: 0,
completed_status: "",
approved_quantity: 0,
total_approved_order_amount: 0,
};
type PurchaseOrders = {
@@ -86,16 +78,19 @@
const columns: columns[] = [
{ key: "name", title: "Name" },
{ key: "purchase_order_number", title: "Purchase Order Number" },
{ key: "po_type", title: "PO Type" },
{ key: "approval", title: "Approval" },
{ 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: "approved_vendor", title: "Approved Vendor" },
{ key: "approved_price", title: "Approved Price" },
{ key: "approved_quantity", title: "Approved Quantity" },
{ key: "approved_price", title: "Approved Price" },
{
key: "total_approved_order_amount",
title: "Total Approved Order Amount",
},
{ key: "approval", title: "Approval" },
{ key: "approved_by", title: "Approved By" },
{ key: "created_at", title: "Created At" },
{ key: "actions", title: "Actions" }, // For edit/delete buttons
@@ -123,9 +118,8 @@
) {
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",
)
.select("*")
.eq("po_status", "REQUESTED")
.order(sort || "created_at", { ascending: order === "asc" })
.range(offset, offset + limit - 1);
if (filter) {
@@ -246,8 +240,6 @@
"completed_status",
"received",
"received_by",
"approved_quantity",
"total_approved_order_amount",
"approved_by",
"name",
"po_status",
@@ -273,17 +265,19 @@
async function saveProject() {
purchaseOrderInsert = {
issue_id: newPurchaseOrders.issue_id || "",
prepared_date: newPurchaseOrders.prepared_date || "",
po_type: newPurchaseOrders.po_type || "",
po_quantity: newPurchaseOrders.po_quantity || 0,
po_status: newPurchaseOrders.po_status || "REQUESTED",
approved_vendor: newPurchaseOrders.approved_vendor || "",
acknowledge_by: newPurchaseOrders.acknowledge_by || "",
approved_price: newPurchaseOrders.approved_price || "",
approved_by: newPurchaseOrders.approved_by || "",
completed_status: newPurchaseOrders.completed_status || "",
approved_price: newPurchaseOrders.approved_price || 0,
approved_quantity: newPurchaseOrders.approved_quantity || 0,
total_approved_order_amount:
newPurchaseOrders.approved_quantity *
newPurchaseOrders.approved_price,
};
if (!validateInput()) {
return;
}
if (isEditing && currentEditingId) {
const { data, error } = await supabase
.from("purchase_orders")
@@ -348,10 +342,10 @@
//validate input fields purchase order
function validateInput() {
const requiredFields = [
"prepared_date",
"po_type",
"po_quantity",
"issue_id",
"approved_vendor",
"approved_price",
"approved_quantity",
];
for (const field of requiredFields) {
if (!newPurchaseOrders[field]) {
@@ -363,7 +357,11 @@
}
function validateInputApproval() {
const requiredFields = ["approved_price"];
const requiredFields = [
"approved_price",
"approved_vendor",
"approved_quantity",
];
for (const field of requiredFields) {
if (!newPurchaseOrders[field]) {
alert(`Please fill in the ${field} field.`);
@@ -456,7 +454,10 @@
const { data, error } = await supabase
.from("purchase_orders")
.update({ approval: newPurchaseOrders.approval })
.update({
approval: newPurchaseOrders.approval,
po_status: "APPROVED",
})
.eq("id", id);
if (error) {
@@ -776,6 +777,7 @@
(e.target as HTMLSelectElement)?.value ?? "";
newPurchaseOrders.issue_id = selectedIssue;
}}
disabled
>
<option value="">Select Issue</option>
{#each issues as issue}
@@ -810,6 +812,7 @@
return;
}
}}
disabled
>
{#each statusOptions as option}
<option
@@ -833,27 +836,13 @@
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"
disabled
>
<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_quantity"}
<div class="mb-4">
<label
@@ -867,6 +856,7 @@
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"
disabled
/>
</div>
{:else if col.key === "approved_price"}
@@ -878,12 +868,47 @@
{col.title}
</label>
<input
name="approved_price"
placeholder="Enter Approved 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 === "approved_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="approved_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 === "total_approved_order_amount"}
<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}
class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring focus:ring-blue-500"
readonly
value={newPurchaseOrders.approved_quantity *
newPurchaseOrders.approved_price}
/>
</div>
{:else if col.key === "approved_vendor"}
<div class="mb-4">
<label

79
src/routes/backoffice/purchaseorder/complete/+page.svelte
View File

@@ -123,9 +123,8 @@
) {
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",
)
.select("*")
.eq("po_status", "ACKNOWLEDGED")
.order(sort || "created_at", { ascending: order === "asc" })
.range(offset, offset + limit - 1);
if (filter) {
@@ -373,53 +372,6 @@
return true;
}
async function updatePurchaseOrderStatus(
e: Event,
id: string,
row: PurchaseOrderDisplay,
) {
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("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 { data, error } = await supabase
.from("purchase_orders")
.update({ acknowledged: status })
.eq("id", id);
if (error) {
console.error("Error acknowledging purchase order:", error);
return;
}
await fetchPurchaseOrder();
}
async function receivedOk(id: string, status: boolean) {
const { data, error } = await supabase
.from("purchase_orders")
@@ -470,7 +422,7 @@
async function completedStatusOk(id: string, status: string) {
const { data, error } = await supabase
.from("purchase_orders")
.update({ completed_status: status })
.update({ completed_status: status, po_status: status })
.eq("id", id);
if (error) {
@@ -584,27 +536,6 @@
>
</select>
</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,
);
}
}}
/>
</td>
{:else if col.key === "received"}
<td class="px-4 py-2 text-center">
<input
@@ -652,10 +583,10 @@
<option value="" disabled selected
>SELECT COMPLETE</option
>
<option value="APPROVED"
<option value="RECEIVED COMPLETE"
>RECEIVED COMPLETE</option
>
<option value="REJECTED"
<option value="RECEIVED INCOMPLETE"
>COMPLETE INCOMPLETE</option
>
</select>

10
src/routes/backoffice/purchaseorder/received/+page.svelte
View File

@@ -123,9 +123,9 @@
) {
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",
)
.select("*")
// RECEIVED COMPLETED or RECEIVE - INCOMPLETE
.in("po_status", ["RECEIVED COMPLETE", "RECEIVED INCOMPLETE"])
.order(sort || "created_at", { ascending: order === "asc" })
.range(offset, offset + limit - 1);
if (filter) {
@@ -423,7 +423,7 @@
async function receivedOk(id: string, status: boolean) {
const { data, error } = await supabase
.from("purchase_orders")
.update({ receivedOk: status })
.update({ received: status })
.eq("id", id);
if (error) {
@@ -470,7 +470,7 @@
async function completedStatusOk(id: string, status: string) {
const { data, error } = await supabase
.from("purchase_orders")
.update({ completed_status: status })
.update({ completed_status: status, po_status: status })
.eq("id", id);
if (error) {