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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user