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

penamabahan menu approval untill received

Browse Source
This commit is contained in:
Aji Setiaji
2025-05-29 23:55:26 +07:00
parent 3d8575d68c
commit ec9d47846e
10 changed files with 4781 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/Sidebar.svelte
View File

@@ -1,5 +1,21 @@
<script>
let menuItems = [
<script lang="ts">
import { goto } from "$app/navigation";
import { onMount } from "svelte";
type SubMenuItem = {
name: string;
icon: string;
url: string;
};
type MenuItem = {
name: string;
icon: string;
url: string;
sub?: SubMenuItem[];
};
let menuItems: MenuItem[] = [
{ name: "Beranda", icon: "🏠", url: "/" },
{ name: "Profile", icon: "🧑", url: "/profile" },
{ name: "Issues", icon: "📂", url: "/backoffice/issue" },
@@ -7,8 +23,30 @@
{ name: "Projects", icon: "📂", url: "/backoffice/project" },
{
name: "Purchase Orders",
icon: "📂",
icon: "📦",
url: "/backoffice/purchaseorder",
sub: [
{
name: "Approval",
icon: "✅",
url: "/backoffice/purchaseorder/approval",
},
{
name: "Acknowledged",
icon: "📋",
url: "/backoffice/purchaseorder/acknowledged",
},
{
name: "Complete",
icon: "✔️",
url: "/backoffice/purchaseorder/complete",
},
{
name: "Received",
icon: "📥",
url: "/backoffice/purchaseorder/received",
},
],
},
{ name: "Timesheets", icon: "📂", url: "/backoffice/timesheets" },
{
@@ -20,15 +58,39 @@
{ name: "Inventories", icon: "📂", url: "/backoffice/inventories" },
{ name: "Vendor", icon: "📂", url: "/backoffice/vendor" },
{ name: "Booking", icon: "📂", url: "/backoffice/booking" },
{ name: "Users", icon: "👤", url: "/backoffice/users" },
{ name: "Users", icon: "👤", url: "/backoffice/account" },
{ name: "Logout", icon: "🚪", url: "/logout" },
];
let active = "Purchase Orders";
let activeUrl = "/";
let openMenus: Record<string, boolean> = {};
onMount(() => {
activeUrl = window.location.pathname;
});
function handleMenuClick(item: MenuItem) {
console.log(`Menu item clicked: ${item.name}`);
console.log(`URL: ${item.url}`);
if (item.sub) {
goto(item.url);
activeUrl = item.url;
openMenus[item.name] = !openMenus[item.name];
} else {
activeUrl = item.url;
goto(item.url);
}
}
function handleSubClick(sub: SubMenuItem) {
activeUrl = sub.url;
goto(sub.url);
}
</script>
<div class="w-64 h-screen bg-white border-r shadow-sm">
<div class=" p-8 border-b">
<div class="p-8 border-b">
<h1 class="text-xl font-semibold text-gray-800">Backoffice</h1>
<p class="text-sm text-gray-500">Manage your application</p>
</div>
@@ -38,16 +100,38 @@
<a
href={item.url}
class={`flex items-center gap-2 px-4 py-2 rounded transition-colors duration-150
${
active === item.name
? "bg-blue-100 text-blue-600 font-semibold"
: "text-gray-700 hover:bg-blue-50"
}`}
on:click={() => (active = item.name)}
${activeUrl === item.url ? "bg-blue-100 text-blue-600 font-semibold" : "text-gray-700 hover:bg-blue-50"}
${item.sub ? "justify-between" : ""}
`}
on:click|preventDefault={() => handleMenuClick(item)}
>
<span class="text-xl">{item.icon}</span>
<span class="truncate">{item.name}</span>
<span class="flex items-center gap-2">
<span class="text-xl">{item.icon}</span>
<span class="truncate">{item.name}</span>
</span>
{#if item.sub}
<span>{openMenus[item.name] ? "▲" : "▼"}</span>
{/if}
</a>
{#if item.sub && openMenus[item.name]}
<ul class="ml-8 mt-1 space-y-1">
{#each item.sub as sub}
<li>
<a
href={sub.url}
class={`flex items-center gap-2 px-3 py-1 rounded transition-colors duration-150
${activeUrl === sub.url ? "bg-blue-50 text-blue-600 font-semibold" : "text-gray-700 hover:bg-blue-50"}
`}
on:click|preventDefault={() =>
handleSubClick(sub)}
>
<span class="text-lg">{sub.icon}</span>
<span class="truncate">{sub.name}</span>
</a>
</li>
{/each}
</ul>
{/if}
</li>
{/each}
</ul>