fix(core): add missing links and modernize list pages
- Added missing Addresses and Contacts links to Core Management main page. - Modernized list pages for Accounts, Sites, Activity Logs, and Lookups. - Standardized headers, iconography, and search layouts across all core list views. - Improved layout responsiveness and visual hierarchy.
This commit is contained in:
Scott Idem
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Building, Globe, Users, ShieldCheck, List, History } from 'lucide-svelte';
|
||||
import { Building, Globe, Users, ShieldCheck, List, History, MapPin, Phone, Landmark, LayoutDashboard } from 'lucide-svelte';
|
||||
import { ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
@@ -12,86 +12,152 @@
|
||||
$slct.account_id = data.account_id;
|
||||
</script>
|
||||
|
||||
<section class="ae_core md:container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h2 class="h2">Æ Core Management</h2>
|
||||
<div class="text-right">
|
||||
<p class="text-sm opacity-60">Active Account</p>
|
||||
<p class="font-bold">{$ae_loc.account_name ?? 'Loading...'}</p>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-[200px]">
|
||||
<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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<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-4 space-y-4 variant-soft-primary">
|
||||
<div class="flex items-center gap-2">
|
||||
<Building size={20} />
|
||||
<h3 class="h4">Accounts</h3>
|
||||
<div class="card p-6 space-y-4 variant-soft-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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 text-balance">Manage client accounts and high-level system settings.</p>
|
||||
<a class="btn variant-filled-primary w-full" href="/core/accounts">
|
||||
Manage Accounts
|
||||
<a class="btn variant-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Site Management Card -->
|
||||
<div class="card p-4 space-y-4 variant-soft-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<Globe size={20} />
|
||||
<h3 class="h4">Sites</h3>
|
||||
<div class="card p-6 space-y-4 variant-soft-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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 text-balance">Configure sites and domains associated with the active account.</p>
|
||||
<a class="btn variant-filled-secondary w-full" href="/core/sites">
|
||||
Manage Sites
|
||||
<a class="btn variant-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User Management Card -->
|
||||
<div class="card p-4 space-y-4 variant-soft-error">
|
||||
<div class="flex items-center gap-2">
|
||||
<ShieldCheck size={20} />
|
||||
<h3 class="h4">Users</h3>
|
||||
<div class="card p-6 space-y-4 variant-soft-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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 text-balance">Manage system access, permissions, and user credentials.</p>
|
||||
<a class="btn variant-filled-error w-full" href="/core/users">
|
||||
Manage Users
|
||||
<a class="btn variant-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Person Management Card -->
|
||||
<div class="card p-4 space-y-4 variant-soft-warning">
|
||||
<div class="flex items-center gap-2">
|
||||
<Users size={20} />
|
||||
<h3 class="h4">People</h3>
|
||||
<div class="card p-6 space-y-4 variant-soft-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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 text-balance">Search and manage person records and their user linking.</p>
|
||||
<a class="btn variant-filled-warning w-full" href="/core/people">
|
||||
Manage People
|
||||
<a class="btn variant-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 variant-soft 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">
|
||||
<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>
|
||||
</div>
|
||||
<a class="btn variant-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 variant-soft 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">
|
||||
<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>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Activity Log Card -->
|
||||
<div class="card p-4 space-y-4 variant-soft-success">
|
||||
<div class="flex items-center gap-2">
|
||||
<History size={20} />
|
||||
<h3 class="h4">Activity Logs</h3>
|
||||
<div class="card p-6 space-y-4 variant-soft-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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 text-balance">Monitor system actions and historical changes for the account.</p>
|
||||
<a class="btn variant-filled-success w-full" href="/core/activity_logs">
|
||||
View Activity Logs
|
||||
<a class="btn variant-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
|
||||
View Logs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Lookups Card -->
|
||||
<div class="card p-4 space-y-4 variant-soft-surface">
|
||||
<div class="flex items-center gap-2">
|
||||
<List size={20} />
|
||||
<h3 class="h4">Lookups</h3>
|
||||
<div class="card p-6 space-y-4 variant-soft 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">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-sm opacity-80 text-balance">View system lookup tables (countries, time zones, etc).</p>
|
||||
<a class="btn variant-filled-surface w-full" href="/core/lookups">
|
||||
View Lookups
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
Reference in New Issue
Block a user