From 34a72c7f7198b652fa885e353be5badcb92c03e2 Mon Sep 17 00:00:00 2001
From: Aji Setiaji <aji.setiaji@iconpln.co.id>
Date: Tue, 8 Jul 2025 17:36:04 +1400
Subject: [PATCH] penambahan child po item

---
 note.md                                       | 567 ++++++++++++++++++
 src/components/Sidebar.svelte                 |   8 +
 .../backoffice/purchaseorder/+page.svelte     |   4 +-
 .../purchaseorder/poitem/+page.svelte         | 450 ++++++++++++++
 4 files changed, 1027 insertions(+), 2 deletions(-)
 create mode 100644 note.md
 create mode 100644 src/routes/backoffice/purchaseorder/poitem/+page.svelte

diff --git a/note.md b/note.md
new file mode 100644
index 0000000..ad03ddf
--- /dev/null
+++ b/note.md
@@ -0,0 +1,567 @@
+<script lang="ts">
+    import { supabase } from "$lib/supabaseClient";
+    import { onMount } from "svelte";
+    import { writable } from "svelte/store";
+
+    type Transport = {
+        id: string;
+        guest_name: string;
+        requested_date: Date;
+        area: string;
+        pickup_date: Date;
+        request_things: string;
+        additional_notes: string;
+        requested_by: string;
+        vendor_email_address: string;
+        created_at?: Date;
+    };
+
+    type TransportDisplay = {
+        guest_name: string;
+        requested_date: Date;
+        area: string;
+        pickup_date: Date;
+        request_things: string;
+        additional_notes: string;
+        requested_by: string;
+        vendor_email_address: string;
+        created_at?: Date;
+    };
+
+    const area = [
+        { label: "Laksamana", value: "Laksamana" },
+        { label: "Drupadi", value: "Drupadi" },
+        { label: "Abimanyu", value: "Abimanyu" },
+        { label: "Seminyak", value: "Seminyak" },
+    ];
+
+    const requestThings = [
+        { label: "Airport pickup", value: "Airport pickup" },
+        { label: "Airport transfer", value: "Airport transfer" },
+        { label: "Day car charter", value: "Day car charter" },
+        { label: "One way drop off", value: "One way drop off" },
+        { label: "One way pickup", value: "One way pickup" },
+        { label: "Other", value: "Other" },
+    ];
+
+    let allRows: Transport[] = [];
+
+    type columns = {
+        key: string;
+        title: string;
+    };
+
+    const columns: columns[] = [
+        { key: "guest_name", title: "Guest Name" },
+        { key: "requested_date", title: "Requested Date" },
+        { key: "area", title: "Area" },
+        { key: "pickup_date", title: "Pickup Date" },
+        { key: "request_things", title: "Request Things" },
+        { key: "additional_notes", title: "Additional Notes" },
+        { key: "requested_by", title: "Requested By" },
+        { key: "vendor_email_address", title: "Vendor Email Address" },
+        { key: "created_at", title: "Created At" },
+        { key: "actions", title: "Actions" },
+    ];
+
+    async function fetchTransport(
+        filter: string | null = null,
+        searchTerm: string | null = null,
+        sortColumn: string | null = "created_at",
+        sortOrder: "asc" | "desc" = "desc",
+        offset: number = 0,
+        limit: number = 10,
+    ) {
+        let query = supabase
+            .from("vb_transport")
+            .select("*", { count: "exact" })
+            .order(sortColumn || "created_at", {
+                ascending: sortOrder === "asc",
+            });
+        if (filter) {
+            query = query.eq("area", filter);
+        }
+        if (searchTerm) {
+            query = query.ilike("guest_name", `%${searchTerm}%`);
+        }
+        if (offset) {
+            query = query.range(offset, offset + limit - 1);
+        }
+        if (limit) {
+            query = query.limit(limit);
+        }
+        const { data: transportResponse, error } = await query;
+        if (error) {
+            console.error("Error fetching timesheets:", error);
+            return;
+        }
+
+        allRows = transportResponse.map((row) => ({
+            ...row,
+            requested_date: new Date(row.requested_date),
+            pickup_date: new Date(row.pickup_date),
+            created_at: row.created_at ? new Date(row.created_at) : undefined,
+        })) as Transport[];
+    }
+    let currentPage = 1;
+    const rowsPerPage = 10;
+    const totalRows = allRows.length;
+    const totalPages = Math.ceil(totalRows / rowsPerPage);
+    $: paginatedRows = allRows.slice(
+        (currentPage - 1) * rowsPerPage,
+        currentPage * rowsPerPage,
+    );
+    console.log("Total Rows:", totalRows);
+
+    function goToPage(page: number) {
+        if (page >= 1 && page <= totalPages) currentPage = page;
+        fetchTransport(
+            null,
+            null,
+            "created_at",
+            "desc",
+            (currentPage - 1) * rowsPerPage,
+            rowsPerPage,
+        );
+    }
+
+    onMount(() => {
+        fetchTransport();
+    });
+
+    // Initialize the first page
+    $: currentPage = 1;
+
+    let showModal = false;
+    let isEditing = false;
+    let currentEditingId: string | null = null;
+    let newTransport: Transport = {
+        id: "",
+        guest_name: "",
+        requested_date: new Date(),
+        area: "",
+        pickup_date: new Date(),
+        request_things: "",
+        additional_notes: "",
+        requested_by: "",
+        vendor_email_address: "",
+    };
+
+    const excludedKeys = ["id", "actions", "created_at"];
+    const formColumns = columns.filter(
+        (col) => !excludedKeys.includes(col.key),
+    );
+
+    function openModal(transport?: Transport) {
+        if (transport) {
+            isEditing = true;
+            currentEditingId = transport.id;
+            newTransport = { ...transport };
+        } else {
+            isEditing = false;
+            currentEditingId = null;
+            newTransport = {
+                id: "",
+                guest_name: "",
+                requested_date: new Date(),
+                area: "",
+                pickup_date: new Date(),
+                request_things: "",
+                additional_notes: "",
+                requested_by: "",
+                vendor_email_address: "",
+            };
+        }
+        showModal = true;
+    }
+
+    async function saveIssue(event: Event) {
+        event.preventDefault();
+
+        const formData = new FormData(event.target as HTMLFormElement);
+
+        // Validate form data
+        if (!validateForm(formData)) {
+            console.error("Form validation failed");
+            return;
+        }
+
+        if (isEditing && currentEditingId) {
+            const { error } = await supabase
+                .from("vb_tansport")
+                .update(newTransport)
+                .eq("id", currentEditingId);
+
+            if (error) {
+                alert("Error updating transport: " + error.message);
+                console.error("Error updating transport:", error);
+                return;
+            }
+        }
+        await fetchTransport();
+        showModal = false;
+    }
+
+    async function deleteTransport(id: string) {
+        if (confirm("Are you sure you want to delete this transport?")) {
+            const { error } = await supabase
+                .from("vb_transport")
+                .delete()
+                .eq("id", id);
+            if (error) {
+                console.error("Error deleting issue:", error);
+                return;
+            }
+            await fetchTransport();
+        }
+    }
+
+    export let formErrors = writable<{ [key: string]: string }>({});
+
+    function validateForm(formData: FormData): boolean {
+        const errors: { [key: string]: string } = {};
+        const requiredFields = [
+            "guest_name",
+            "requested_date",
+            "area",
+            "pickup_date",
+            "request_things",
+            "additional_notes",
+            "requested_by",
+            "vendor_email_address",
+        ];
+
+        requiredFields.forEach((field) => {
+            if (!formData.get(field) || formData.get(field) === "") {
+                errors[field] = `${field.replace(/_/g, " ")} is required.`;
+            }
+        });
+
+        formErrors.set(errors);
+        return Object.keys(errors).length === 0;
+    }
+
+    function errorClass(field: string): string {
+        return $formErrors[field] ? "border-red-500" : "border";
+    }
+</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">
+                🚗 Transport Request List
+            </h2>
+            <p class="text-sm text-gray-600">
+                Manage and track all transport requests efficiently.
+            </p>
+        </div>
+        <div class="flex flex-col sm:flex-row sm:items-center gap-2">
+            <input
+                type="text"
+                placeholder="🔍 Search by guest 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();
+                    fetchTransport(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;
+                    fetchTransport(filter, null, null, "desc");
+                }}
+            >
+                <option value="">All Area</option>
+                {#each area as a}
+                    <option value={a.value}>{a.label}</option>
+                {/each}
+            </select>
+            <!-- request things -->
+            <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;
+                    fetchTransport(null, filter, "created_at", "desc");
+                }}
+            >
+                <option value="">All Requests</option>
+                {#each requestThings as r}
+                    <option value={r.value}>{r.label}</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={() =>
+                    fetchTransport(null, null, "created_at", "desc", 0, 10)}
+            >
+                🔄 Reset
+            </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 === "guest_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 === "guest_name"}
+                                <td class="px-4 py-2 font-medium text-gray-800">
+                                    {row[col.key as keyof Transport]}
+                                </td>
+                            {:else if col.key === "requested_date"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof Transport]
+                                        ? new Date(
+                                              row[
+                                                  col.key as keyof Transport
+                                              ] as string | number | Date,
+                                          ).toLocaleDateString()
+                                        : "N/A"}
+                                </td>
+                            {:else if col.key === "pickup_date"}
+                                <td class="px-4 py-2">
+                                    {new Date(
+                                        new Date(
+                                            row[col.key as keyof Transport] as
+                                                | string
+                                                | number
+                                                | Date,
+                                        ).toLocaleDateString() || "N/A",
+                                    ).toLocaleDateString()}
+                                </td>
+                            {:else if col.key === "created_at"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof Transport]
+                                        ? new Date(
+                                              row[
+                                                  col.key as keyof Transport
+                                              ] as string | number | Date,
+                                          ).toLocaleDateString()
+                                        : "N/A"}
+                                </td>
+                            {:else if col.key === "area"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof Transport]}
+                                </td>
+                            {:else if col.key === "request_things"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof Transport]}
+                                </td>
+                            {:else if col.key === "additional_notes"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof Transport] ||
+                                        "No additional notes"}
+                                </td>
+                            {:else if col.key === "requested_by"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof Transport]}
+                                </td>
+                            {:else if col.key === "vendor_email_address"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof TransportDisplay] ||
+                                        "No email provided"}
+                                </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={() => deleteTransport(row.id)}
+                                    >
+                                        🗑️ Delete
+                                    </button>
+                                </td>
+                            {:else}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof TransportDisplay]}
+                                </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 bg-black bg-opacity-50 flex items-center justify-center z-50"
+    >
+        <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
+            <h2 class="text-xl font-semibold mb-4">
+                {isEditing ? "Edit Transport Request" : "New Transport Request"}
+            </h2>
+            <form on:submit={saveIssue}>
+                {#each formColumns as col}
+                    <div class="mb-4">
+                        <label
+                            class="block text-sm font-medium mb-1"
+                            for={col.key}
+                        >
+                            {col.title}
+                        </label>
+                        {#if col.key === "requested_date" || col.key === "pickup_date"}
+                            <input
+                                type="date"
+                                name={col.key}
+                                bind:value={newTransport[col.key]}
+                                class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                                    col.key,
+                                )}"
+                            />
+                        {:else if col.key === "area"}
+                            <select
+                                name={col.key}
+                                bind:value={newTransport[col.key]}
+                                class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                                    col.key,
+                                )}"
+                            >
+                                <option value="" disabled selected
+                                    >Select Area</option
+                                >
+                                {#each area as a}
+                                    <option value={a.value}>{a.label}</option>
+                                {/each}
+                            </select>
+                        {:else if col.key === "request_things"}
+                            <select
+                                name={col.key}
+                                bind:value={newTransport[col.key]}
+                                class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                                    col.key,
+                                )}"
+                            >
+                                <option value="" disabled selected
+                                    >Select Request</option
+                                >
+                                {#each requestThings as r}
+                                    <option value={r.value}>{r.label}</option>
+                                {/each}
+                            </select>
+                        {:else}
+                            <input
+                                type="text"
+                                name={col.key}
+                                bind:value={
+                                    newTransport[col.key as keyof Transport]
+                                }
+                                placeholder={col.title}
+                                class="w-full border rounded-xl px-4 py-
+2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(col.key)}"
+                            />
+                        {/if}
+                        {#if $formErrors[col.key]}
+                            <p class="text-red-500 text-xs mt-1">
+                                {$formErrors[col.key]}
+                            </p>
+                        {/if}
+                    </div>
+                {/each}
+                <div class="mb-4">
+                    <label class="block text-sm font-medium mb-1"
+                        >Additional Notes</label
+                    >
+                    <textarea
+                        name="additional_notes"
+                        bind:value={newTransport.additional_notes}
+                        class="w-full border rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-400 {errorClass(
+                            'additional_notes',
+                        )}"
+                        rows="3"
+                        placeholder="Any additional notes..."
+                    ></textarea>
+                    {#if $formErrors.additional_notes}
+                        <p class="text-red-500 text-xs mt-1">
+                            {$formErrors.additional_notes}
+                        </p>
+                    {/if}
+                </div>
+                <div class="flex justify-end space-x-2">
+                    <button
+                        type="button"
+                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300"
+                        on:click={() => (showModal = false)}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="submit"
+                        class="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
+                    >
+                        {isEditing ? "Update" : "Create"}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+{/if}
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 329c939..2fb13d3 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -85,6 +85,14 @@
             icon: "📦",
             url: "/backoffice/purchaseorder",
             roles: ["it", "guest", "accounting", "ga", "office", "hm", "vm"],
+            sub: [
+                {
+                    name: "PO Item",
+                    icon: "📋",
+                    url: "/backoffice/purchaseorder/poitem",
+                    roles: ["it", "ga", "office", "hm", "vm", "accounting"],
+                },
+            ],
         },
         {
             name: "Timesheets",
diff --git a/src/routes/backoffice/purchaseorder/+page.svelte b/src/routes/backoffice/purchaseorder/+page.svelte
index e39ff8b..7c22ce1 100644
--- a/src/routes/backoffice/purchaseorder/+page.svelte
+++ b/src/routes/backoffice/purchaseorder/+page.svelte
@@ -1270,7 +1270,7 @@
         </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"
+                class="px-2 py-1 border rounded disabled:opacity-50"
                 on:click={() => goToPage(currentPage - 1)}
                 disabled={currentPage === 1}
             >
@@ -1290,7 +1290,7 @@
                 </button>
             {/each}
             <button
-                class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-100 disabled:opacity-50"
+                class="px-2 py-1 border rounded disabled:opacity-50"
                 on:click={() => goToPage(currentPage + 1)}
                 disabled={currentPage === totalPages}
             >
diff --git a/src/routes/backoffice/purchaseorder/poitem/+page.svelte b/src/routes/backoffice/purchaseorder/poitem/+page.svelte
new file mode 100644
index 0000000..076ab13
--- /dev/null
+++ b/src/routes/backoffice/purchaseorder/poitem/+page.svelte
@@ -0,0 +1,450 @@
+<script lang="ts">
+    import { supabase } from "$lib/supabaseClient";
+    import { onMount } from "svelte";
+    import { writable } from "svelte/store";
+
+    type POItem = {
+        id: number;
+        item_name: string;
+        created_at?: Date;
+    };
+
+    type TransportDisplay = {
+        id: number;
+        item_name: string;
+        created_at?: Date;
+    };
+
+    let allRows: POItem[] = [];
+
+    type columns = {
+        key: string;
+        title: string;
+    };
+
+    const columns: columns[] = [
+        { key: "id", title: "ID" },
+        { key: "item_name", title: "Item Name" },
+        { key: "created_at", title: "Created At" },
+        { key: "actions", title: "Actions" },
+    ];
+
+    let currentPage = 1;
+    const rowsPerPage = 10;
+    let totalItems = 0;
+
+    async function fetchItemPo(
+        searchTerm: string | null = null,
+        sortColumn: string | null = "created_at",
+        sortOrder: "asc" | "desc" = "desc",
+        offset: number = 0,
+        limit: number = 10,
+    ) {
+        const fromIndex = offset;
+        const toIndex = offset + limit - 1;
+
+        // Inisialisasi query
+        let query = supabase
+            .from("vb_po_item")
+            .select("*", { count: "exact" })
+            .order(sortColumn || "created_at", {
+                ascending: sortOrder === "asc",
+            })
+            .range(fromIndex, toIndex); // Ini sudah termasuk offset & limit
+
+        // Tambahkan filter pencarian jika ada
+        if (searchTerm) {
+            query = query.ilike("item_name", `%${searchTerm}%`);
+        }
+
+        // Jalankan query
+        const { data, count, error } = await query;
+
+        if (error) {
+            console.error("Error fetching PO items:", error);
+            return;
+        }
+
+        allRows = data as POItem[];
+        totalItems = count || 0;
+
+        console.log("Fetched PO Items:", allRows);
+        console.log("Total Items:", totalItems);
+    }
+
+
+    $: totalPages = Math.ceil(totalItems / rowsPerPage);
+
+    function goToPage(page: number) {
+        
+        if (page < 1 || page > totalPages) return;
+        currentPage = page;
+
+        fetchItemPo(
+            null,
+            "created_at",
+            "desc",
+            (currentPage - 1) * rowsPerPage,
+            rowsPerPage,
+        );
+    }
+
+    function pageRange(totalPages: number, currentPage: number,): (number | string)[] {
+        const range: (number | string)[] = [];
+        const maxDisplay = 5;
+
+        if (totalPages <= maxDisplay + 2) {
+            for (let i = 1; i <= totalPages; i++) range.push(i);
+        } else {
+            const start = Math.max(2, currentPage - 2);
+            const end = Math.min(totalPages - 1, currentPage + 2);
+
+            range.push(1);
+            if (start > 2) range.push("...");
+
+            for (let i = start; i <= end; i++) {
+                range.push(i);
+            }
+
+            if (end < totalPages - 1) range.push("...");
+            range.push(totalPages);
+        }
+
+        return range;
+    }
+
+    function changePage(page: number) {
+        if (page < 1 || page > totalPages || page === currentPage) return;
+        currentPage = page;
+        fetchItemPo(
+            null,
+            "created_at",
+            "desc",
+            (currentPage - 1) * rowsPerPage,
+            rowsPerPage,
+        );
+    }
+
+    onMount(() => {
+        fetchItemPo();
+    });
+
+    // Initialize the first page
+    $: currentPage = 1;
+
+    let showModal = false;
+    let isEditing = false;
+    let currentEditingId: number | null = null;
+    let newPOItem: POItem = {
+        id: 0,
+        item_name: "",
+        created_at: new Date(),
+    };
+
+    const excludedKeys = ["id", "actions", "created_at"];
+    const formColumns = columns.filter(
+        (col) => !excludedKeys.includes(col.key),
+    );
+
+    function openModal(newPOItem?: POItem) {
+        if (newPOItem) {
+            isEditing = true;
+            currentEditingId = newPOItem.id;
+            newPOItem = { ...newPOItem };
+        } else {
+            isEditing = false;
+            currentEditingId = null;
+            newPOItem = {
+                id: 0,
+                item_name: "",
+                created_at: new Date(),
+            };
+        }
+        showModal = true;
+    }
+
+    async function savePOItem(event: Event) {
+        event.preventDefault();
+
+        const formData = new FormData(event.target as HTMLFormElement);
+
+        // Validate form data
+        if (!validateForm(formData)) {
+            console.error("Form validation failed");
+            return;
+        }
+
+        let newPOItemInsert = {
+            item_name: newPOItem.item_name,
+            created_at: new Date(),
+        };
+
+        if (isEditing && currentEditingId) {
+            const { error } = await supabase
+                .from("vb_po_item")
+                .update(newPOItemInsert)
+                .eq("id", currentEditingId);
+
+            if (error) {
+                alert("Error updating New PO Item: " + error.message);
+                console.error("Error updating New PO Item:", error);
+                return;
+            } else {
+                alert("New PO Item updated successfully!");
+            }
+        } else {
+            
+            const { error } = await supabase
+                .from("vb_po_item")
+                .insert(newPOItemInsert);
+
+            if (error) {
+                alert("Error creating New PO Item: " + error.message);
+                console.error("Error creating New PO Item:", error);
+                return;
+            } else {
+                alert("New PO Item created successfully!");
+            }
+        }
+
+        await fetchItemPo();
+        showModal = false;
+    }
+
+    async function deletePOItem(id: number) {
+        if (confirm("Are you sure you want to delete this PO Item?")) {
+            const { error } = await supabase
+                .from("vb_po_item")
+                .delete()
+                .eq("id", id);
+            if (error) {
+                console.error("Error deleting issue:", error);
+                return;
+            }
+            await fetchItemPo();
+        }
+    }
+
+    export let formErrors = writable<{ [key: string]: string }>({});
+
+    function validateForm(formData: FormData): boolean {
+        const errors: { [key: string]: string } = {};
+        const requiredFields = [
+            "item_name",
+            // Add other required fields here if necessary
+        ];
+
+        requiredFields.forEach((field) => {
+            if (!formData.get(field) || formData.get(field) === "") {
+                errors[field] = `${field.replace(/_/g, " ")} is required.`;
+            }
+        });
+
+        formErrors.set(errors);
+        return Object.keys(errors).length === 0;
+    }
+
+    function errorClass(field: string): string {
+        return $formErrors[field] ? "border-red-500" : "border";
+    }
+</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>
+                PO Items List 
+            </h2>
+            <p class="text-sm text-gray-600">
+                Manage your List Items for Purchase Order
+            </p>
+        </div>
+        <div class="flex flex-col sm:flex-row sm:items-center gap-2">
+            <input
+                type="text"
+                placeholder="🔍 Search by item 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();
+                    fetchItemPo(searchTerm, "created_at", "desc");
+                }}
+            />
+            <button
+                class="bg-gray-200 text-gray-700 px-4 py-2 rounded-xl hover:bg-gray-300 text-sm transition"
+                on:click={() =>
+                    fetchItemPo(null, "created_at", "desc", 0, 10)}
+            >
+                🔄 Reset
+            </button>
+            <button
+                class="bg-blue-600 text-white px-4 py-2 rounded-xl hover:bg-blue-700 text-sm transition"
+                on:click={() => openModal()}
+            >
+                ➕ New PO Item
+            </button>
+        </div>
+    </div>
+    <div class="overflow-x-auto rounded-lg shadow mb-4">
+        <table class="w-full divide-y divide-gray-200 text-sm">
+            <thead class="bg-gray-100">
+                <tr>
+                    {#each columns as col}
+                        {#if col.key === "guest_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 allRows as row}
+                    <tr class="hover:bg-gray-50 transition">
+                        {#each columns as col}
+                            {#if col.key === "item_name"}
+                                <td class="px-4 py-2 font-medium text-gray-800">
+                                    {row[col.key as keyof POItem]}
+                                </td>
+                            {:else if col.key === "created_at"}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof POItem]
+                                        ? new Date(
+                                              row[
+                                                  col.key as keyof POItem
+                                              ] as string | number | Date,
+                                          ).toLocaleDateString()
+                                        : "N/A"}
+                                </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={() => deletePOItem(row.id)}
+                                    >
+                                        🗑️ Delete
+                                    </button>
+                                </td>
+                            {:else}
+                                <td class="px-4 py-2">
+                                    {row[col.key as keyof TransportDisplay]}
+                                </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, totalItems)} of {totalItems} items
+        </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 pageRange(totalPages, currentPage) as page}
+                {#if page === "..."}
+                    <span class="px-2">...</span>
+                {:else}
+                    <button
+                        on:click={() => changePage(page as number)}
+                        class="px-2 py-1 border rounded {page === currentPage
+                            ? 'bg-blue-600 text-white'
+                            : ''}"
+                    >
+                        {page}
+                    </button>
+                {/if}
+            {/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 bg-black bg-opacity-50 flex items-center justify-center z-50"
+    >
+        <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
+            <h2 class="text-xl font-semibold mb-4">
+                {isEditing ? "Edit PO Item" : "New Item Request"}
+            </h2>
+            <form on:submit={savePOItem}>
+                {#each formColumns as col}
+                    <div class="mb-4">
+                        <label
+                            class="block text-sm font-medium mb-1"
+                            for={col.key}
+                        >
+                            {col.title}
+                        </label>
+                        <input
+                            type="text"
+                            id={col.key}
+                            name={col.key}
+                            bind:value={newPOItem[col.key as keyof POItem]}
+                            class={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errorClass(
+                                col.key,
+                            )}`}
+                            required
+                        />
+                        {#if $formErrors[col.key]}
+                            <p class="text-red-500 text-xs mt-1">
+                                {$formErrors[col.key]}
+                            </p>
+                        {/if}
+                    </div>
+                {/each}
+                <div class="flex justify-end space-x-2">
+                    <button
+                        type="button"
+                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300"
+                        on:click={() => (showModal = false)}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="submit"
+                        class="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
+                    >
+                        {isEditing ? "Update" : "Create"}
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+{/if}