cms/resources/js/components/admin/Dashboard.svelte

<script>
    let { user, adminPath, permissions } = $props();
    const userData = $derived(typeof user === 'string' ? JSON.parse(user) : user);
    const userPermissions = $derived(typeof permissions === 'string' ? JSON.parse(permissions) : (permissions || {}));
    $effect(() => {
        console.log("user data", userData);
        console.log("permissions", userPermissions);
    });
</script>

<div class="ui container" style="margin-top: 2em;">
    <div class="ui segment">
        <h2 class="ui header">
            <i class="dashboard icon"></i>
            <div class="content">
                Welcome to SiteWeaver CMS
                <div class="sub header">Hello, {userData.name}! Manage your site content from here.</div>
            </div>
        </h2>
    </div>

    <div class="ui three stackable cards">
        {#if userPermissions['view-pages']}
            <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/pages" class="ui card">
                <div class="content">
                    <i class="right floated huge file icon"></i>
                    <div class="header">Pages</div>
                    <div class="meta">Manage static content</div>
                    <div class="description">
                        Create, edit, and organize your site's pages.
                    </div>
                </div>
                <div class="extra content">
                    <span class="right floated">
                        Go to Pages <i class="right arrow icon"></i>
                    </span>
                </div>
            </a>
        {/if}

        {#if userPermissions['view-themes']}
            <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/themes" class="ui card">
                <div class="content">
                    <i class="right floated huge paint brush icon"></i>
                    <div class="header">Themes</div>
                    <div class="meta">Manage site appearance</div>
                    <div class="description">
                        Switch themes and customize your site's look and feel.
                    </div>
                </div>
                <div class="extra content">
                    <span class="right floated">
                        Go to Themes <i class="right arrow icon"></i>
                    </span>
                </div>
            </a>
        {/if}

        <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/profile" class="ui card">
            <div class="content">
                <i class="right floated huge user icon"></i>
                <div class="header">My Profile</div>
                <div class="meta">Update your settings</div>
                <div class="description">
                    Change your email, name, or password.
                </div>
            </div>
            <div class="extra content">
                <span class="right floated">
                    Go to Profile <i class="right arrow icon"></i>
                </span>
            </div>
        </a>

        {#if userPermissions['view-users']}
            <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/users" class="ui card">
                <div class="content">
                    <i class="right floated huge users icon"></i>
                    <div class="header">Users</div>
                    <div class="meta">Manage system users</div>
                    <div class="description">
                        Add, edit, or remove users and assign roles.
                    </div>
                </div>
                <div class="extra content">
                    <span class="right floated">
                        Go to Users <i class="right arrow icon"></i>
                    </span>
                </div>
            </a>
        {/if}

        {#if userPermissions['view-roles']}
            <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/roles" class="ui card">
                <div class="content">
                    <i class="right floated huge shield alternate icon"></i>
                    <div class="header">Roles & Permissions</div>
                    <div class="meta">Authorization management</div>
                    <div class="description">
                        Create custom roles and assign granular permissions.
                    </div>
                </div>
                <div class="extra content">
                    <span class="right floated">
                        Manage Roles <i class="right arrow icon"></i>
                    </span>
                </div>
            </a>
        {/if}

        {#if userPermissions['manage-settings']}
            <a href="{window.location.origin.endsWith('/') ? window.location.origin : window.location.origin + '/'}{adminPath.startsWith('/') ? adminPath.substring(1) : adminPath}/settings" class="ui card">
                <div class="content">
                    <i class="right floated huge setting icon"></i>
                    <div class="header">Settings</div>
                    <div class="meta">Site-wide configuration</div>
                    <div class="description">
                        Configure your site title, SEO, and more.
                    </div>
                </div>
                <div class="extra content">
                    <span class="right floated">
                        Manage Settings <i class="right arrow icon"></i>
                    </span>
                </div>
            </a>
        {/if}
    </div>
</div>