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>
|
||||
@@ -3,12 +3,22 @@
|
||||
import { load_ae_obj_li__account, create_ae_obj__account } from '$lib/ae_core/ae_core__account';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { FileText, Plus, Search, Building } from 'lucide-svelte';
|
||||
import { FileText, Plus, Search, Building, ListFilter, RefreshCcw, X, ExternalLink, Calendar, ShieldCheck } from 'lucide-svelte';
|
||||
|
||||
let account_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? account_li.filter(a =>
|
||||
a.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: account_li
|
||||
);
|
||||
|
||||
async function load_accounts() {
|
||||
loading = true;
|
||||
@@ -47,84 +57,125 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-4">
|
||||
<header class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Building size={24} />
|
||||
<h1 class="h2">Account Management</h1>
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Building size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Account Management</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Client Entities & Billing</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn variant-filled-primary" onclick={handle_add_account}>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
|
||||
<Plus size={16} class="mr-2" /> Add Account
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
|
||||
<label class="label">
|
||||
<span>Enabled Status</span>
|
||||
<select class="select" bind:value={qry_enabled} onchange={load_accounts}>
|
||||
<option value="all">All</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Hidden Status</span>
|
||||
<select class="select" bind:value={qry_hidden} onchange={load_accounts}>
|
||||
<option value="all">All</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="btn variant-filled-secondary" onclick={load_accounts} disabled={loading}>
|
||||
<Search size={16} class="mr-2" /> Refresh
|
||||
</button>
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</label>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_accounts} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex justify-center p-12">
|
||||
<div class="placeholder animate-pulse w-full h-32"></div>
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if account_li.length === 0}
|
||||
<div class="card p-8 text-center">
|
||||
<p>No accounts found matching your filters.</p>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Building size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Accounts Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your filters or add a new client account.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Code</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each account_li as acct}
|
||||
<tr>
|
||||
<td>{acct.name}</td>
|
||||
<td><code class="code">{acct.code || '--'}</code></td>
|
||||
<td>{new Date(acct.created_on).toLocaleDateString()}</td>
|
||||
<td>
|
||||
{#if acct.enable}
|
||||
<span class="badge variant-filled-success">Enabled</span>
|
||||
{:else}
|
||||
<span class="badge variant-filled-error">Disabled</span>
|
||||
{/if}
|
||||
{#if acct.hide}
|
||||
<span class="badge variant-filled-warning">Hidden</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm variant-soft-primary" href="/core/accounts/{acct.account_id_random}">
|
||||
Manage
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Directory Results
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as acct}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4 flex gap-1">
|
||||
{#if acct.hide}
|
||||
<span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {acct.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{acct.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Building size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">{acct.name}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {acct.code || '--'}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2 text-xs opacity-70">
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Calendar size={14} class="text-primary-500 shrink-0" />
|
||||
<span>Created: {new Date(acct.created_on).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate">{acct.account_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
|
||||
Manage Account
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { Search, History, Calendar, User, Tag, Activity } from 'lucide-svelte';
|
||||
import { Search, History, Calendar, User, Tag, Activity, ListFilter, RefreshCcw, Clock, ShieldCheck } from 'lucide-svelte';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
|
||||
// State
|
||||
@@ -46,136 +46,175 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-4">
|
||||
<header class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<History size={24} />
|
||||
<h1 class="h2">Activity Logs</h1>
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<History size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Activity Logs</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Audit Trail & History</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Updating...
|
||||
{:else}
|
||||
<RefreshCcw size={16} class="mr-2" /> Refresh Logs
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="card p-4 variant-soft">
|
||||
<form onsubmit={handle_search} class="flex flex-wrap gap-4 items-end">
|
||||
<label class="label grow max-w-md">
|
||||
<span>Search (Keyword)</span>
|
||||
<div class="input-group input-group-divider grid-cols-[1fr_auto]">
|
||||
<input type="search" placeholder="Action, name, description..." bind:value={qry_str} />
|
||||
<button type="submit" class="variant-filled-secondary">
|
||||
<Search size={16} />
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Keywords</label>
|
||||
<form onsubmit={handle_search} class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Action, name, description..."
|
||||
/>
|
||||
<button type="submit" class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" disabled={loading}>
|
||||
<span class="whitespace-nowrap tracking-wide">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Limit</span>
|
||||
<select class="select" bind:value={limit} onchange={load_logs}>
|
||||
<option value={25}>25</option>
|
||||
<option value={50}>50</option>
|
||||
<option value={100}>100</option>
|
||||
<option value={250}>200</option>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Display Limit</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
|
||||
<option value={25}>Latest 25</option>
|
||||
<option value={50}>Latest 50</option>
|
||||
<option value={100}>Latest 100</option>
|
||||
<option value={250}>Latest 250</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="button" class="btn variant-filled-secondary" onclick={load_logs} disabled={loading}>
|
||||
Refresh
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex justify-center p-12">
|
||||
<div class="placeholder animate-pulse w-full h-32"></div>
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if log_li.length === 0}
|
||||
<div class="card p-8 text-center">
|
||||
<p>No activity logs found for this account matching your criteria.</p>
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Activity size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Logs Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try broadening your search or check another account.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date/Time</th>
|
||||
<th>User/Person</th>
|
||||
<th>Action</th>
|
||||
<th>Context</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each log_li as log}
|
||||
<tr>
|
||||
<!-- Date/Time -->
|
||||
<td class="whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">{ae_util.iso_datetime_formatter(log.created_on, 'date_short')}</span>
|
||||
<span class="text-xs opacity-60">{ae_util.iso_datetime_formatter(log.created_on, 'time_12_short')}</span>
|
||||
</div>
|
||||
</td>
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
System Events
|
||||
<span class="badge variant-soft-secondary ml-auto">{log_li.length} entries shown</span>
|
||||
</h3>
|
||||
|
||||
<!-- User/Person -->
|
||||
<td>
|
||||
<div class="flex flex-col max-w-[200px] truncate">
|
||||
{#if log.person_full_name || log.person_id_random}
|
||||
<span class="flex items-center gap-1">
|
||||
<User size={12} />
|
||||
{log.person_full_name || 'Person'}
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Timestamp</th>
|
||||
<th>Identity</th>
|
||||
<th>Action</th>
|
||||
<th>Resource</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each log_li as log}
|
||||
<tr class="transition-colors text-sm">
|
||||
<!-- Date/Time -->
|
||||
<td class="whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<Calendar size={14} class="opacity-40" />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">{ae_util.iso_datetime_formatter(log.created_on, 'date_short')}</span>
|
||||
<span class="text-[10px] opacity-50 flex items-center gap-1">
|
||||
<Clock size={10} /> {ae_util.iso_datetime_formatter(log.created_on, 'time_12_short')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- User/Person -->
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
|
||||
<User size={14} class="opacity-60" />
|
||||
</div>
|
||||
<div class="flex flex-col max-w-[180px]">
|
||||
{#if log.person_full_name || log.person_id_random}
|
||||
<span class="font-bold truncate">{log.person_full_name || 'Person'}</span>
|
||||
<span class="text-[9px] opacity-40 font-mono uppercase">ID: {log.person_id_random || '--'}</span>
|
||||
{:else if log.name}
|
||||
<span class="italic opacity-70">{log.name}</span>
|
||||
{:else}
|
||||
<span class="opacity-30 italic">Unknown</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Action -->
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="badge variant-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
|
||||
{log.action}
|
||||
</span>
|
||||
<span class="text-[10px] opacity-50 font-mono">{log.person_id_random || '--'}</span>
|
||||
{:else if log.name}
|
||||
<span class="italic text-xs opacity-70">{log.name}</span>
|
||||
{:else}
|
||||
<span class="opacity-30">--</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Action -->
|
||||
<td>
|
||||
<span class="badge variant-soft-primary uppercase text-[10px] tracking-wider">
|
||||
{log.action}
|
||||
</span>
|
||||
{#if log.action_with}
|
||||
<span class="text-xs opacity-60 ml-1">via {log.action_with}</span>
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<!-- Context -->
|
||||
<td>
|
||||
{#if log.object_type}
|
||||
<div class="flex flex-col text-xs">
|
||||
<span class="flex items-center gap-1 opacity-70">
|
||||
<Tag size={10} />
|
||||
{log.object_type}
|
||||
</span>
|
||||
{#if log.external_client_id}
|
||||
<span class="text-[10px] opacity-50 font-mono truncate max-w-[100px]">{log.external_client_id}</span>
|
||||
{#if log.action_with}
|
||||
<span class="text-[9px] opacity-40 font-bold uppercase ml-1 flex items-center gap-1">
|
||||
<ShieldCheck size={8} /> via {log.action_with}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<span class="opacity-30">--</span>
|
||||
{/if}
|
||||
</td>
|
||||
</td>
|
||||
|
||||
<!-- Summary/Description -->
|
||||
<td>
|
||||
<div class="flex flex-col gap-1 max-w-md">
|
||||
{#if log.summary}
|
||||
<span class="font-medium text-sm">{log.summary}</span>
|
||||
<!-- Context -->
|
||||
<td>
|
||||
{#if log.object_type}
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg border border-surface-500/10">
|
||||
<Tag size={12} class="text-secondary-500 shrink-0" />
|
||||
<div class="flex flex-col text-[10px] truncate">
|
||||
<span class="font-bold uppercase tracking-tighter">{log.object_type}</span>
|
||||
{#if log.external_client_id}
|
||||
<span class="opacity-40 font-mono truncate">{log.external_client_id}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="opacity-20 italic text-xs">--</span>
|
||||
{/if}
|
||||
{#if log.description}
|
||||
<p class="text-xs opacity-70 line-clamp-2" title={log.description}>{log.description}</p>
|
||||
{/if}
|
||||
{#if !log.summary && !log.description}
|
||||
<span class="italic opacity-30 text-xs">No detail provided</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
|
||||
<!-- Summary/Description -->
|
||||
<td>
|
||||
<div class="flex flex-col gap-1 max-w-sm">
|
||||
{#if log.summary}
|
||||
<span class="font-bold text-primary-500 leading-tight">{log.summary}</span>
|
||||
{/if}
|
||||
{#if log.description}
|
||||
<p class="text-xs opacity-60 line-clamp-2 italic" title={log.description}>{log.description}</p>
|
||||
{/if}
|
||||
{#if !log.summary && !log.description}
|
||||
<span class="italic opacity-20 text-[10px]">No detail record</span>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { List, Globe, Clock, MapPin } from 'lucide-svelte';
|
||||
import { List, Globe, Clock, MapPin, ListFilter, RefreshCcw, Landmark, Info } from 'lucide-svelte';
|
||||
import { api } from '$lib/api/api';
|
||||
|
||||
let loading = $state(true);
|
||||
@@ -15,14 +15,19 @@
|
||||
async function load_lookups() {
|
||||
loading = true;
|
||||
// Using existing generic lookup loaders if available, or raw API calls
|
||||
const [countries, time_zones] = await Promise.all([
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 0 }),
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'time_zone', log_lvl: 0 })
|
||||
]);
|
||||
try {
|
||||
const [countries, time_zones] = await Promise.all([
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 0 }),
|
||||
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'time_zone', log_lvl: 0 })
|
||||
]);
|
||||
|
||||
lookups.countries = countries || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
loading = false;
|
||||
lookups.countries = countries || [];
|
||||
lookups.time_zones = time_zones || [];
|
||||
} catch (error) {
|
||||
console.error('Failed to load lookups:', error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
@@ -35,34 +40,54 @@
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex items-center gap-2">
|
||||
<List size={24} />
|
||||
<h1 class="h2">System Lookups</h1>
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<List size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">System Lookups</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Global Reference Data</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
|
||||
{:else}
|
||||
<RefreshCcw size={16} class="mr-2" /> Refresh Data
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse w-full h-64"></div>
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in">
|
||||
<!-- Countries -->
|
||||
<div class="card p-4 space-y-4">
|
||||
<header class="flex items-center gap-2 border-b border-surface-500/30 pb-2">
|
||||
<Globe size={18} />
|
||||
<h3 class="h4">Countries</h3>
|
||||
</header>
|
||||
<div class="table-container max-h-[400px] overflow-auto">
|
||||
<table class="table table-compact">
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Globe size={20} class="text-secondary-500" />
|
||||
Country Reference
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Name</th>
|
||||
<th>ISO Alpha-2</th>
|
||||
<th class="text-center">ISO Alpha-2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each lookups.countries as c}
|
||||
<tr>
|
||||
<td>{c.name}</td>
|
||||
<td><code class="code">{c.alpha_2_code}</code></td>
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{c.name}</td>
|
||||
<td class="text-center"><span class="badge variant-soft-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -71,24 +96,26 @@
|
||||
</div>
|
||||
|
||||
<!-- Time Zones -->
|
||||
<div class="card p-4 space-y-4">
|
||||
<header class="flex items-center gap-2 border-b border-surface-500/30 pb-2">
|
||||
<Clock size={18} />
|
||||
<h3 class="h4">Time Zones</h3>
|
||||
</header>
|
||||
<div class="table-container max-h-[400px] overflow-auto">
|
||||
<table class="table table-compact">
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Clock size={20} class="text-tertiary-500" />
|
||||
Time Zone Reference
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
<table class="table table-hover table-compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Zone Name</th>
|
||||
<th>Offset</th>
|
||||
<th class="text-right">Offset (Hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each lookups.time_zones as tz}
|
||||
<tr>
|
||||
<td>{tz.name}</td>
|
||||
<td>{tz.offset_seconds / 3600}h</td>
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{tz.name}</td>
|
||||
<td class="text-right"><span class="badge variant-soft-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -96,5 +123,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 variant-soft-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<Info size={16} class="text-primary-500" />
|
||||
<p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -3,12 +3,22 @@
|
||||
import { load_ae_obj_li__site, create_ae_obj__site } from '$lib/ae_core/ae_core__site';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Plus, Search, Globe } from 'lucide-svelte';
|
||||
import { Plus, Search, Globe, ListFilter, RefreshCcw, X, ExternalLink, Calendar, ShieldCheck } from 'lucide-svelte';
|
||||
|
||||
let site_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? site_li.filter(s =>
|
||||
s.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
s.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: site_li
|
||||
);
|
||||
|
||||
async function load_sites() {
|
||||
if (!$ae_loc.account_id) return;
|
||||
@@ -50,84 +60,125 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-4">
|
||||
<header class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<Globe size={24} />
|
||||
<h1 class="h2">Site Management</h1>
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Globe size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Site Management</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Digital Properties & Domains</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn variant-filled-primary" onclick={handle_add_site}>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
|
||||
<Plus size={16} class="mr-2" /> Add Site
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
|
||||
<label class="label">
|
||||
<span>Enabled Status</span>
|
||||
<select class="select" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<option value="all">All</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Hidden Status</span>
|
||||
<select class="select" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<option value="all">All</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="btn variant-filled-secondary" onclick={load_sites} disabled={loading}>
|
||||
<Search size={16} class="mr-2" /> Refresh
|
||||
</button>
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</label>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_sites} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex justify-center p-12">
|
||||
<div class="placeholder animate-pulse w-full h-32"></div>
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if site_li.length === 0}
|
||||
<div class="card p-8 text-center">
|
||||
<p>No sites found for this account matching your filters.</p>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Globe size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Sites Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Sites for this account will appear here. Add your first site to get started.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Code</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each site_li as site}
|
||||
<tr>
|
||||
<td>{site.name}</td>
|
||||
<td><code class="code">{site.code || '--'}</code></td>
|
||||
<td>{new Date(site.created_on).toLocaleDateString()}</td>
|
||||
<td>
|
||||
{#if site.enable}
|
||||
<span class="badge variant-filled-success">Enabled</span>
|
||||
{:else}
|
||||
<span class="badge variant-filled-error">Disabled</span>
|
||||
{/if}
|
||||
{#if site.hide}
|
||||
<span class="badge variant-filled-warning">Hidden</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm variant-soft-primary" href="/core/sites/{site.site_id_random}">
|
||||
Manage
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Linked Properties
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as site}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4 flex gap-1">
|
||||
{#if site.hide}
|
||||
<span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {site.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{site.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Globe size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
<p class="font-black tracking-tight truncate">{site.name}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {site.code || '--'}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2 text-xs opacity-70">
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Calendar size={14} class="text-primary-500 shrink-0" />
|
||||
<span>Created: {new Date(site.created_on).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate">{site.site_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
|
||||
Manage Site
|
||||
</a>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user