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

Lots of style clean up

Browse Source
This commit is contained in:
Scott Idem
2026-01-15 17:51:48 -05:00
parent 572ce1841b
commit 39d0707968
5 changed files with 143 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,19 +110,19 @@
<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} />
<input class="input variant-filled-surface rounded-lg p-2" 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} />
<input class="input variant-filled-surface rounded-lg p-2" 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} />
<input class="input variant-filled-surface rounded-lg font-mono p-2" 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>
<textarea class="textarea variant-filled-surface rounded-lg p-2" rows="3" bind:value={account.description}></textarea>
</div>
</div>
</div>
@@ -148,11 +148,11 @@
<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} />
<input class="input variant-filled-surface rounded-lg p-2" 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} />
<input class="input variant-filled-surface rounded-lg p-2" type="number" bind:value={account.sort} />
</div>
</div>
</div>
@@ -162,7 +162,7 @@
<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>
<textarea class="textarea variant-filled-surface rounded-lg p-2" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
</div>
</div>
</div>

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

@@ -130,27 +130,27 @@
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
</div>
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
</div>
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
</div>
<div class="grid grid-cols-2 gap-2">
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" 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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
</div>
</div>
</fieldset>
@@ -162,24 +162,24 @@
<div class="grid grid-cols-2 gap-2">
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" 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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.state_province} placeholder="NY" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" 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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.country} placeholder="USA" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.country} placeholder="USA" />
</div>
</div>
</div>
@@ -193,7 +193,7 @@
<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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
</div>
</div>
@@ -202,14 +202,14 @@
<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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.latitude} placeholder="40.7128" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.latitude} placeholder="40.7128" />
</div>
</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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
</div>
</div>
</div>
@@ -236,7 +236,7 @@
<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>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
</div>
</fieldset>
</div>

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

@@ -126,19 +126,19 @@
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.title} required placeholder="Business Office" />
</div>
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
</div>
<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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.email} placeholder="contact@example.com" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="email" bind:value={formData.email} placeholder="contact@example.com" />
</div>
</div>
</fieldset>
@@ -152,14 +152,14 @@
<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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
</div>
</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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
</div>
</div>
</div>
@@ -168,7 +168,7 @@
<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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.website_url} placeholder="https://..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.website_url} placeholder="https://..." />
</div>
</div>
</fieldset>
@@ -181,7 +181,7 @@
<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 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/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
</div>
</div>
@@ -190,14 +190,14 @@
<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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" 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 p-2" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
</div>
</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 class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" 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 p-2" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
</div>
</div>
</div>
@@ -224,7 +224,7 @@
<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>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
</div>

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

@@ -149,30 +149,30 @@
<div class="grid grid-cols-4 gap-2">
<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." />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" 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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.given_name} required placeholder="Jane" />
</div>
</div>
<div class="grid grid-cols-4 gap-2">
<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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" 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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.suffix} placeholder="PhD" />
</div>
</div>
<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 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" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.middle_name} placeholder="Middle" />
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
</div>
</div>
</fieldset>
@@ -185,7 +185,7 @@
<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="bg-transparent border-0 ring-0 focus:ring-0 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 p-2" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
</div>
</div>
@@ -193,7 +193,7 @@
<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="bg-transparent border-0 ring-0 focus:ring-0 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 p-2" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
</div>
<small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
</div>
@@ -202,7 +202,7 @@
<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="bg-transparent border-0 ring-0 focus:ring-0 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 p-2" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
</div>
</div>
</fieldset>
@@ -215,7 +215,7 @@
<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="bg-transparent border-0 ring-0 focus:ring-0 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 p-2" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
</div>
</div>
@@ -223,7 +223,7 @@
<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="bg-transparent border-0 ring-0 focus:ring-0 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 p-2" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
</div>
</div>
</fieldset>
@@ -249,7 +249,7 @@
<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>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
@@ -263,7 +263,7 @@
<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="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400"
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2"
type="text"
bind:value={formData.user_id_random}
placeholder="e.g. AB12CD34"

157
src/routes/core/users/+page.svelte
View File

@@ -3,13 +3,14 @@
import { load_ae_obj_li__user, create_ae_obj__user } from '$lib/ae_core/ae_core__user';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Plus, Search, User, ShieldCheck, Mail, Globe, Landmark } from 'lucide-svelte';
import { Plus, Search, User, ShieldCheck, Mail, Globe, Landmark, ListFilter, X, Fingerprint, Activity } from 'lucide-svelte';
let user_li: any[] = $state([]);
let loading = $state(true);
let qry_str = $state('');
let qry_enabled = $state('all');
let qry_account_scope = $state('all'); // 'all', 'account', 'global'
let show_add_form = $state(false);
async function load_users() {
loading = true;
@@ -61,92 +62,134 @@
}
</script>
<div class="container mx-auto p-4 space-y-4">
<header class="flex justify-between items-center">
<div class="container mx-auto p-4 space-y-6">
<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">
<ShieldCheck size={24} />
<h1 class="h2">User Management</h1>
<div class="p-2 bg-primary-500/10 rounded-lg">
<ShieldCheck size={24} class="text-primary-500" />
</div>
<h1 class="h2 font-black tracking-tight">User Management</h1>
</div>
<button class="btn variant-filled-primary" onclick={handle_add_user}>
<Plus size={16} class="mr-2" /> Add User
<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}
<Plus size={16} class="mr-2" /> Add User
{/if}
</button>
</header>
<div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
<label class="label flex-1">
<span>Search Username or Email</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
<div class="input-group-shim"><Search size={16} /></div>
<input type="search" bind:value={qry_str} placeholder="Search..." onkeydown={(e) => e.key === 'Enter' && load_users()} />
<button class="variant-filled-secondary" onclick={load_users}>Go</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 Users</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 p-2"
type="search"
bind:value={qry_str}
placeholder="Search username or email..."
onkeydown={(e) => e.key === 'Enter' && load_users()}
/>
<button class="variant-filled-primary font-bold px-6 hover:brightness-110 transition-all" onclick={load_users} disabled={loading}>
{#if loading}
<span class="animate-spin mr-1">⏳</span>
{:else}
Go
{/if}
</button>
</div>
</div>
</label>
<label class="label">
<span>Scope</span>
<select class="select w-48" bind:value={qry_account_scope} onchange={load_users}>
<option value="all">All (Current + Global)</option>
<option value="account">Current Account Only</option>
<option value="global">Global Only (No Account)</option>
</select>
</label>
<label class="label">
<span>Status</span>
<select class="select w-32" bind:value={qry_enabled} onchange={load_users}>
<option value="all">All</option>
<option value="enabled">Enabled</option>
<option value="not_enabled">Disabled</option>
</select>
</label>
<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">Scope</label>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
<option value="all">All (Current + Global)</option>
<option value="account">Account Only</option>
<option value="global">Global Only</option>
</select>
</div>
<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_users}>
<option value="all">All</option>
<option value="enabled">Enabled</option>
<option value="not_enabled">Disabled</option>
</select>
</div>
</div>
</div>
</div>
{#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 user_li.length === 0}
<p class="text-center py-12 opacity-60">No users found.</p>
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
<Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
<h3 class="h3 font-bold opacity-50">No Users Found</h3>
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</p>
</div>
{:else}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{#each user_li as user}
<div class="card p-4 space-y-3 variant-soft flex flex-col justify-between">
<div class="space-y-2">
<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">{user_li.length} found</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{#each user_li as user}
<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">
<header class="flex justify-between items-start">
<div class="flex items-center gap-2">
<div class="avatar variant-filled-surface w-10 h-10 flex items-center justify-center rounded-full">
<User size={20} />
<div class="flex items-center gap-3">
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
<User size={24} />
</div>
<div>
<p class="font-bold">{user.username}</p>
<p class="text-xs opacity-60">{user.name || '--'}</p>
<p class="font-black tracking-tight">{user.username}</p>
<p class="text-[10px] uppercase font-bold opacity-50">{user.name || 'No Display Name'}</p>
</div>
</div>
<div class="flex flex-col items-end gap-1">
{#if user.super}
<span class="badge variant-filled-error">Super</span>
<span class="badge variant-filled-error text-[8px] uppercase font-bold">Super</span>
{:else if user.manager}
<span class="badge variant-filled-warning">Manager</span>
<span class="badge variant-filled-warning text-[8px] uppercase font-bold">Manager</span>
{/if}
{#if !user.account_id && !user.account_id_random}
<span class="badge variant-soft-secondary flex items-center gap-1">
<Globe size={10} /> Global
<span class="badge variant-soft-secondary text-[8px] uppercase font-bold flex items-center gap-1">
<Globe size={8} /> Global
</span>
{:else}
<span class="badge variant-soft-primary flex items-center gap-1">
<Landmark size={10} /> Account
<span class="badge variant-soft-primary text-[8px] uppercase font-bold flex items-center gap-1">
<Landmark size={8} /> Account
</span>
{/if}
</div>
</header>
<div class="flex items-center gap-2 text-sm opacity-80">
<Mail size={14} />
<span>{user.email || '--'}</span>
<div class="space-y-2">
<div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
<Mail size={14} class="text-primary-500" />
<span class="truncate">{user.email || '--'}</span>
</div>
<div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
<Activity size={14} class="text-secondary-500" />
<span class="font-mono">{user.user_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/users/{user.user_id_random}">
Manage User
</a>
</div>
<a class="btn btn-sm variant-filled-primary w-full" href="/core/users/{user.user_id_random}">
Edit User
</a>
</div>
{/each}
{/each}
</div>
</div>
{/if}
</div>