Files
OSIT-AE-App-Svelte/src/routes/core/+page.svelte

239 lines
9.2 KiB
Svelte

<script lang="ts">
import {
Building,
Globe,
History,
Landmark,
LayoutDashboard,
List,
MapPin,
Phone,
ShieldCheck,
Users
} from '@lucide/svelte';
import { ae_loc, slct } from '$lib/stores/ae_stores';
interface Props {
data: any;
}
let { data }: Props = $props();
// Quickly save the data passed from the parent(s)
$effect(() => {
$slct.account_id = data.account_id;
});
</script>
<div class="container mx-auto space-y-8 p-4">
<header
class="bg-surface-50-900-token border-surface-500/10 flex flex-wrap items-center justify-between gap-4 rounded-2xl border p-6 shadow-xl">
<div class="flex items-center gap-4">
<div class="bg-primary-500/10 rounded-xl p-3">
<LayoutDashboard size={32} class="text-primary-500" />
</div>
<div>
<h1 class="h2 font-black tracking-tight text-balance">
Æ Core Management
</h1>
<p
class="text-xs font-bold tracking-widest uppercase opacity-50">
System Infrastructure & Identity
</p>
</div>
</div>
<div
class="border-surface-500/10 min-w-50 rounded-xl border bg-black/5 p-3">
<p
class="mb-1 flex items-center gap-1 text-[10px] font-black tracking-widest uppercase opacity-60">
<Landmark size={10} /> Active Account
</p>
<p class="text-sm font-bold">
{$ae_loc.account_name ?? 'Loading...'}
</p>
</div>
</header>
<div
class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Account Management Card -->
<div
class="card preset-tonal-primary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-primary-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<Building size={24} />
</div>
<h3 class="h4 font-black">Accounts</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Manage client accounts and high-level system settings.
</p>
</div>
<a
class="btn preset-filled-primary mt-4 w-full font-bold shadow-md"
href="/core/accounts">
Manage
</a>
</div>
<!-- Site Management Card -->
<div
class="card preset-tonal-secondary group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-secondary-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<Globe size={24} />
</div>
<h3 class="h4 font-black">Sites</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Configure sites and domains associated with the active
account.
</p>
</div>
<a
class="btn preset-filled-secondary mt-4 w-full font-bold shadow-md"
href="/core/sites">
Manage
</a>
</div>
<!-- User Management Card -->
<div
class="card preset-tonal-error group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-error-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<ShieldCheck size={24} />
</div>
<h3 class="h4 font-black">Users</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Manage system access, permissions, and user credentials.
</p>
</div>
<a
class="btn preset-filled-error mt-4 w-full font-bold shadow-md"
href="/core/users">
Manage
</a>
</div>
<!-- Person Management Card -->
<div
class="card preset-tonal-warning group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-warning-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<Users size={24} />
</div>
<h3 class="h4 font-black">People</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Search and manage person records and their user linking.
</p>
</div>
<a
class="btn preset-filled-warning mt-4 w-full font-bold shadow-md"
href="/core/people">
Manage
</a>
</div>
<!-- Address Management Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<MapPin size={24} />
</div>
<h3 class="h4 font-black">Addresses</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Manage physical locations, shipping, and billing addresses.
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/addresses">
Manage
</a>
</div>
<!-- Contact Management Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<Phone size={24} />
</div>
<h3 class="h4 font-black">Contacts</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Maintain support contacts, office numbers, and digital
links.
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/contacts">
Manage
</a>
</div>
<!-- Activity Log Card -->
<div
class="card preset-tonal-success group flex flex-col justify-between space-y-4 p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-success-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<History size={24} />
</div>
<h3 class="h4 font-black">Activity Logs</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
Monitor system actions and historical changes for the
account.
</p>
</div>
<a
class="btn preset-filled-success mt-4 w-full font-bold shadow-md"
href="/core/activity_logs">
View Logs
</a>
</div>
<!-- Lookups Card -->
<div
class="card preset-tonal-surface group border-surface-500/10 flex flex-col justify-between space-y-4 border p-6 shadow-lg transition-all hover:brightness-110">
<div class="space-y-4">
<div class="flex items-center gap-3">
<div
class="bg-surface-500/20 rounded-lg p-2 transition-transform group-hover:scale-110">
<List size={24} />
</div>
<h3 class="h4 font-black">Lookups</h3>
</div>
<p class="text-sm leading-relaxed opacity-80">
View system lookup tables (countries, time zones, etc).
</p>
</div>
<a
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
href="/core/lookups">
View
</a>
</div>
</div>
</div>