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

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>