conversion data

src/components/Sidebar.svelte

@@ -2,6 +2,27 @@
     import { goto } from "$app/navigation";
     import { onMount } from "svelte";
 
+    //  get local storage user
+    let user: any = null;
+    onMount(() => {
+        const userStr = localStorage.getItem("user");
+        if (userStr) {
+            user = JSON.parse(userStr);
+            if (user?.role) {
+                userRole = user.role;
+            }
+        }
+
+        activeUrl = window.location.pathname;
+
+        // Expand parent menu if current path matches sub menu
+        for (const item of fullMenu) {
+            if (item.sub?.some((s) => s.url === activeUrl)) {
+                openMenus[item.name] = true;
+            }
+        }
+    });
+
     type SubMenuItem = {
         name: string;
         icon: string;
@@ -13,18 +34,42 @@
         icon: string;
         url: string;
         sub?: SubMenuItem[];
+        roles?: string[]; // <- tambahkan ini
     };
 
-    let menuItems: MenuItem[] = [
-        { name: "Beranda", icon: "🏠", url: "/" },
-        { name: "Profile", icon: "🧑", url: "/profile" },
-        { name: "Issues", icon: "📂", url: "/backoffice/issue" },
-        { name: "Issue View", icon: "📂", url: "/backoffice/issue/view" },
-        { name: "Projects", icon: "📂", url: "/backoffice/project" },
+    // Contoh role yang sedang aktif (bisa dari Supabase atau session)
+    let userRole: "admin" | "user" | "guest" = "user";
+    // Semua menu
+    const fullMenu: MenuItem[] = [
+        {
+            name: "Beranda",
+            icon: "🏠",
+            url: "/",
+            roles: ["admin", "user", "guest"],
+        },
+        {
+            name: "Profile",
+            icon: "🧑",
+            url: "/profile",
+            roles: ["admin", "user"],
+        },
+        {
+            name: "Issues",
+            icon: "📂",
+            url: "/backoffice/issue",
+            roles: ["admin", "user"],
+        },
+        {
+            name: "Projects",
+            icon: "📂",
+            url: "/backoffice/project",
+            roles: ["admin"],
+        },
         {
             name: "Purchase Orders",
             icon: "📦",
             url: "/backoffice/purchaseorder",
+            roles: ["admin", "user"],
             sub: [
                 {
                     name: "Approval",
@@ -48,18 +93,18 @@
                 },
             ],
         },
-        { name: "Timesheets", icon: "📂", url: "/backoffice/timesheets" },
         {
-            name: "Timesheets View",
-            icon: "📂",
-            url: "/backoffice/timesheets/view",
+            name: "Users",
+            icon: "👤",
+            url: "/backoffice/account",
+            roles: ["admin"],
+        },
+        {
+            name: "Logout",
+            icon: "🚪",
+            url: "/logout",
+            roles: ["admin", "user", "guest"],
         },
-        { name: "Villa", icon: "📂", url: "/backoffice/villa" },
-        { name: "Inventories", icon: "📂", url: "/backoffice/inventories" },
-        { name: "Vendor", icon: "📂", url: "/backoffice/vendor" },
-        { name: "Booking", icon: "📂", url: "/backoffice/booking" },
-        { name: "Users", icon: "👤", url: "/backoffice/account" },
-        { name: "Logout", icon: "🚪", url: "/logout" },
     ];
 
     let activeUrl = "/";
@@ -95,7 +140,7 @@
         <p class="text-sm text-gray-500">Manage your application</p>
     </div>
     <ul class="p-2 space-y-1">
-        {#each menuItems as item}
+        {#each fullMenu as item}
             <li>
                 <a
                     href={item.url}

src/lib/utils/conversion.ts

@@ -0,0 +1,22 @@
+// function 2025-05-27T04:40:33.413511 to YYYY-MM-DD HH:mm:ss
+export function timestampToDateTime(timestamp: string): string {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+// Function to convert a timestamp to a date string in YYYY-MM-DD format
+export function timestampToDate(timestamp: number): string {
+    const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+    const day = String(date.getDate()).padStart(2, '0');
+
+    return `${year}-${month}-${day}`;
+}

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

@@ -2,6 +2,7 @@
     import { onMount } from "svelte";
     import Select from "svelte-select";
     import { supabase } from "$lib/supabaseClient";
+    import { timestampToDateTime } from "$lib/utils/conversion";
 
     type PurchaseOrderInsert = {
         issue_id: string;
@@ -70,6 +71,7 @@
         completed_status: string;
         received: boolean;
         received_by: string;
+        created_at: string;
     };
 
     let allRows: PurchaseOrderDisplay[] = [];
@@ -766,6 +768,14 @@
                                         🗑️ Delete
                                     </button>
                                 </td>
+                            {:else if col.key === "created_at"}
+                                <td class="px-4 py-2 text-gray-500"
+                                    >{timestampToDateTime(
+                                        row[
+                                            col.key as keyof PurchaseOrderDisplay
+                                        ] as string,
+                                    )}</td
+                                >
                             {:else}
                                 <td class="px-4 py-2 text-gray-700"
                                     >{row[

src/routes/backoffice/purchaseorder/complete/+page.svelte

@@ -98,7 +98,7 @@
         { key: "completed_status", title: "Completed Status" },
         { key: "acknowledge_by", title: "Acknowledged By" },
         { key: "created_at", title: "Created At" },
-        { key: "actions", title: "Actions" }, // For edit/delete buttons
+        // { key: "actions", title: "Actions" }, // For edit/delete buttons
     ];
 
     let currentPage = 1;

src/routes/backoffice/purchaseorder/received/+page.svelte

@@ -98,7 +98,7 @@
         { key: "received", title: "Received" },
         { key: "received_by", title: "Received By" },
         { key: "created_at", title: "Created At" },
-        { key: "actions", title: "Actions" }, // For edit/delete buttons
+        // { key: "actions", title: "Actions" }, // For edit/delete buttons
     ];
 
     let currentPage = 1;

src/routes/login/+page.svelte

@@ -14,6 +14,20 @@
         if (loginError) {
             error = loginError.message;
         } else {
+            const { data: dataUser, error: eror } = await supabase
+                .from("users")
+                .select("*")
+                .eq("id", data.user.id)
+                .single();
+
+            if (eror) {
+                error = "Failed to fetch user data.";
+                return;
+            } else {
+                // Set user data in local storage or a store
+                localStorage.setItem("user", JSON.stringify(dataUser));
+            }
+
             goto("/backoffice/issue");
         }
     };