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

<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';

	import ArrowRight from '@lucide/svelte/icons/arrow-right';
	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);

	let animationPulseGoto: JSAnimation;

	let perms = $state<string[]>([]);

	setInterval(() => {
		if (gotoDashboardBtn && !animationPulseGoto) {
			animationPulseGoto = animate(gotoDashboardBtn, {
				opacity: [0.8, 1], // Slight pulse in opacity
				duration: 800, // Duration of one pulse
				loop: true, // Repeat forever
				alternate: true,
				delay: stagger(100),
				ease: 'inOutQuad',
				boxShadow: ['0 0 0px 0 none', '0 0 0px 7px lightblue']
			});
		}
	}, 1000);

	// let perms = get(currentPermissions);

	onMount(() => {
		return currentPermissions.subscribe((perm) => {
			console.log('sub get perm', JSON.stringify(perm));
			if (perm.length > 0) {
				perms = perm;
			}
		});
	});
</script>

<div class="flex h-screen items-center justify-center">
	<div class="columns-md place-content-center gap-8">
		<h1 class="m-8 text-center text-4xl font-bold">Module Selection</h1>

		<div class="flex items-center justify-between">
			<!-- need permission `document` -->
			{#if perms.filter((x) => x.startsWith('document.read') || x.startsWith('document.write')).length > 0}
				<button
					class="button"
					id="recipe_mod_btn"
					bind:this={recipeModBtn}
					onclick={() => goto('/departments')}
					onmouseenter={() => {
						if (recipeModBtn) {
							animate(recipeModBtn, {
								scale: 1.1,
								duration: 300,
								ease: 'inOutSine'
							});
						}
					}}
					onmouseleave={() => {
						if (recipeModBtn) {
							animate(recipeModBtn, {
								scale: 1.0,
								duration: 200,
								ease: 'inOutSine'
							});
						}
					}}
				>
					<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` -->
			{#if perms.filter((x) => x.startsWith('tools')).length > 0}
				<button
					class="button"
					id="monitor_mod_btn"
					bind:this={monitorModBtn}
					onclick={() => goto('/tools')}
					onmouseenter={() => {
						if (monitorModBtn) {
							animate(monitorModBtn, {
								scale: 1.1,
								duration: 300,
								ease: 'inOutSine'
							});
						}
					}}
					onmouseleave={() => {
						if (monitorModBtn) {
							animate(monitorModBtn, {
								scale: 1.0,
								duration: 200,
								ease: 'inOutSine'
							});
						}
					}}
				>
					<img src={MachineInspectBtn} alt="Recipes" loading="lazy" />
				</button>
			{/if}
		</div>

		{#if perms.filter((x) => x.startsWith('document.read') || x.startsWith('document.write') || x.startsWith('tools')).length == 0}
			<p class="m-8 text-center text-2xl">
				No modules are available. Please wait a seconds or check your account with admin.
			</p>
		{/if}

		<div class="m-16 flex items-center justify-center">
			<button
				id="goto_dash_btn"
				class="inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 has-[>svg]:px-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:hover:bg-accent/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
				bind:this={gotoDashboardBtn}
				onclick={() => goto('/dashboard')}
			>
				Go to Dashboard <ArrowRight size={32} />
			</button>
		</div>
	</div>
</div>