update: sheet routes

src/lib/components/app-sidebar.svelte

@@ -10,13 +10,15 @@
 		CherryIcon,
 		DiamondIcon,
 		BugIcon,
-		CupSodaIcon
+		CupSodaIcon,
+		FileSpreadsheet
 	} from '@lucide/svelte/icons';
 	import TaobinLogo from '$lib/assets/logo.svelte';
 	import { goto } from '$app/navigation';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { get } from 'svelte/store';
 	import { sidebarStore } from '$lib/core/stores/sidebar';
+	import { referenceFromPage } from '$lib/core/stores/recipeStore';
 
 	let sideBar: HTMLElement | null = $state(null);
 	let isSideBarOpen: boolean = $state(true);
@@ -67,6 +69,17 @@
 						icon: BugIcon
 					}
 				]
+			},
+			{
+				title: 'Sheet',
+				items: [
+					{
+						title: 'Overview',
+						url: '/departments',
+						icon: FileSpreadsheet
+
+					}
+				]
 			}
 			// more to add here
 		]
@@ -109,7 +122,17 @@
 							<Sidebar.MenuItem>
 								<Sidebar.MenuButton>
 									{#snippet child({ props })}
-										<a href={sub.url} {...props}>
+										<a
+											href={sub.url}
+											{...props}
+											onclick={(e) => {
+												if (nav.title === 'Sheet') {
+													e.preventDefault();
+													referenceFromPage.set('sheet');
+													goto(sub.url);
+												}
+											}}
+										>
 											{#if sub.icon}
 												<sub.icon />
 											{/if}

src/routes/(authed)/departments/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { asset } from '$app/paths';
 	import { permission as currentPerms } from '$lib/core/stores/permissions';
+	import { page } from '$app/stores';
 	import { get } from 'svelte/store';
 	import Spinner from '$lib/components/ui/spinner/spinner.svelte';
 	import { departmentStore } from '$lib/core/stores/departments';
@@ -9,9 +10,12 @@
 	import { addNotification } from '$lib/core/stores/noti';
 	import { browser } from '$app/environment';
 	import { setCookieOnNonBrowser } from '$lib/helpers/cookie';
+	import { referenceFromPage} from '$lib/core/stores/recipeStore';
 
 	let enabledAccessibleCountries: string[] = $state([]);
 
+	const refPage = get(referenceFromPage);
+
 	function onCountrySelected(cnt: string) {
 		departmentStore.set(cnt);
 		if (browser && 'cookieStore' in window) cookieStore.set('department', cnt);
@@ -19,30 +23,37 @@
 		addNotification(`INFO:Selected ${cnt}`);
 		setTimeout(async () => {
 			console.log(get(departmentStore));
-			await goto('/recipe/overview');
+			
+			if (refPage === 'sheet') {
+				await goto('/sheet/overview');
+			} else {
+				await goto('/recipe/overview');
+			}
 		}, 1000);
 	}
 
 	// read or write permission
-	let userCurrentPerms = get(currentPerms).filter(
-		(x) => x.startsWith('document.read') || x.startsWith('document.write')
-	);
+	let userCurrentPerms = get(currentPerms).filter((x) => {
+		if (refPage === 'sheet') {
+			return x.startsWith('document.write');
+		}
+		return x.startsWith('document.read');
+	});
 	// show country by enabled `document.read.{country}`
-	enabledAccessibleCountries = userCurrentPerms
-		.filter((x) => x.startsWith('document.read'))
-		.map((x) => x.split('.')[2]);
+	enabledAccessibleCountries = userCurrentPerms.map((x) => x.split('.')[2]);
 
 	// update every 30s
 	if (enabledAccessibleCountries.length == 0) {
 		setTimeout(() => {
 			// read or write permission
-			let userCurrentPerms = get(currentPerms).filter(
-				(x) => x.startsWith('document.read') || x.startsWith('document.write')
-			);
+			let userCurrentPerms = get(currentPerms).filter((x) => {
+				if (refPage === 'sheet') {
+					return x.startsWith('document.write');
+				}
+				return x.startsWith('document.read');
+			});
 			// show country by enabled `document.read.{country}`
-			enabledAccessibleCountries = userCurrentPerms
-				.filter((x) => x.startsWith('document.read'))
-				.map((x) => x.split('.')[2]);
+			enabledAccessibleCountries = userCurrentPerms.map((x) => x.split('.')[2]);
 
 			if (enabledAccessibleCountries.length == 1) {
 				onCountrySelected(enabledAccessibleCountries[0]);

src/routes/(authed)/entry/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import RecipeModuleBtn from '$lib/assets/modules/recipe_btn.png';
 	import MachineInspectBtn from '$lib/assets/modules/monitoring_btn.png';
+	import SheetModuleBtn from '$lib/assets/modules/sheet_btn.png';
 	import { animate, JSAnimation, remove as removeAnime, stagger } from 'animejs';
 	import { goto } from '$app/navigation';
 	import Button from '$lib/components/ui/button/button.svelte';
@@ -9,9 +10,11 @@
 	import { permission as currentPermissions } from '$lib/core/stores/permissions';
 	import { get } from 'svelte/store';
 	import { onMount } from 'svelte';
+	import { referenceFromPage} from '$lib/core/stores/recipeStore';
 
 	let recipeModBtn = $state<HTMLElement | null>(null);
 	let monitorModBtn = $state<HTMLElement | null>(null);
+	let sheetModBtn = $state<HTMLElement | null>(null);
 
 	let gotoDashboardBtn = $state<HTMLElement | null>(null);
 
@@ -78,6 +81,36 @@
 				>
 					<img src={RecipeModuleBtn} alt="Recipes" loading="lazy" />
 				</button>
+
+				<button
+					class="button"
+					id="sheet_mod_btn"
+					bind:this={sheetModBtn}
+					onclick={() => {
+						referenceFromPage.set('sheet');
+						goto('/departments');
+					}}
+					onmouseenter={() => {
+						if (sheetModBtn) {
+							animate(sheetModBtn, {
+								scale: 1.1,
+								duration: 300,
+								ease: 'inOutSine'
+							});
+						}
+					}}
+					onmouseleave={() => {
+						if (sheetModBtn) {
+							animate(sheetModBtn, {
+								scale: 1.0,
+								duration: 200,
+								ease: 'inOutSine'
+							});
+						}
+					}}
+				>
+					<img src={SheetModuleBtn} alt="Sheets" loading="lazy" />
+				</button>
 			{/if}
 
 			<!-- need permission `tools` -->

src/routes/(authed)/sheet/overview/+page.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Button from '$lib/components/ui/button/button.svelte';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import { SearchIcon } from '@lucide/svelte/icons';
+
+	import { onDestroy, onMount } from 'svelte';
+	import {
+		loadRecipe,
+		recipeData,
+		recipeFromServerQuery,
+		recipeOverviewData,
+		referenceFromPage
+	} from '$lib/core/stores/recipeStore.js';
+	import { sendMessage } from '$lib/core/handlers/ws_messageSender.js';
+	import { auth } from '$lib/core/stores/auth.js';
+	import { get } from 'svelte/store';
+	import { getRecipes } from '$lib/core/client/server.js';
+	import { departmentStore } from '$lib/core/stores/departments';
+
+	let refDepartment: string | undefined = $state();
+
+	onMount(async () => {
+		// do load recipe
+		// loadRecipe();
+		refDepartment = get(departmentStore);
+		referenceFromPage.set('overview');
+		// await getRecipes();
+	});
+
+	// onDestroy(() => {
+	// 	unsubRecipeData();
+	// });
+</script>
+
+<div class="mx-8 flex">
+	<!-- header -->
+	<div class="w-full">
+		<div class="mb-4 flex items-center justify-between">
+			<div>
+				<h1 class="m-8 text-4xl font-bold">Layout overview [ {refDepartment} ]</h1>
+				<p class="mx-8 my-0 text-muted-foreground">
+                    Display menus from the spreadsheet current selected country
+				</p>
+			</div>
+			<div class="mx-8 my-4 flex gap-2">
+				<Button variant="default">+ Create Menu</Button>
+			</div>
+		</div>
+		<!-- search bar -->
+		<!-- <div class="mx-4 my-8 flex w-full items-center justify-center gap-2">
+			<SearchIcon />
+			<Input type="text" placeholder="Search by id, product code, name or material" class="" />
+		</div> -->
+		<!-- filter -->
+
+		<!-- table -->
+
+		<!-- <div class="w-full overflow-auto">
+			<DataTable data={data.recipes} refPage="overview" {columns} />
+		</div> -->
+	</div>
+</div>