perbaikan ui profile dan logout

src/components/Sidebar.svelte

@@ -68,21 +68,6 @@
                 "vm",
             ],
         },
-        {
-            name: "Profile",
-            icon: "🧑",
-            url: "/backoffice/profile",
-            roles: [
-                "it",
-                "ga",
-                "hr",
-                "s&m",
-                "office",
-                "hm",
-                "vm",
-                "accounting",
-            ],
-        },
         {
             name: "Issues",
             icon: "📂",
@@ -191,22 +176,6 @@
             url: "/backoffice/feedback",
             roles: ["it", "ga", "s&m", "office", "hm", "vm"],
         },
-        {
-            name: "Logout",
-            icon: "🚪",
-            url: "/logout",
-            roles: [
-                "it",
-                "guest",
-                "accounting",
-                "ga",
-                "hr",
-                "s&m",
-                "office",
-                "hm",
-                "vm",
-            ],
-        },
     ];
 
     let activeUrl = "/";
@@ -222,13 +191,6 @@
             activeUrl = item.url;
             openMenus[item.name] = !openMenus[item.name];
         } else {
-            if (item.url === "/logout") {
-                if (confirm("Are you sure you want to logout?")) {
-                    logout();
-                }
-                return;
-            }
-
             activeUrl = item.url;
             goto(item.url);
         }
@@ -250,23 +212,6 @@
                   )
                 : undefined,
         }));
-
-    // logout
-    async function logout() {
-        const { error } = await supabase.auth.signOut();
-        if (error) {
-            console.error("Logout failed:", error.message);
-        } else {
-            localStorage.removeItem("user");
-
-            goto("/login");
-        }
-    }
-
-    // Handle logout click
-    function handleLogoutClick() {
-        logout();
-    }
 </script>
 
 <div class="w-64 h-screen bg-white border-r shadow-sm">

src/routes/backoffice/+layout.svelte

@@ -14,6 +14,7 @@
         avatar: "https://i.pravatar.cc/40",
     };
     let userdata: any = null;
+    let showDropdown = false;
 
     const session = writable<Session | null>(null);
 
@@ -39,6 +40,19 @@
         user.name = userdata.full_name || "Guest";
         user.avatar = userdata.profile_picture || "https://i.pravatar.cc/40";
     });
+
+    //alert logout function
+    function handleLogout() {
+        if (confirm("Are you sure you want to logout?")) {
+            logout();
+        }
+    }
+
+    async function logout() {
+        await supabase.auth.signOut();
+        localStorage.clear();
+        goto("/login");
+    }
 </script>
 
 <div class="flex h-screen">
@@ -55,9 +69,9 @@
             <div class="flex items-center gap-6">
                 <!-- Notifications -->
                 <div class="relative">
-                    <button class="text-gray-600 hover:text-gray-800 text-xl">
-                        🔔
-                    </button>
+                    <button class="text-gray-600 hover:text-gray-800 text-xl"
+                        >🔔</button
+                    >
                     {#if notifications > 0}
                         <span
                             class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full"
@@ -66,16 +80,52 @@
                     {/if}
                 </div>
 
-                <!-- Profile -->
-                <div class="flex items-center gap-2">
-                    <img
-                        src={user.avatar}
-                        alt="User Avatar"
-                        class="w-8 h-8 rounded-full"
-                    />
-                    <span class="text-sm font-medium text-gray-700"
-                        >{user.name}</span
+                <!-- Profile with Dropdown -->
+                <div class="relative">
+                    <button
+                        class="flex items-center gap-2 focus:outline-none"
+                        on:click={() => (showDropdown = !showDropdown)}
                     >
+                        <img
+                            src={user.avatar}
+                            alt="User Avatar"
+                            class="w-8 h-8 rounded-full"
+                        />
+                        <span class="text-sm font-medium text-gray-700"
+                            >{user.name}</span
+                        >
+                        <svg
+                            class="w-4 h-4 ml-1"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M19 9l-7 7-7-7"
+                            />
+                        </svg>
+                    </button>
+
+                    {#if showDropdown}
+                        <div
+                            class="absolute right-0 mt-2 w-40 bg-white border rounded-md shadow-lg z-10"
+                        >
+                            <a
+                                href="/backoffice/profile"
+                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                                >Profile</a
+                            >
+                            <button
+                                on:click={handleLogout}
+                                class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
+                            >
+                                Logout
+                            </button>
+                        </div>
+                    {/if}
                 </div>
             </div>
         </div>

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

@@ -0,0 +1,7 @@
+<div
+    style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh;"
+>
+    <div style="font-size: 4rem; margin-bottom: 1rem;">🔒🔨</div>
+    <h2>Halaman sedang dalam tahap development</h2>
+    <p>Mohon maaf, halaman ini belum tersedia.</p>
+</div>

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

@@ -0,0 +1,7 @@
+<div
+    style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh;"
+>
+    <div style="font-size: 4rem; margin-bottom: 1rem;">🔒🔨</div>
+    <h2>Halaman sedang dalam tahap development</h2>
+    <p>Mohon maaf, halaman ini belum tersedia.</p>
+</div>