Now even prettier with the new Tailwind CSS plugin. Probably should have done this long ago...
This commit is contained in:
Scott Idem
@@ -25,11 +25,11 @@ $effect(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-8">
|
||||
<div class="container mx-auto space-y-8 p-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">
|
||||
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="p-3 bg-primary-500/10 rounded-xl">
|
||||
<div class="bg-primary-500/10 rounded-xl p-3">
|
||||
<LayoutDashboard size={32} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -37,42 +37,42 @@ $effect(() => {
|
||||
Æ Core Management
|
||||
</h1>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
class="text-xs font-bold tracking-widest uppercase opacity-50">
|
||||
System Infrastructure & Identity
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-50">
|
||||
class="border-surface-500/10 min-w-50 rounded-xl border bg-black/5 p-3">
|
||||
<p
|
||||
class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1 mb-1">
|
||||
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="font-bold text-sm">
|
||||
<p class="text-sm font-bold">
|
||||
{$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">
|
||||
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 p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
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="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<p class="text-sm leading-relaxed opacity-80">
|
||||
Manage client accounts and high-level system settings.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="btn preset-filled-primary font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-primary mt-4 w-full font-bold shadow-md"
|
||||
href="/core/accounts">
|
||||
Manage
|
||||
</a>
|
||||
@@ -80,22 +80,22 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<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 font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-secondary mt-4 w-full font-bold shadow-md"
|
||||
href="/core/sites">
|
||||
Manage
|
||||
</a>
|
||||
@@ -103,21 +103,21 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<p class="text-sm leading-relaxed opacity-80">
|
||||
Manage system access, permissions, and user credentials.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="btn preset-filled-error font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-error mt-4 w-full font-bold shadow-md"
|
||||
href="/core/users">
|
||||
Manage
|
||||
</a>
|
||||
@@ -125,21 +125,21 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<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 font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-warning mt-4 w-full font-bold shadow-md"
|
||||
href="/core/people">
|
||||
Manage
|
||||
</a>
|
||||
@@ -147,21 +147,21 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<p class="text-sm leading-relaxed opacity-80">
|
||||
Manage physical locations, shipping, and billing addresses.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
|
||||
href="/core/addresses">
|
||||
Manage
|
||||
</a>
|
||||
@@ -169,22 +169,22 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<p class="text-sm leading-relaxed opacity-80">
|
||||
Maintain support contacts, office numbers, and digital
|
||||
links.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
|
||||
href="/core/contacts">
|
||||
Manage
|
||||
</a>
|
||||
@@ -192,22 +192,22 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<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 font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-success mt-4 w-full font-bold shadow-md"
|
||||
href="/core/activity_logs">
|
||||
View Logs
|
||||
</a>
|
||||
@@ -215,21 +215,21 @@ $effect(() => {
|
||||
|
||||
<!-- 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">
|
||||
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="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
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 opacity-80 leading-relaxed">
|
||||
<p class="text-sm leading-relaxed opacity-80">
|
||||
View system lookup tables (countries, time zones, etc).
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
|
||||
class="btn preset-filled-surface mt-4 w-full font-bold shadow-md"
|
||||
href="/core/lookups">
|
||||
View
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user