Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): standardized form inputs and buttons across core modules

Browse Source 
- Updated Person, Address, Contact forms with consistent Skeleton UI styling.
- Standardized Account, Site, and User detail pages.
- Modernized People, Address, and Contact list pages with improved headers and action buttons.
- Applied 'variant-filled-surface' and 'rounded-lg' patterns from Journals module for UI consistency.
This commit is contained in:
Scott Idem
2026-01-15 17:40:46 -05:00
parent 96adf1fa26
commit 572ce1841b
10 changed files with 593 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/routes/core/accounts/[account_id]/+page.svelte
View File

@@ -70,79 +70,100 @@
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft" href="/core/accounts">
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/accounts">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-2">
<Building size={24} />
<h1 class="h2">{account?.name ?? 'Loading Account...'}</h1>
<div class="p-2 bg-primary-500/10 rounded-lg">
<Building size={24} class="text-primary-500" />
</div>
<h1 class="h2 font-black tracking-tight">{account?.name ?? 'Loading...'}</h1>
</div>
</div>
<div class="flex gap-2">
<button class="btn variant-filled-error" onclick={handle_delete} disabled={loading || saving}>
<button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
<Trash2 size={16} class="mr-2" /> Disable
</button>
<button class="btn variant-filled-primary" onclick={handle_save} disabled={loading || saving}>
<Save size={16} class="mr-2" /> Save Changes
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
{#if saving}
<span class="animate-spin mr-2">⏳</span>
{:else}
<Save size={16} class="mr-2" />
{/if}
Save Changes
</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 if account}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Basic Information</h3>
<label class="label">
<span>Account Name</span>
<input class="input" type="text" bind:value={account.name} />
</label>
<label class="label">
<span>Short Name</span>
<input class="input" type="text" bind:value={account.short_name} />
</label>
<label class="label">
<span>Account Code</span>
<input class="input" type="text" bind:value={account.code} />
</label>
<label class="label">
<span>Description</span>
<textarea class="textarea" rows="3" bind:value={account.description}></textarea>
</label>
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<span class="text-primary-500">◆</span> Basic Information
</h3>
<div class="space-y-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Account Name</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.name} />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Short Name</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.short_name} />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Account Code</label>
<input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={account.code} />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Description</label>
<textarea class="textarea variant-filled-surface rounded-lg" rows="3" bind:value={account.description}></textarea>
</div>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Settings & Status</h3>
<div class="flex flex-col gap-4">
<label class="flex items-center space-x-2">
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<span class="text-secondary-500">◆</span> Settings & Status
</h3>
<div class="flex flex-col gap-4 py-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={account.enable} />
<p>Enabled</p>
<span class="text-sm font-medium">Enabled</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={account.hide} />
<p>Hidden</p>
<span class="text-sm font-medium">Hidden</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={account.priority} />
<p>Priority Account</p>
<span class="text-sm font-medium">Priority Account</span>
</label>
</div>
<label class="label">
<span>Group</span>
<input class="input" type="text" bind:value={account.group} />
</label>
<label class="label">
<span>Sort Order</span>
<input class="input" type="number" bind:value={account.sort} />
</label>
<div class="space-y-4 border-t border-surface-500/30 pt-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Group</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.group} />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Sort Order</label>
<input class="input variant-filled-surface rounded-lg" type="number" bind:value={account.sort} />
</div>
</div>
</div>
<div class="card p-4 space-y-4 md:col-span-2">
<h3 class="h4 border-b border-surface-500/30 pb-2">Internal Notes</h3>
<textarea class="textarea" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
<div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<span class="text-tertiary-500">◆</span> Internal Notes
</h3>
<div class="space-y-1">
<textarea class="textarea variant-filled-surface rounded-lg" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
</div>
</div>
</div>
{/if}

95
src/routes/core/addresses/+page.svelte
View File

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { MapPin, Plus, Search, ExternalLink, X } from 'lucide-svelte';
import { MapPin, Plus, Search, ExternalLink, X, ListFilter, MapPinned } from 'lucide-svelte';
import { load_ae_obj_li__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
import Address_form from './ae_comp__address_form.svelte';
@@ -33,12 +33,17 @@
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-2">
<MapPin size={24} />
<h1 class="h2">Address Management</h1>
<div class="p-2 bg-primary-500/10 rounded-lg">
<MapPin size={24} class="text-primary-500" />
</div>
<h1 class="h2 font-black tracking-tight">Address Management</h1>
</div>
<button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
<button
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
onclick={() => show_add_form = !show_add_form}
>
{#if show_add_form}
<X size={16} class="mr-2" /> Cancel
{:else}
@@ -48,7 +53,7 @@
</header>
{#if show_add_form}
<div class="mb-8">
<div class="animate-fade-in">
<Address_form
onSave={(new_addr) => {
show_add_form = false;
@@ -63,43 +68,55 @@
{/if}
{#if loading}
<div class="placeholder animate-pulse h-64 w-full"></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 address_li.length === 0}
<div class="card p-8 text-center variant-soft">
<p class="opacity-60">No addresses found for this account.</p>
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
<MapPinned size={48} class="mx-auto mb-4 opacity-20" />
<h3 class="h3 font-bold opacity-50">No Addresses Found</h3>
<p class="opacity-60 max-w-xs mx-auto mt-2">Addresses associated with this account will appear here.</p>
</div>
{:else}
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<th>City</th>
<th>State/Province</th>
<th>Country</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#each address_li as addr}
<tr>
<td>{addr.city || '--'}</td>
<td>{addr.state_province || '--'}</td>
<td>{addr.country || '--'}</td>
<td>
<span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'}">
{addr.enable ? 'Enabled' : 'Disabled'}
</span>
</td>
<td class="text-right">
<a class="btn btn-sm variant-soft-primary" href="/core/addresses/{addr.address_id_random}">
Manage <ExternalLink size={12} class="ml-2" />
</a>
</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-4 flex items-center gap-2">
<ListFilter size={18} class="text-secondary-500" />
Linked Addresses
<span class="badge variant-soft-secondary ml-auto">{address_li.length} entries</span>
</h3>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr class="uppercase text-[10px] tracking-widest opacity-60">
<th>City</th>
<th>State/Province</th>
<th>Country</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each address_li as addr}
<tr class="transition-colors">
<td class="font-bold">{addr.city || '--'}</td>
<td>{addr.state_province || '--'}</td>
<td><span class="badge variant-soft-surface font-mono">{addr.country || '--'}</span></td>
<td>
<span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
{addr.enable ? 'Active' : 'Disabled'}
</span>
</td>
<td class="text-right">
<a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/addresses/{addr.address_id_random}">
Manage <ExternalLink size={12} class="ml-2 opacity-50" />
</a>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
{/if}
</div>

138
src/routes/core/addresses/ae_comp__address_form.svelte
View File

@@ -100,11 +100,11 @@
</h3>
<div class="flex gap-2">
{#if onCancel}
<button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
<X size={16} class="mr-1" /> Cancel
</button>
{/if}
<button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{:else}
@@ -128,30 +128,30 @@
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Location Details</legend>
<label class="label">
<span>Attention To / Name</span>
<input class="input" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Attention To / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
</div>
<label class="label">
<span>Organization Name</span>
<input class="input" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Organization Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
</div>
<label class="label">
<span>Address Line 1</span>
<input class="input" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Address Line 1</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
</div>
<div class="grid grid-cols-2 gap-2">
<label class="label">
<span>Line 2</span>
<input class="input" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
</label>
<label class="label">
<span>Line 3</span>
<input class="input" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Line 2</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Line 3</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
</div>
</div>
</fieldset>
@@ -160,64 +160,58 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Region & Code</legend>
<div class="grid grid-cols-2 gap-2">
<label class="label">
<span>City</span>
<input class="input" type="text" bind:value={formData.city} required placeholder="Metropolis" />
</label>
<label class="label">
<span>State / Province</span>
<input class="input" type="text" bind:value={formData.state_province} placeholder="NY" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">City</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.city} required placeholder="Metropolis" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">State / Province</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.state_province} placeholder="NY" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<label class="label">
<span>Postal Code</span>
<input class="input" type="text" bind:value={formData.postal_code} placeholder="12345" />
</label>
<label class="label">
<span>Country (Code)</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Postal Code</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.postal_code} placeholder="12345" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Country (Code)</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Globe size={16} /></div>
<input type="text" bind:value={formData.country} placeholder="USA" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.country} placeholder="USA" />
</div>
</label>
</div>
</div>
<!-- DO NOT USE - Scott 2026-01-09 -->
<!-- <label class="label">
<span>Country Name</span>
<input class="input" type="text" bind:value={formData.country_name} placeholder="United States" />
</label> -->
</fieldset>
<!-- Technical Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Technical & GIS</legend>
<label class="label">
<span>Timezone</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Timezone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Clock size={16} /></div>
<input type="text" bind:value={formData.timezone} placeholder="America/New_York" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
</div>
</label>
</div>
<div class="grid grid-cols-2 gap-2">
<label class="label">
<span>Latitude</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Latitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input type="text" bind:value={formData.latitude} placeholder="40.7128" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.latitude} placeholder="40.7128" />
</div>
</label>
<label class="label">
<span>Longitude</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Longitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input type="text" bind:value={formData.longitude} placeholder="-74.0060" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
</div>
</label>
</div>
</div>
</fieldset>
@@ -226,33 +220,33 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
<div class="flex flex-wrap gap-4 pt-2">
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
<span>Enabled</span>
<span class="text-sm font-medium">Enabled</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
<span>Hidden</span>
<span class="text-sm font-medium">Hidden</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
<span>Priority</span>
<span class="text-sm font-medium">Priority</span>
</label>
</div>
<label class="label">
<span>Internal Notes</span>
<textarea class="textarea" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
</div>
</fieldset>
</div>
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
<button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
<button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{/if}
{address ? 'Update Address' : 'Create Address'}
{address ? 'Update Address Record' : 'Create Address Record'}
</button>
</footer>
</form>

123
src/routes/core/contacts/+page.svelte
View File

@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Phone, Plus, Search, Mail, User, ExternalLink, X } from 'lucide-svelte';
import { Phone, Plus, Search, Mail, User, ExternalLink, X, ListFilter, Contact } from 'lucide-svelte';
import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
import Contact_form from './ae_comp__contact_form.svelte';
@@ -33,12 +33,17 @@
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-2">
<Phone size={24} />
<h1 class="h2">Contact Management</h1>
<div class="p-2 bg-primary-500/10 rounded-lg">
<Phone size={24} class="text-primary-500" />
</div>
<h1 class="h2 font-black tracking-tight">Contact Management</h1>
</div>
<button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
<button
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
onclick={() => show_add_form = !show_add_form}
>
{#if show_add_form}
<X size={16} class="mr-2" /> Cancel
{:else}
@@ -48,7 +53,7 @@
</header>
{#if show_add_form}
<div class="mb-8">
<div class="animate-fade-in">
<Contact_form
onSave={(new_con) => {
show_add_form = false;
@@ -63,53 +68,73 @@
{/if}
{#if loading}
<div class="placeholder animate-pulse h-64 w-full"></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 contact_li.length === 0}
<div class="card p-8 text-center variant-soft">
<p class="opacity-60">No contacts found for this account.</p>
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
<Contact size={48} class="mx-auto mb-4 opacity-20" />
<h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
<p class="opacity-60 max-w-xs mx-auto mt-2">Business and support contacts will appear here.</p>
</div>
{:else}
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#each contact_li as con}
<tr>
<td>
<div class="flex items-center gap-2">
<User size={14} class="opacity-60" />
{con.name || '--'}
</div>
</td>
<td>
<div class="flex items-center gap-2">
<Mail size={14} class="opacity-60" />
{con.email || '--'}
</div>
</td>
<td>{con.phone || '--'}</td>
<td>
<span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'}">
{con.enable ? 'Enabled' : 'Disabled'}
</span>
</td>
<td class="text-right">
<a class="btn btn-sm variant-soft-primary" href="/core/contacts/{con.contact_id_random}">
Manage <ExternalLink size={12} class="ml-2" />
</a>
</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-4 flex items-center gap-2">
<ListFilter size={18} class="text-secondary-500" />
Directory Results
<span class="badge variant-soft-secondary ml-auto">{contact_li.length} entries</span>
</h3>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr class="uppercase text-[10px] tracking-widest opacity-60">
<th>Name / Title</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each contact_li as con}
<tr class="transition-colors">
<td class="font-bold">
<div class="flex items-center gap-2">
<div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full">
<User size={14} class="opacity-60" />
</div>
{con.title || con.name || '--'}
</div>
</td>
<td>
{#if con.email}
<div class="flex items-center gap-2">
<Mail size={14} class="opacity-40" />
<span class="text-sm">{con.email}</span>
</div>
{:else}
<span class="opacity-20 text-xs italic">No Email</span>
{/if}
</td>
<td>
<span class="font-mono text-sm opacity-80">{con.phone_office || con.phone_mobile || '--'}</span>
</td>
<td>
<span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
{con.enable ? 'Active' : 'Disabled'}
</span>
</td>
<td class="text-right">
<a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/contacts/{con.contact_id_random}">
Manage <ExternalLink size={12} class="ml-2 opacity-50" />
</a>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
{/if}
</div>

114
src/routes/core/contacts/ae_comp__contact_form.svelte
View File

@@ -96,11 +96,11 @@
</h3>
<div class="flex gap-2">
{#if onCancel}
<button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
<X size={16} class="mr-1" /> Cancel
</button>
{/if}
<button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{:else}
@@ -124,23 +124,23 @@
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
<label class="label">
<span>Title / Name</span>
<input class="input" type="text" bind:value={formData.title} required placeholder="Business Office" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Title / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.title} required placeholder="Business Office" />
</div>
<label class="label">
<span>Tagline</span>
<input class="input" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Tagline</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
</div>
<label class="label">
<span>Email Address</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Email Address</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Mail size={16} /></div>
<input type="email" bind:value={formData.email} placeholder="contact@example.com" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.email} placeholder="contact@example.com" />
</div>
</label>
</div>
</fieldset>
<!-- Communication Section -->
@@ -148,58 +148,58 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
<div class="grid grid-cols-2 gap-2">
<label class="label">
<span>Mobile Phone</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Mobile Phone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Phone size={16} /></div>
<input type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
</div>
</label>
<label class="label">
<span>Office Phone</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Office Phone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Phone size={16} /></div>
<input type="tel" bind:value={formData.phone_office} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
</div>
</label>
</div>
</div>
<label class="label">
<span>Website URL</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Website URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Globe size={16} /></div>
<input type="url" bind:value={formData.website_url} placeholder="https://..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.website_url} placeholder="https://..." />
</div>
</label>
</div>
</fieldset>
<!-- Social Media Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
<label class="label">
<span>LinkedIn URL</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">LinkedIn URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Linkedin size={16} /></div>
<input type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
</div>
</label>
</div>
<div class="grid grid-cols-2 gap-2">
<label class="label">
<span>Facebook URL</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Facebook URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Facebook size={16} /></div>
<input type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
</div>
</label>
<label class="label">
<span>Instagram URL</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Instagram URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Instagram size={16} /></div>
<input type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
</div>
</label>
</div>
</div>
</fieldset>
@@ -208,33 +208,33 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
<div class="flex flex-wrap gap-4 pt-2">
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
<span>Enabled</span>
<span class="text-sm font-medium">Enabled</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
<span>Hidden</span>
<span class="text-sm font-medium">Hidden</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
<span>Priority</span>
<span class="text-sm font-medium">Priority</span>
</label>
</div>
<label class="label">
<span>Internal Notes</span>
<textarea class="textarea" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
</div>
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
<button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
<button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{/if}
{contact ? 'Update Contact' : 'Create Contact'}
{contact ? 'Update Contact Record' : 'Create Contact Record'}
</button>
</footer>
</form>

32
src/routes/core/people/+page.svelte
View File

@@ -4,7 +4,7 @@
import { X } from 'lucide-svelte';
import { ae_loc, ae_sess, slct, ae_api } from '$lib/stores/ae_stores';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { Users, Plus } from 'lucide-svelte';
import { Users, Plus, ListFilter } from 'lucide-svelte';
import Comp_person_search from './ae_comp__person_search.svelte';
import Comp_person_obj_tbl from '../ae_comp__person_obj_tbl.svelte';
import Person_form from './ae_comp__person_form.svelte';
@@ -21,15 +21,17 @@
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-2">
<Users size={24} />
<h1 class="h2">People Management</h1>
<div class="p-2 bg-primary-500/10 rounded-lg">
<Users size={24} class="text-primary-500" />
</div>
<h1 class="h2 font-black tracking-tight">People Management</h1>
</div>
<button
type="button"
onclick={() => show_add_form = !show_add_form}
class="btn variant-filled-primary"
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
class:hidden={!$ae_loc.edit_mode}
>
{#if show_add_form}
@@ -41,7 +43,7 @@
</header>
{#if show_add_form}
<div class="mb-8">
<div class="animate-fade-in">
<Person_form
onSave={(new_person) => {
show_add_form = false;
@@ -58,12 +60,18 @@
}} />
{#if $ae_sess.person.show_report__person_li}
<div class="card p-4 variant-soft space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Results ({person_id_random_li.length})</h3>
<Comp_person_obj_tbl
bind:person_id_random_li
show_user_fields={$ae_loc.administrator_access}
></Comp_person_obj_tbl>
<div class="card p-6 variant-glass-surface shadow-xl space-y-4 border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<ListFilter size={18} class="text-secondary-500" />
Search Results
<span class="badge variant-soft-secondary ml-auto">{person_id_random_li.length} found</span>
</h3>
<div class="overflow-x-auto">
<Comp_person_obj_tbl
bind:person_id_random_li
show_user_fields={$ae_loc.administrator_access}
></Comp_person_obj_tbl>
</div>
</div>
{/if}
</div>

132
src/routes/core/people/ae_comp__person_form.svelte
View File

@@ -118,11 +118,11 @@
</h3>
<div class="flex gap-2">
{#if onCancel}
<button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
<X size={16} class="mr-1" /> Cancel
</button>
{/if}
<button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{:else}
@@ -147,85 +147,85 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity</legend>
<div class="grid grid-cols-4 gap-2">
<label class="label col-span-1">
<span>Prefix</span>
<input class="input placeholder-surface-400" type="text" bind:value={formData.prefix} placeholder="Mr." />
</label>
<label class="label col-span-3">
<span>Given Name</span>
<input class="input placeholder-surface-400" type="text" bind:value={formData.given_name} required placeholder="Jane" />
</label>
<div class="space-y-1 col-span-1">
<label class="label text-xs font-bold opacity-75">Prefix</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.prefix} placeholder="Mr." />
</div>
<div class="space-y-1 col-span-3">
<label class="label text-xs font-bold opacity-75">Given Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.given_name} required placeholder="Jane" />
</div>
</div>
<div class="grid grid-cols-4 gap-2">
<label class="label col-span-3">
<span>Family Name</span>
<input class="input placeholder-surface-400" type="text" bind:value={formData.family_name} required placeholder="Doe" />
</label>
<label class="label col-span-1">
<span>Suffix</span>
<input class="input placeholder-surface-400" type="text" bind:value={formData.suffix} placeholder="PhD" />
</label>
<div class="space-y-1 col-span-3">
<label class="label text-xs font-bold opacity-75">Family Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.family_name} required placeholder="Doe" />
</div>
<div class="space-y-1 col-span-1">
<label class="label text-xs font-bold opacity-75">Suffix</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.suffix} placeholder="PhD" />
</div>
</div>
<label class="label">
<span>Middle Name / Informal Name (Nickname)</span>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Middle Name / Informal Name (Nickname)</label>
<div class="grid grid-cols-2 gap-2">
<input class="input placeholder-surface-400" type="text" bind:value={formData.middle_name} placeholder="Middle" />
<input class="input placeholder-surface-400" type="text" bind:value={formData.nickname} placeholder="Nickname" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.middle_name} placeholder="Middle" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.nickname} placeholder="Nickname" />
</div>
</label>
</div>
</fieldset>
<!-- Contact Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Contact Information</legend>
<label class="label">
<span>Primary Email</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Primary Email</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Mail size={16} /></div>
<input class="input placeholder-surface-400" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
</div>
</label>
</div>
<label class="label">
<span>Phone Number</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Phone Number</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Phone size={16} /></div>
<input class="input placeholder-surface-400" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
</div>
<small class="opacity-60 text-xs">(Saved only locally until Contact created)</small>
</label>
<small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
</div>
<label class="label">
<span>Tagline</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Tagline</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Tag size={16} /></div>
<input class="input placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
</div>
</label>
</div>
</fieldset>
<!-- Professional Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Professional</legend>
<label class="label">
<span>Professional Title</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Professional Title</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Briefcase size={16} /></div>
<input class="input placeholder-surface-400" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
</div>
</label>
</div>
<label class="label">
<span>Affiliations</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Affiliations</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Building size={16} /></div>
<input class="input placeholder-surface-400" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
</div>
</label>
</div>
</fieldset>
<!-- Metadata Section -->
@@ -233,24 +233,24 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status & Flags</legend>
<div class="flex flex-wrap gap-4 pt-2">
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
<span>Enabled</span>
<span class="text-sm font-medium">Enabled</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
<span>Hidden</span>
<span class="text-sm font-medium">Hidden</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
<span>Priority</span>
<span class="text-sm font-medium">Priority</span>
</label>
</div>
<label class="label">
<span>Notes (Internal)</span>
<textarea class="textarea placeholder-surface-400" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Notes (Internal)</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
{#if $ae_loc.manager_access}
@@ -258,25 +258,25 @@
<fieldset class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">System Linking (Managers Only)</legend>
<label class="label max-w-md">
<span>Linked User ID (Random)</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
<div class="space-y-1 max-w-md">
<label class="label text-xs font-bold opacity-75">Linked User ID (Random)</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Link size={16} /></div>
<input
class="input font-mono placeholder-surface-400"
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400"
type="text"
bind:value={formData.user_id_random}
placeholder="e.g. AB12CD34"
/>
</div>
<small class="opacity-60 text-xs">Enter the unique random ID of the user account to link to this person.</small>
</label>
<small class="opacity-60 text-[10px] uppercase px-1 tracking-tighter">Enter the unique random ID of the user account to link to this person.</small>
</div>
</fieldset>
{/if}
</div>
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
<button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
<button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
{#if is_loading}
<span class="animate-spin mr-2">⏳</span>
{/if}

61
src/routes/core/people/ae_comp__person_search.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { Search, Plus, Filter, User } from 'lucide-svelte';
import { Search, Plus, Filter, User, SearchCode } from 'lucide-svelte';
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
import { load_ae_obj_li__person } from '$lib/ae_core/ae_core__person';
@@ -42,40 +42,47 @@
}
</script>
<div class="card p-4 variant-soft-surface space-y-4">
<div class="flex flex-wrap gap-4 items-end">
<label class="label flex-1 min-w-[200px]">
<span>Search People</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
<div class="input-group-shim"><Search size={16} /></div>
<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 People</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
<div class="input-group-shim"><Search size={18} class="opacity-50" /></div>
<input
class="bg-transparent border-0 ring-0 focus:ring-0"
type="search"
bind:value={qry_str}
placeholder="Name, email, or ID..."
placeholder="Search by name, email, or ID..."
onkeydown={(e) => e.key === 'Enter' && handle_search()}
/>
<button class="variant-filled-primary" onclick={handle_search} disabled={loading}>
{loading ? '...' : 'Search'}
<button class="variant-filled-primary font-bold px-6 hover:brightness-110 transition-all" onclick={handle_search} disabled={loading}>
{#if loading}
<span class="animate-spin mr-1">⏳</span>
{:else}
Go
{/if}
</button>
</div>
</label>
</div>
<label class="label">
<span>Enabled</span>
<select class="select w-32" bind:value={qry_enabled} onchange={handle_search}>
<option value="all">All</option>
<option value="enabled">Enabled</option>
<option value="not_enabled">Disabled</option>
</select>
</label>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</label>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_enabled} onchange={handle_search}>
<option value="all">All Records</option>
<option value="enabled">Enabled Only</option>
<option value="not_enabled">Disabled Only</option>
</select>
</div>
<label class="label">
<span>Hidden</span>
<select class="select w-32" bind:value={qry_hidden} onchange={handle_search}>
<option value="all">All</option>
<option value="not_hidden">Visible</option>
<option value="hidden">Hidden</option>
</select>
</label>
<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" bind:value={qry_hidden} onchange={handle_search}>
<option value="all">All Visible</option>
<option value="not_hidden">Publicly Visible</option>
<option value="hidden">System Hidden</option>
</select>
</div>
</div>
</div>
</div>

119
src/routes/core/sites/[site_id]/+page.svelte
View File

@@ -14,7 +14,7 @@
import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink } from 'lucide-svelte';
import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink, Key, Settings, Activity } from 'lucide-svelte';
let site_id = $page.params.site_id;
let site: any = $state(null);
@@ -103,61 +103,74 @@
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft" href="/core/sites">
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/sites">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-2">
<Globe size={24} />
<h1 class="h2">{site?.name ?? 'Loading Site...'}</h1>
<div class="p-2 bg-primary-500/10 rounded-lg">
<Globe size={24} class="text-primary-500" />
</div>
<h1 class="h2 font-black tracking-tight">{site?.name ?? 'Loading...'}</h1>
</div>
</div>
<button class="btn variant-filled-primary" onclick={handle_save_site} disabled={loading || saving}>
<Save size={16} class="mr-2" /> Save Site Changes
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
{#if saving}
<span class="animate-spin mr-2">⏳</span>
{:else}
<Save size={16} class="mr-2" />
{/if}
Save Site Changes
</button>
</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 if site}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Site Config -->
<div class="lg:col-span-2 space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Site Configuration</h3>
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Settings size={18} class="text-primary-500" /> Site Configuration
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label">
<span>Site Name</span>
<input class="input" type="text" bind:value={site.name} />
</label>
<label class="label">
<span>Site Code</span>
<input class="input" type="text" bind:value={site.code} />
</label>
<label class="label md:col-span-2">
<span>Tagline</span>
<input class="input" type="text" bind:value={site.tagline} />
</label>
<label class="label md:col-span-2">
<span>Description</span>
<textarea class="textarea" rows="2" bind:value={site.description}></textarea>
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Site Name</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.name} />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Site Code</label>
<input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.code} />
</div>
<div class="space-y-1 md:col-span-2">
<label class="label text-xs font-bold opacity-75">Tagline</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.tagline} />
</div>
<div class="space-y-1 md:col-span-2">
<label class="label text-xs font-bold opacity-75">Description</label>
<textarea class="textarea variant-filled-surface rounded-lg" rows="2" bind:value={site.description}></textarea>
</div>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Access Control</h3>
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Key size={18} class="text-secondary-500" /> Access Control
</h3>
<div class="flex flex-col gap-4">
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
<p>Restrict Access</p>
<span class="text-sm font-medium">Restrict Access</span>
</label>
{#if site.restrict_access}
<label class="label">
<span>Access Key</span>
<input class="input" type="text" bind:value={site.access_key} />
</label>
<div class="space-y-1 max-w-md animate-fade-in">
<label class="label text-xs font-bold opacity-75">Access Key</label>
<input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.access_key} />
</div>
{/if}
</div>
</div>
@@ -165,29 +178,31 @@
<!-- Domains Management -->
<div class="space-y-6">
<div class="card p-4 space-y-4">
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
<h3 class="h4">Site Domains</h3>
<button class="btn btn-sm variant-filled-secondary" onclick={handle_add_domain}>
<h3 class="h4 font-bold flex items-center gap-2">
<Globe size={18} class="text-tertiary-500" /> Site Domains
</h3>
<button class="btn btn-icon btn-sm variant-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
<Plus size={14} />
</button>
</header>
{#if domain_li.length === 0}
<p class="text-sm opacity-60 text-center py-4">No domains configured.</p>
<p class="text-sm opacity-60 text-center py-8 bg-surface-500/5 rounded-lg border-2 border-dashed border-surface-500/20">No domains configured.</p>
{:else}
<div class="space-y-2">
<div class="space-y-3">
{#each domain_li as dom}
<div class="card p-3 variant-soft flex justify-between items-center">
<div class="card p-3 variant-soft shadow-sm border border-surface-500/10 flex justify-between items-center group">
<div class="flex flex-col">
<span class="font-medium flex items-center gap-1">
<span class="font-bold text-sm flex items-center gap-1">
{dom.fqdn}
<a href="https://{dom.fqdn}" target="_blank" class="opacity-50 hover:opacity-100">
<a href="https://{dom.fqdn}" target="_blank" class="opacity-30 group-hover:opacity-100 transition-opacity">
<ExternalLink size={12} />
</a>
</span>
<span class="text-xs opacity-60">
Key: <code class="code text-[10px]">{dom.access_key || '--'}</code> | {dom.enable ? 'Active' : 'Disabled'}
<span class="text-[10px] uppercase font-bold tracking-tighter opacity-50">
Key: <code class="text-primary-500">{dom.access_key || '--'}</code> &bull; {dom.enable ? 'Active' : 'Disabled'}
</span>
</div>
<div class="flex gap-1">
@@ -204,16 +219,18 @@
{/if}
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">System Status</h3>
<div class="space-y-4">
<label class="flex items-center space-x-2">
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Activity size={18} class="text-error-500" /> System Status
</h3>
<div class="space-y-4 py-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={site.enable} />
<p>Site Enabled</p>
<span class="text-sm font-medium">Site Enabled</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={site.hide} />
<p>Hidden</p>
<span class="text-sm font-medium">Hidden from Public</span>
</label>
</div>
</div>

153
src/routes/core/users/[user_id]/+page.svelte
View File

@@ -15,7 +15,10 @@
Clock,
Key,
CheckCircle2,
XCircle
XCircle,
Fingerprint,
Activity,
Settings
} from 'lucide-svelte';
interface Props {
@@ -71,27 +74,32 @@
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
<div class="flex items-center gap-4">
<a class="btn btn-sm variant-soft" href="/core/users">
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/users">
<ArrowLeft size={16} />
</a>
<div class="flex items-center gap-3">
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
<UserIcon size={24} />
</div>
<div>
<h1 class="h2">{user.username}</h1>
<p class="text-sm opacity-60">ID: {user.user_id_random}</p>
<h1 class="h2 font-black tracking-tight">{user.username}</h1>
<p class="text-[10px] uppercase font-bold tracking-widest opacity-50">UID: {user.user_id_random}</p>
</div>
</div>
</div>
<div class="flex gap-2">
<button class="btn variant-filled-error" onclick={handle_delete} disabled={saving}>
<button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
<Trash2 size={16} class="mr-2" /> Disable
</button>
<button class="btn variant-filled-primary" onclick={handle_save} disabled={saving}>
<Save size={16} class="mr-2" /> Save Changes
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
{#if saving}
<span class="animate-spin mr-2">⏳</span>
{:else}
<Save size={16} class="mr-2" />
{/if}
Save Changes
</button>
</div>
</header>
@@ -99,58 +107,61 @@
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Info -->
<div class="lg:col-span-2 space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
<UserIcon size={18} /> Basic Profile
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<UserIcon size={18} class="text-primary-500" /> Basic Profile
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label">
<span>Display Name</span>
<input class="input" type="text" bind:value={user.name} placeholder="Full Name" />
</label>
<label class="label">
<span>Email Address</span>
<input class="input" type="email" bind:value={user.email} />
</label>
<label class="label md:col-span-2">
<span>Username</span>
<input class="input font-mono variant-soft" type="text" bind:value={user.username} disabled />
<p class="text-xs opacity-60 mt-1 italic">Username changes are currently restricted.</p>
</label>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Display Name</label>
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={user.name} placeholder="Full Name" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Email Address</label>
<input class="input variant-filled-surface rounded-lg" type="email" bind:value={user.email} />
</div>
<div class="space-y-1 md:col-span-2">
<label class="label text-xs font-bold opacity-75">Username</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-lg overflow-hidden border border-surface-500/20">
<div class="input-group-shim"><Fingerprint size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60" type="text" bind:value={user.username} disabled />
</div>
<p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
</div>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
<ShieldCheck size={18} /> System Permissions
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<ShieldCheck size={18} class="text-secondary-500" /> System Permissions
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
<label class="flex items-center space-x-3 card p-3 variant-soft-error cursor-pointer">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label class="flex items-center space-x-3 card p-4 variant-soft-error cursor-pointer border border-error-500/20 hover:variant-filled-error transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.super} />
<div class="flex flex-col">
<span class="font-bold">Super User</span>
<span class="text-xs opacity-70">Full system access</span>
<span class="font-black uppercase text-xs tracking-widest">Super User</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
</div>
</label>
<label class="flex items-center space-x-3 card p-3 variant-soft-warning cursor-pointer">
<label class="flex items-center space-x-3 card p-4 variant-soft-warning cursor-pointer border border-warning-500/20 hover:variant-filled-warning transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.manager} />
<div class="flex flex-col">
<span class="font-bold">Manager</span>
<span class="text-xs opacity-70">Global account & user mgmt</span>
<span class="font-black uppercase text-xs tracking-widest">Manager</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
</div>
</label>
<label class="flex items-center space-x-3 card p-3 variant-soft-primary cursor-pointer">
<label class="flex items-center space-x-3 card p-4 variant-soft-primary cursor-pointer border border-primary-500/20 hover:variant-filled-primary transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.administrator} />
<div class="flex flex-col">
<span class="font-bold">Administrator</span>
<span class="text-xs opacity-70">Account-level admin access</span>
<span class="font-black uppercase text-xs tracking-widest">Administrator</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
</div>
</label>
<label class="flex items-center space-x-3 card p-3 variant-soft-secondary cursor-pointer">
<label class="flex items-center space-x-3 card p-4 variant-soft-secondary cursor-pointer border border-secondary-500/20 hover:variant-filled-secondary transition-all group">
<input class="checkbox" type="checkbox" bind:checked={user.verified} />
<div class="flex flex-col">
<span class="font-bold">Verified User</span>
<span class="text-xs opacity-70">Identity confirmed</span>
<span class="font-black uppercase text-xs tracking-widest">Verified User</span>
<span class="text-[10px] opacity-70 group-hover:opacity-100">Identity confirmed by staff</span>
</div>
</label>
</div>
@@ -159,36 +170,36 @@
<!-- Sidebar / Meta -->
<div class="space-y-6">
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Clock size={18} /> Account Status
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Activity size={18} class="text-tertiary-500" /> Account Status
</h3>
<div class="space-y-4">
<label class="flex items-center space-x-2">
<div class="space-y-4 py-2">
<label class="flex items-center space-x-3 cursor-pointer group">
<input class="checkbox" type="checkbox" bind:checked={user.enable} />
<p>Login Enabled</p>
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Login Enabled</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-3 cursor-pointer group">
<input class="checkbox" type="checkbox" bind:checked={user.hide} />
<p>Hidden from Lists</p>
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Lists</span>
</label>
<label class="flex items-center space-x-2">
<label class="flex items-center space-x-3 cursor-pointer group">
<input class="checkbox" type="checkbox" bind:checked={user.allow_auth_key} />
<p>Allow Email Auth Key</p>
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Allow Email Auth Key</span>
</label>
</div>
</div>
<div class="card p-4 space-y-4 variant-soft-surface">
<h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Lock size={18} /> Linking Info
<div class="card p-6 space-y-4 shadow-xl variant-soft-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Lock size={18} class="text-surface-500" /> Linking Info
</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="opacity-60">Linked Person:</span>
<span class="font-mono">
<div class="space-y-3 text-xs">
<div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
<span class="font-bold opacity-50 uppercase tracking-tighter">Linked Person</span>
<span class="font-mono font-bold">
{#if user.person_id_random}
<a href="/core/people/{user.person_id_random}" class="text-primary-500 underline">
<a href="/core/people/{user.person_id_random}" class="text-primary-500 hover:underline">
{user.person_id_random}
</a>
{:else}
@@ -196,21 +207,27 @@
{/if}
</span>
</div>
<div class="flex justify-between">
<span class="opacity-60">Account ID:</span>
<span class="font-mono">{user.account_id_random || '--'}</span>
<div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
<span class="font-bold opacity-50 uppercase tracking-tighter">Account Context</span>
<span class="font-mono font-bold">{user.account_id_random || '--'}</span>
</div>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Clock size={18} /> Timestamps
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
<Clock size={18} class="text-surface-500" /> Timestamps
</h3>
<div class="space-y-2 text-xs">
<p><span class="opacity-60">Created:</span> {new Date(user.created_on).toLocaleString()}</p>
<div class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
<div class="flex flex-col gap-1 opacity-60">
<span>Created On</span>
<span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.created_on).toLocaleString()}</span>
</div>
{#if user.updated_on}
<p><span class="opacity-60">Updated:</span> {new Date(user.updated_on).toLocaleString()}</p>
<div class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
<span>Last Updated</span>
<span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.updated_on).toLocaleString()}</span>
</div>
{/if}
</div>
</div>