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