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 {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";

    let recipeModBtn = $state<HTMLElement | null>(null);
    let monitorModBtn = $state<HTMLElement | null>(null);

    let gotoDashboardBtn = $state<HTMLElement | null>(null);
    
    let animationPulseGoto: JSAnimation;

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


</script>

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

        
        <div class="flex justify-between items-center">
            <!-- 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>
            {/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="text-center text-2xl m-8">No modules are available. 
                Please check your account with admin.</p>

        {/if}

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


    </div>
</div>