style: badge code_to_icon refactor + core variant-* → preset-* migration
badge ae_comp__badge_obj_view_v2.svelte:
- Replace FA HTML string dict (code_to_html) with Lucide component map
(code_to_icon) — no FontAwesome dependency for dietary/option icons
- option_1 maps: Biohazard (generic/allergy), Utensils (dietary), Bone,
Fish, Carrot for specific diets
- option_2 maps: Asterisk (generic flag), Hand (first-time attendee)
- Template: replace {@html option_other_*} with {@const Icon}<Icon /> pattern
- Back-of-badge: shows text label + inline icon
core/ (21 files):
- variant-soft-* → preset-tonal-* (6 variants)
- variant-filled-* → preset-filled-* (6 variants)
- variant-glass-surface → preset-tonal-surface (Skeleton v4 has no glass)
- bare variant-soft → preset-tonal-surface
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -30,31 +30,31 @@
|
||||
<div class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
|
||||
{#if $ae_loc.manager_access}
|
||||
<nav class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
|
||||
<a href="/core" class="btn btn-sm variant-soft-surface">
|
||||
<a href="/core" class="btn btn-sm preset-tonal-surface">
|
||||
<LayoutDashboard size={14} class="mr-1" /> Dashboard
|
||||
</a>
|
||||
<a href="/core/accounts" class="btn btn-sm variant-soft-primary">
|
||||
<a href="/core/accounts" class="btn btn-sm preset-tonal-primary">
|
||||
<Building size={14} class="mr-1" /> Accounts
|
||||
</a>
|
||||
<a href="/core/sites" class="btn btn-sm variant-soft-secondary">
|
||||
<a href="/core/sites" class="btn btn-sm preset-tonal-secondary">
|
||||
<Globe size={14} class="mr-1" /> Sites
|
||||
</a>
|
||||
<a href="/core/users" class="btn btn-sm variant-soft-error">
|
||||
<a href="/core/users" class="btn btn-sm preset-tonal-error">
|
||||
<ShieldCheck size={14} class="mr-1" /> Users
|
||||
</a>
|
||||
<a href="/core/people" class="btn btn-sm variant-soft-warning">
|
||||
<a href="/core/people" class="btn btn-sm preset-tonal-warning">
|
||||
<Users size={14} class="mr-1" /> People
|
||||
</a>
|
||||
<a href="/core/activity_logs" class="btn btn-sm variant-soft-success">
|
||||
<a href="/core/activity_logs" class="btn btn-sm preset-tonal-success">
|
||||
<History size={14} class="mr-1" /> Logs
|
||||
</a>
|
||||
<a href="/core/addresses" class="btn btn-sm variant-soft-surface">
|
||||
<a href="/core/addresses" class="btn btn-sm preset-tonal-surface">
|
||||
<MapPin size={14} class="mr-1" /> Addresses
|
||||
</a>
|
||||
<a href="/core/contacts" class="btn btn-sm variant-soft-surface">
|
||||
<a href="/core/contacts" class="btn btn-sm preset-tonal-surface">
|
||||
<Phone size={14} class="mr-1" /> Contacts
|
||||
</a>
|
||||
<a href="/core/lookups" class="btn btn-sm variant-soft-surface">
|
||||
<a href="/core/lookups" class="btn btn-sm preset-tonal-surface">
|
||||
<List size={14} class="mr-1" /> Lookups
|
||||
</a>
|
||||
</nav>
|
||||
@@ -70,7 +70,7 @@
|
||||
<h1 class="h1 font-black">Access Restricted</h1>
|
||||
<p class="max-w-md opacity-70">The area you are trying to access is reserved for system managers. If you believe you should have access, please sign in with an authorized account.</p>
|
||||
<div class="flex gap-4 pt-4">
|
||||
<a href="/" class="btn variant-filled-primary font-bold">Return Home</a>
|
||||
<a href="/" class="btn preset-filled-primary font-bold">Return Home</a>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<!-- Account Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -43,13 +43,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage client accounts and high-level system settings.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
|
||||
<a class="btn preset-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Site Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -59,13 +59,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Configure sites and domains associated with the active account.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
|
||||
<a class="btn preset-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -75,13 +75,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage system access, permissions, and user credentials.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
|
||||
<a class="btn preset-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Person Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -91,13 +91,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Search and manage person records and their user linking.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
|
||||
<a class="btn preset-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Address Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -107,13 +107,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Manage physical locations, shipping, and billing addresses.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact Management Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -123,13 +123,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Maintain support contacts, office numbers, and digital links.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
|
||||
Manage
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Activity Log Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -139,13 +139,13 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">Monitor system actions and historical changes for the account.</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
|
||||
<a class="btn preset-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
|
||||
View Logs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Lookups Card -->
|
||||
<div class="card p-6 space-y-4 variant-soft shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
|
||||
@@ -155,7 +155,7 @@
|
||||
</div>
|
||||
<p class="text-sm opacity-80 leading-relaxed">View system lookup tables (countries, time zones, etc).</p>
|
||||
</div>
|
||||
<a class="btn variant-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
|
||||
<a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
|
||||
View
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -68,12 +68,12 @@
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Client Entities & Billing</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
|
||||
<Plus size={16} class="mr-2" /> Add Account
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</span>
|
||||
@@ -87,7 +87,7 @@
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_accounts} disabled={loading}>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_accounts} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -100,7 +100,7 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
@@ -124,33 +124,33 @@
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Building size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Accounts Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your filters or add a new client account.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Directory Results
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as acct (acct.account_id_random)}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4 flex gap-1">
|
||||
{#if acct.hide}
|
||||
<span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {acct.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span class="badge {acct.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{acct.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Building size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
@@ -170,7 +170,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
|
||||
Manage Account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<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-4">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/accounts">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/accounts">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -83,10 +83,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
|
||||
<button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Disable
|
||||
</button>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -103,31 +103,31 @@
|
||||
</div>
|
||||
{:else if account}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Info size={18} class="text-primary-500" /> Basic Information
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Name</span>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Short Name</span>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Code</span>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
|
||||
<input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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-secondary-500" /> Settings & Status
|
||||
</h3>
|
||||
@@ -148,21 +148,21 @@
|
||||
<div class="space-y-4 border-t border-surface-500/30 pt-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Group</span>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Sort Order</span>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 md:col-span-2 shadow-xl preset-tonal-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" /> Internal Notes
|
||||
</h3>
|
||||
<div class="space-y-1">
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Updating...
|
||||
{:else}
|
||||
@@ -69,7 +69,7 @@
|
||||
</header>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Keywords</span>
|
||||
@@ -83,7 +83,7 @@
|
||||
bind:value={qry_str}
|
||||
placeholder="Action, name, description..."
|
||||
/>
|
||||
<button type="submit" class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" disabled={loading}>
|
||||
<button type="submit" class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" disabled={loading}>
|
||||
<span class="whitespace-nowrap tracking-wide">Search</span>
|
||||
</button>
|
||||
</form>
|
||||
@@ -91,7 +91,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Display Limit</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
|
||||
<option value={25}>Latest 25</option>
|
||||
<option value={50}>Latest 50</option>
|
||||
<option value={100}>Latest 100</option>
|
||||
@@ -106,17 +106,17 @@
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if log_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Activity size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Logs Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try broadening your search or check another account.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
System Events
|
||||
<span class="badge variant-soft-secondary ml-auto">{log_li.length} entries shown</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{log_li.length} entries shown</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -149,7 +149,7 @@
|
||||
<!-- User/Person -->
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
|
||||
<div class="avatar preset-tonal-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
|
||||
<User size={14} class="opacity-60" />
|
||||
</div>
|
||||
<div class="flex flex-col max-w-[180px]">
|
||||
@@ -168,7 +168,7 @@
|
||||
<!-- Action -->
|
||||
<td>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="badge variant-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
|
||||
<span class="badge preset-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
|
||||
{log.action}
|
||||
</span>
|
||||
{#if log.action_with}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<h1 class="h2 font-black tracking-tight">Address Management</h1>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
>
|
||||
{#if show_add_form}
|
||||
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<div class="max-w-2xl space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
@@ -91,7 +91,7 @@
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by city, state, organization, or street..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -107,30 +107,30 @@
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div class="card p-12 text-center preset-tonal-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="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Linked Addresses
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as addr (addr.address_id_random)}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4">
|
||||
<span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span class="badge {addr.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{addr.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div class="avatar preset-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<MapPin size={20} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
@@ -152,7 +152,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
|
||||
View Details
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/addresses">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/addresses">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -64,14 +64,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
<button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
{#if is_editing}
|
||||
<Eye size={16} class="mr-2" /> View Mode
|
||||
{:else}
|
||||
<Edit size={16} class="mr-2" /> Edit Mode
|
||||
{/if}
|
||||
</button>
|
||||
<button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
@@ -96,7 +96,7 @@
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<MapPinned size={20} class="text-primary-500" />
|
||||
Location Information
|
||||
@@ -132,12 +132,12 @@
|
||||
<p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
|
||||
<Globe size={10} /> Postal Code / Country
|
||||
</p>
|
||||
<p class="font-bold">{address.postal_code || '--'} / <span class="badge variant-soft-surface">{address.country_name || address.country || '--'}</span></p>
|
||||
<p class="font-bold">{address.postal_code || '--'} / <span class="badge preset-tonal-surface">{address.country_name || address.country || '--'}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Activity size={20} class="text-secondary-500" />
|
||||
Technical Details
|
||||
@@ -168,7 +168,7 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<ShieldCheck size={20} class="text-warning-500" />
|
||||
Visibility & Status
|
||||
@@ -176,26 +176,26 @@
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Enabled</span>
|
||||
<span class="badge {address.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
|
||||
<span class="badge {address.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
|
||||
{address.enable ? 'ACTIVE' : 'DISABLED'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Hidden</span>
|
||||
<span class="badge {address.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<span class="badge {address.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{address.hide ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Priority</span>
|
||||
<span class="badge {address.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<span class="badge {address.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{address.priority ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
<div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
<p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
|
||||
<div class="space-y-2 text-[10px] font-mono opacity-60">
|
||||
<p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{address.address_id_random}</span></p>
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<MapPin size={24} />
|
||||
@@ -119,11 +119,11 @@
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
|
||||
<button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -135,7 +135,7 @@
|
||||
</header>
|
||||
|
||||
{#if error_msg}
|
||||
<aside class="alert variant-filled-error">
|
||||
<aside class="alert preset-filled-error">
|
||||
<div class="alert-message">
|
||||
<p>{error_msg}</p>
|
||||
</div>
|
||||
@@ -149,27 +149,27 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" 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" for="addr-org-name">Organization Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" 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" for="addr-line-1">Address Line 1</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" 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" for="addr-line-2">Line 2</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-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" for="addr-line-3">Line 3</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -181,22 +181,22 @@
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" 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" for="addr-postal">Postal Code</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-country">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
|
||||
</div>
|
||||
@@ -210,7 +210,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
|
||||
</div>
|
||||
@@ -219,14 +219,14 @@
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="addr-latitude" 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" for="addr-longitude">Longitude</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
|
||||
</div>
|
||||
@@ -255,13 +255,13 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" 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 font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
<button type="submit" class="btn preset-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}
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
<span class="text-[10px] opacity-50 font-mono">{person_obj.user_id_random}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="badge variant-soft-warning">
|
||||
<span class="badge preset-tonal-warning">
|
||||
<span class="fas fa-link-slash mr-1"></span>
|
||||
Not Linked
|
||||
</span>
|
||||
@@ -132,9 +132,9 @@
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{#if person_obj?.user_super}<span class="badge variant-filled-error text-[10px]">Super</span>{/if}
|
||||
{#if person_obj?.user_manager}<span class="badge variant-filled-warning text-[10px]">Manager</span>{/if}
|
||||
{#if person_obj?.user_administrator}<span class="badge variant-filled-primary text-[10px]">Admin</span>{/if}
|
||||
{#if person_obj?.user_super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
|
||||
{#if person_obj?.user_manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
|
||||
{#if person_obj?.user_administrator}<span class="badge preset-filled-primary text-[10px]">Admin</span>{/if}
|
||||
{#if !person_obj?.user_id_random}<span class="opacity-30">--</span>{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<h1 class="h2 font-black tracking-tight">Contact Management</h1>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
>
|
||||
{#if show_add_form}
|
||||
@@ -78,7 +78,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<div class="max-w-2xl space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
@@ -91,7 +91,7 @@
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name, title, email, or phone..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_contacts} disabled={loading}>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_contacts} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -107,30 +107,30 @@
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div class="card p-12 text-center preset-tonal-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="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Directory Results
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as con (con.contact_id_random)}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4">
|
||||
<span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span class="badge {con.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{con.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div class="avatar preset-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 class="pr-12">
|
||||
@@ -150,7 +150,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/contacts/{con.contact_id_random}">
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/contacts/{con.contact_id_random}">
|
||||
Manage Contact
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/contacts">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/contacts">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -64,14 +64,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-soft-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
<button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
|
||||
{#if is_editing}
|
||||
<Eye size={16} class="mr-2" /> View Mode
|
||||
{:else}
|
||||
<Edit size={16} class="mr-2" /> Edit Mode
|
||||
{/if}
|
||||
</button>
|
||||
<button class="btn btn-sm variant-soft-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
|
||||
<Trash2 size={16} class="mr-2" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
@@ -96,7 +96,7 @@
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Contact size={20} class="text-primary-500" />
|
||||
Core Information
|
||||
@@ -135,7 +135,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Phone size={20} class="text-secondary-500" />
|
||||
Communication & Social
|
||||
@@ -172,7 +172,7 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<ShieldCheck size={20} class="text-warning-500" />
|
||||
Status & Flags
|
||||
@@ -180,26 +180,26 @@
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Enabled</span>
|
||||
<span class="badge {contact.enable ? 'variant-filled-success' : 'variant-filled-error'} px-4 py-1 shadow-sm">
|
||||
<span class="badge {contact.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
|
||||
{contact.enable ? 'ACTIVE' : 'DISABLED'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Hidden</span>
|
||||
<span class="badge {contact.hide ? 'variant-filled-warning' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<span class="badge {contact.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{contact.hide ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
|
||||
<span class="text-sm font-bold opacity-75">Priority</span>
|
||||
<span class="badge {contact.priority ? 'variant-filled-secondary' : 'variant-filled-surface'} px-4 py-1 shadow-sm">
|
||||
<span class="badge {contact.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
|
||||
{contact.priority ? 'YES' : 'NO'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-5 variant-soft-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
<div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
|
||||
<p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
|
||||
<div class="space-y-2 text-[10px] font-mono opacity-60">
|
||||
<p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{contact.contact_id_random}</span></p>
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<UserPlus size={24} />
|
||||
@@ -113,11 +113,11 @@
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
|
||||
<button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -129,7 +129,7 @@
|
||||
</header>
|
||||
|
||||
{#if error_msg}
|
||||
<aside class="alert variant-filled-error">
|
||||
<aside class="alert preset-filled-error">
|
||||
<div class="alert-message">
|
||||
<p>{error_msg}</p>
|
||||
</div>
|
||||
@@ -143,17 +143,17 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-title">Title / Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" 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" for="contact-tagline">Tagline</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" 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" for="contact-email">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-email" type="email" bind:value={formData.email} placeholder="contact@example.com" />
|
||||
</div>
|
||||
@@ -167,14 +167,14 @@
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-phone-mobile">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-phone-mobile" 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" for="contact-phone-office">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-phone-office" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
|
||||
</div>
|
||||
@@ -183,7 +183,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-website">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-website" type="url" bind:value={formData.website_url} placeholder="https://..." />
|
||||
</div>
|
||||
@@ -196,7 +196,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-linkedin">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-linkedin" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
|
||||
</div>
|
||||
@@ -205,14 +205,14 @@
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-facebook">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-facebook" 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" for="contact-instagram">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="contact-instagram" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
|
||||
</div>
|
||||
@@ -241,13 +241,13 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="contact-notes">Internal Notes</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" 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 font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
<button type="submit" class="btn preset-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}
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
|
||||
{#if loading}
|
||||
<RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
|
||||
{:else}
|
||||
@@ -85,11 +85,11 @@
|
||||
{:else}
|
||||
<div class="space-y-6 animate-fade-in">
|
||||
<!-- 1. Countries -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Globe size={20} class="text-secondary-500" />
|
||||
Country Reference
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
@@ -104,7 +104,7 @@
|
||||
{#each lookups.countries as c (c.alpha_2_code)}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{c.name || c.english_short_name}</td>
|
||||
<td class="text-center"><span class="badge variant-soft-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
|
||||
<td class="text-center"><span class="badge preset-tonal-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -113,11 +113,11 @@
|
||||
</div>
|
||||
|
||||
<!-- 2. Subdivisions -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<MapPin size={20} class="text-primary-500" />
|
||||
Country Subdivisions (States/Provinces)
|
||||
<span class="badge variant-soft-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
|
||||
@@ -134,7 +134,7 @@
|
||||
<tr class="transition-colors">
|
||||
<td class="opacity-60">{s.country_alpha_2_code}</td>
|
||||
<td class="font-bold">{s.name}</td>
|
||||
<td class="text-center"><span class="badge variant-soft-surface font-mono">{s.code}</span></td>
|
||||
<td class="text-center"><span class="badge preset-tonal-surface font-mono">{s.code}</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -143,15 +143,15 @@
|
||||
</div>
|
||||
|
||||
<!-- 3. Time Zones -->
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-6">
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
|
||||
<div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
|
||||
<h3 class="h4 font-bold flex items-center gap-2">
|
||||
<Clock size={20} class="text-tertiary-500" />
|
||||
Time Zone Reference
|
||||
<span class="badge variant-soft-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
<span class="badge preset-tonal-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
|
||||
</h3>
|
||||
<button
|
||||
class="btn btn-sm transition-all {tz_only_priority ? 'variant-filled-warning' : 'variant-soft-surface'}"
|
||||
class="btn btn-sm transition-all {tz_only_priority ? 'preset-filled-warning' : 'preset-tonal-surface'}"
|
||||
onclick={toggle_tz_priority}
|
||||
disabled={loading}
|
||||
>
|
||||
@@ -172,7 +172,7 @@
|
||||
{#each lookups.time_zones as tz (tz.name)}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">{tz.name}</td>
|
||||
<td class="text-right"><span class="badge variant-soft-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
|
||||
<td class="text-right"><span class="badge preset-tonal-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -181,7 +181,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 variant-soft-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<div class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
|
||||
<Info size={16} class="text-primary-500" />
|
||||
<p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
>
|
||||
{#if show_add_form}
|
||||
@@ -60,11 +60,11 @@
|
||||
}} />
|
||||
|
||||
{#if $ae_sess.person.show_report__person_li}
|
||||
<div class="card p-6 variant-glass-surface shadow-xl space-y-4 border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-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>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{person_id_random_li.length} found</span>
|
||||
</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<Comp_person_obj_tbl
|
||||
|
||||
@@ -185,7 +185,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => is_editing = !is_editing}
|
||||
class="btn btn-sm variant-soft-secondary mx-1"
|
||||
class="btn btn-sm preset-tonal-secondary mx-1"
|
||||
>
|
||||
{#if is_editing}
|
||||
<Eye size={16} class="mr-2" /> View Mode
|
||||
@@ -249,19 +249,19 @@
|
||||
</div>
|
||||
|
||||
{#if $ae_loc.manager_access}
|
||||
<div class="card p-4 variant-soft-surface space-y-4 mx-4">
|
||||
<div class="card p-4 preset-tonal-surface space-y-4 mx-4">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
|
||||
<div class="flex items-center gap-2 font-bold">
|
||||
<ShieldCheck size={18} />
|
||||
<span>User Account Linking</span>
|
||||
</div>
|
||||
{#if $lq__person_obj?.user_id}
|
||||
<button class="btn btn-sm variant-soft-error" onclick={handle_unlink_user}>
|
||||
<button class="btn btn-sm preset-tonal-error" onclick={handle_unlink_user}>
|
||||
<Unlink size={14} class="mr-2" /> Unlink User
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm variant-soft-primary"
|
||||
class="btn btn-sm preset-tonal-primary"
|
||||
onclick={() => { show_link_ui = !show_link_ui; if(show_link_ui) load_unlinked_users(); }}
|
||||
>
|
||||
<Link size={14} class="mr-2" /> {show_link_ui ? 'Cancel Linking' : 'Link to User'}
|
||||
@@ -271,7 +271,7 @@
|
||||
|
||||
{#if $lq__person_obj?.user_id}
|
||||
<div class="flex items-center gap-4 py-2">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<div>
|
||||
@@ -291,7 +291,7 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
||||
{#each available_users as user (user.user_id)}
|
||||
<button
|
||||
class="card p-3 variant-soft-primary hover:variant-filled-primary text-left transition-all flex flex-col gap-1"
|
||||
class="card p-3 preset-tonal-primary hover:preset-filled-primary text-left transition-all flex flex-col gap-1"
|
||||
onclick={() => handle_link_user(user.user_id)}
|
||||
>
|
||||
<span class="font-bold flex items-center gap-2">
|
||||
@@ -300,8 +300,8 @@
|
||||
</span>
|
||||
<span class="text-xs opacity-70 truncate">{user.email}</span>
|
||||
<div class="flex gap-1 mt-1">
|
||||
{#if user.super}<span class="badge variant-filled-error text-[10px]">Super</span>{/if}
|
||||
{#if user.manager}<span class="badge variant-filled-warning text-[10px]">Manager</span>{/if}
|
||||
{#if user.super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
|
||||
{#if user.manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
@@ -317,7 +317,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Activity & Content Section -->
|
||||
<div class="card p-4 variant-soft-surface space-y-4 mx-4">
|
||||
<div class="card p-4 preset-tonal-surface space-y-4 mx-4">
|
||||
<header class="flex items-center gap-2 font-bold border-b border-surface-500/30 pb-2">
|
||||
<History size={18} />
|
||||
<span>Linked Activity & Content</span>
|
||||
@@ -336,7 +336,7 @@
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each related_events as ev (ev.event_id)}
|
||||
<a href="/events/{ev.event_id}" class="card p-3 variant-soft flex flex-col gap-1 hover:variant-soft-primary transition-all">
|
||||
<a href="/events/{ev.event_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
|
||||
<span class="font-bold text-sm">{ev.name}</span>
|
||||
<span class="text-[10px] opacity-60">{new Date(ev.start_datetime).toLocaleDateString()}</span>
|
||||
</a>
|
||||
@@ -357,11 +357,11 @@
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each related_posts as post (post.post_id)}
|
||||
<a href="/idaa/bb/{post.post_id}" class="card p-3 variant-soft flex flex-col gap-1 hover:variant-soft-primary transition-all">
|
||||
<a href="/idaa/bb/{post.post_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
|
||||
<span class="font-bold text-sm">{post.title}</span>
|
||||
<div class="flex justify-between items-center text-[10px] opacity-60">
|
||||
<span>{new Date(post.created_on).toLocaleDateString()}</span>
|
||||
<span class="badge variant-soft-surface scale-75">{post.post_comment_count || 0} comments</span>
|
||||
<span class="badge preset-tonal-surface scale-75">{post.post_comment_count || 0} comments</span>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
@@ -381,9 +381,9 @@
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each related_activity_logs as log, index (index)}
|
||||
<div class="card p-3 variant-soft flex flex-col gap-1">
|
||||
<div class="card p-3 preset-tonal-surface flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<span class="badge variant-filled-surface text-[9px] uppercase tracking-tighter">{log.action}</span>
|
||||
<span class="badge preset-filled-surface text-[9px] uppercase tracking-tighter">{log.action}</span>
|
||||
<span class="text-[9px] opacity-50">{new Date(log.created_on).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{#if log.summary}
|
||||
@@ -391,7 +391,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<a href="/core/activity_logs?person_id={$slct.person_id}" class="btn btn-sm variant-soft-surface w-full text-[10px]">
|
||||
<a href="/core/activity_logs?person_id={$slct.person_id}" class="btn btn-sm preset-tonal-surface w-full text-[10px]">
|
||||
View All Activity
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl variant-glass-surface">
|
||||
<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<User size={24} />
|
||||
@@ -138,11 +138,11 @@
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
|
||||
<button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
<button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -154,7 +154,7 @@
|
||||
</header>
|
||||
|
||||
{#if error_msg}
|
||||
<aside class="alert variant-filled-error">
|
||||
<aside class="alert preset-filled-error">
|
||||
<div class="alert-message">
|
||||
<p>{error_msg}</p>
|
||||
</div>
|
||||
@@ -169,30 +169,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" for="person-prefix">Prefix</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" type="text" bind:value={formData.prefix} placeholder="Mr." />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" 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" for="person-given-name">Given Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" type="text" bind:value={formData.given_name} required placeholder="Jane" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" 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" for="person-family-name">Family Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" type="text" bind:value={formData.family_name} required placeholder="Doe" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" 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" for="person-suffix">Suffix</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-middle-name">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 p-2" id="person-middle-name" 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" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-middle-name" type="text" bind:value={formData.middle_name} placeholder="Middle" />
|
||||
<input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -203,7 +203,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-primary-email">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="person-primary-email" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
|
||||
</div>
|
||||
@@ -211,7 +211,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-phone">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="person-phone" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
|
||||
</div>
|
||||
@@ -220,7 +220,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-tagline">Tagline</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="person-tagline" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
|
||||
</div>
|
||||
@@ -233,7 +233,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-professional-title">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="person-professional-title" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
|
||||
</div>
|
||||
@@ -241,7 +241,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-affiliations">Affiliations</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-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 p-2" id="person-affiliations" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
|
||||
</div>
|
||||
@@ -269,7 +269,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-notes">Notes (Internal)</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -280,7 +280,7 @@
|
||||
|
||||
<div class="space-y-1 max-w-md">
|
||||
<label class="label text-xs font-bold opacity-75" for="person-user-id-random">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 input-group-divider grid-cols-[auto_1fr] preset-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 p-2"
|
||||
@@ -297,7 +297,7 @@
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
<button type="submit" class="btn preset-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}
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</span>
|
||||
@@ -57,7 +57,7 @@
|
||||
placeholder="Search by name, email, or ID..."
|
||||
onkeydown={(e) => e.key === 'Enter' && handle_search()}
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={handle_search} disabled={loading}>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={handle_search} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -70,7 +70,7 @@
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" 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>
|
||||
@@ -79,7 +79,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" 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>
|
||||
|
||||
@@ -71,12 +71,12 @@
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Digital Properties & Domains</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
|
||||
<Plus size={16} class="mr-2" /> Add Site
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</span>
|
||||
@@ -90,7 +90,7 @@
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_sites} disabled={loading}>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_sites} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -103,7 +103,7 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="enabled">Enabled Only</option>
|
||||
<option value="not_enabled">Disabled Only</option>
|
||||
@@ -112,7 +112,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
|
||||
<option value="all">All Visibility</option>
|
||||
<option value="not_hidden">Not Hidden Only</option>
|
||||
<option value="hidden">Hidden Only</option>
|
||||
@@ -127,33 +127,33 @@
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if filtered_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Globe size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Sites Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Sites for this account will appear here. Add your first site to get started.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Linked Properties
|
||||
<span class="badge variant-soft-secondary ml-auto">{filtered_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each filtered_li as site (site.site_id_random)}
|
||||
<div class="card p-5 space-y-4 variant-soft-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
|
||||
<div class="absolute top-4 right-4 flex gap-1">
|
||||
{#if site.hide}
|
||||
<span class="badge variant-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
|
||||
{/if}
|
||||
<span class="badge {site.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
<span class="badge {site.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
|
||||
{site.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<header class="flex items-center gap-3">
|
||||
<div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
|
||||
<Globe size={24} />
|
||||
</div>
|
||||
<div class="pr-12">
|
||||
@@ -173,7 +173,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm variant-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
|
||||
Manage Site
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
<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-4">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/sites">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/sites">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -119,7 +119,7 @@
|
||||
<h1 class="h2 font-black tracking-tight">{site?.name ?? 'Loading...'}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -137,32 +137,32 @@
|
||||
<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-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Name</span>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Code</span>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
|
||||
<input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Tagline</span>
|
||||
<input class="input variant-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
|
||||
<input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
|
||||
<textarea class="textarea preset-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Site JSON Config -->
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Database size={18} class="text-warning-500" /> Site Settings (cfg_json)
|
||||
</h3>
|
||||
@@ -172,7 +172,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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>
|
||||
@@ -184,7 +184,7 @@
|
||||
{#if site.restrict_access}
|
||||
<div class="space-y-1 max-w-md animate-fade-in">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Access Key</span>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
|
||||
<input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -193,12 +193,12 @@
|
||||
|
||||
<!-- Domains Management -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
|
||||
<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">
|
||||
<button class="btn btn-icon btn-sm preset-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
</header>
|
||||
@@ -208,7 +208,7 @@
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each domain_li as dom (dom.site_domain_id_random)}
|
||||
<div class="card p-3 variant-soft shadow-sm border border-surface-500/10 flex justify-between items-center group">
|
||||
<div class="card p-3 preset-tonal-surface shadow-sm border border-surface-500/10 flex justify-between items-center group">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-sm flex items-center gap-1">
|
||||
{dom.fqdn}
|
||||
@@ -221,10 +221,10 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button class="btn btn-icon btn-sm {dom.enable ? 'variant-soft-success' : 'variant-soft-error'}" onclick={() => handle_toggle_domain(dom)} title="Toggle Active">
|
||||
<button class="btn btn-icon btn-sm {dom.enable ? 'preset-tonal-success' : 'preset-tonal-error'}" onclick={() => handle_toggle_domain(dom)} title="Toggle Active">
|
||||
<Save size={14} />
|
||||
</button>
|
||||
<button class="btn btn-icon btn-sm variant-soft-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
|
||||
<button class="btn btn-icon btn-sm preset-tonal-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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>
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">User Management</h1>
|
||||
</div>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
|
||||
<button class="btn btn-sm preset-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}
|
||||
@@ -79,7 +79,7 @@
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
|
||||
<div class="card p-6 shadow-xl preset-tonal-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">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</span>
|
||||
@@ -94,7 +94,7 @@
|
||||
placeholder="Search username or email..."
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()}
|
||||
/>
|
||||
<button class="variant-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
@@ -107,7 +107,7 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Scope</span>
|
||||
<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}>
|
||||
<select class="select preset-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>
|
||||
@@ -116,7 +116,7 @@
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
|
||||
<select class="select preset-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>
|
||||
@@ -131,25 +131,25 @@
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if user_li.length === 0}
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div class="card p-12 text-center preset-tonal-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="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<div class="card p-6 preset-tonal-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>
|
||||
<span class="badge preset-tonal-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 (user.user_id_random)}
|
||||
<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">
|
||||
<div class="card p-5 space-y-4 preset-tonal-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-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">
|
||||
<div class="avatar preset-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>
|
||||
@@ -159,16 +159,16 @@
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
{#if user.super}
|
||||
<span class="badge variant-filled-error text-[8px] uppercase font-bold">Super</span>
|
||||
<span class="badge preset-filled-error text-[8px] uppercase font-bold">Super</span>
|
||||
{:else if user.manager}
|
||||
<span class="badge variant-filled-warning text-[8px] uppercase font-bold">Manager</span>
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold">Manager</span>
|
||||
{/if}
|
||||
{#if !user.account_id && !user.account_id_random}
|
||||
<span class="badge variant-soft-secondary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<span class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<Globe size={8} /> Global
|
||||
</span>
|
||||
{:else}
|
||||
<span class="badge variant-soft-primary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<span class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<Landmark size={8} /> Account
|
||||
</span>
|
||||
{/if}
|
||||
@@ -186,7 +186,7 @@
|
||||
</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}">
|
||||
<a class="btn btn-sm preset-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>
|
||||
|
||||
@@ -80,11 +80,11 @@
|
||||
<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-4">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/users">
|
||||
<a class="btn btn-sm preset-tonal-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 shadow-inner">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
|
||||
<UserIcon size={24} />
|
||||
</div>
|
||||
<div>
|
||||
@@ -94,10 +94,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
|
||||
<button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Disable
|
||||
</button>
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -111,22 +111,22 @@
|
||||
<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-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
|
||||
<input class="input preset-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
|
||||
<input class="input variant-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
|
||||
<input class="input preset-filled-surface rounded-lg p-2" id="user-email" 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" for="user-username">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 input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
|
||||
<div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" type="text" bind:value={user.username} disabled />
|
||||
</div>
|
||||
@@ -135,33 +135,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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-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">
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.super} />
|
||||
<div class="flex flex-col">
|
||||
<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-4 variant-soft-warning cursor-pointer border border-warning-500/20 hover:variant-filled-warning transition-all group">
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.manager} />
|
||||
<div class="flex flex-col">
|
||||
<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-4 variant-soft-primary cursor-pointer border border-primary-500/20 hover:variant-filled-primary transition-all group">
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.administrator} />
|
||||
<div class="flex flex-col">
|
||||
<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-4 variant-soft-secondary cursor-pointer border border-secondary-500/20 hover:variant-filled-secondary transition-all group">
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.verified} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Verified User</span>
|
||||
@@ -174,7 +174,7 @@
|
||||
|
||||
<!-- Sidebar / Meta -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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>
|
||||
@@ -194,7 +194,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-soft-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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>
|
||||
@@ -218,7 +218,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-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>
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
// V2: auto-scaling text component
|
||||
import Element_fit_text from '$lib/elements/element_fit_text.svelte';
|
||||
import { Asterisk, Biohazard, Star, Wifi } from 'lucide-svelte';
|
||||
import { Asterisk, Biohazard, Bone, Carrot, Fish, Hand, Star, Utensils, Wifi } from 'lucide-svelte';
|
||||
|
||||
// --- Badge type list from template ---
|
||||
// Each item: { code: string, name: string }. Drives footer display + (in controls) dropdown.
|
||||
@@ -294,23 +294,31 @@
|
||||
let option_other_1_display_opt = 'back_html';
|
||||
let option_other_2_display_opt = 'back_html';
|
||||
|
||||
let code_to_html: any = { option_1: {}, option_2: {} };
|
||||
code_to_html.option_1['1'] = '<span class="fas fa-biohazard"></span>';
|
||||
code_to_html.option_1['true'] = '<span class="fas fa-biohazard"></span>';
|
||||
code_to_html.option_1['True'] = '<span class="fas fa-biohazard"></span>';
|
||||
code_to_html.option_1['Dairy Free'] = '<span class="fas fa-utensils"></span>';
|
||||
code_to_html.option_1['Gluten Free'] = '<span class="fas fa-utensils"></span>';
|
||||
code_to_html.option_1['Halal'] = '<span class="fas fa-utensils"></span>';
|
||||
code_to_html.option_1['Kosher'] = '<span class="fas fa-utensils"></span>';
|
||||
code_to_html.option_1['Meat'] = '<span class="fas fa-bone"></span>';
|
||||
code_to_html.option_1['Pescatarian'] = '<span class="fas fa-fish"></span>';
|
||||
code_to_html.option_1['Vegan'] = '<span class="fas fa-utensils"></span>';
|
||||
code_to_html.option_1['Vegetarian'] = '<span class="fas fa-carrot"></span>';
|
||||
|
||||
code_to_html.option_2['1'] = '<span class="fas fa-star-of-life"></span>';
|
||||
code_to_html.option_2['true'] = '<span class="fas fa-star-of-life"></span>';
|
||||
code_to_html.option_2['True'] = '<span class="fas fa-star-of-life"></span>';
|
||||
code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>';
|
||||
// Maps badge option field values → Lucide icon components.
|
||||
// option_1 = dietary/allergy flag; option_2 = special designation (first-time, etc.)
|
||||
// WHY: Replaces the old code_to_html FA string map — no FontAwesome dependency.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const code_to_icon: { option_1: Record<string, any>; option_2: Record<string, any> } = {
|
||||
option_1: {
|
||||
'1': Biohazard,
|
||||
'true': Biohazard,
|
||||
'True': Biohazard,
|
||||
'Dairy Free': Utensils,
|
||||
'Gluten Free': Utensils,
|
||||
'Halal': Utensils,
|
||||
'Kosher': Utensils,
|
||||
'Meat': Bone,
|
||||
'Pescatarian': Fish,
|
||||
'Vegan': Utensils,
|
||||
'Vegetarian': Carrot,
|
||||
},
|
||||
option_2: {
|
||||
'1': Asterisk,
|
||||
'true': Asterisk,
|
||||
'True': Asterisk,
|
||||
'First Time ': Hand,
|
||||
}
|
||||
};
|
||||
/* *** END *** Legacy ticket/option state */
|
||||
</script>
|
||||
|
||||
@@ -580,9 +588,10 @@
|
||||
><Biohazard size="1em" /></span
|
||||
>
|
||||
{:else if option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt)}
|
||||
<span class="badge_footer_special_left"
|
||||
>{@html option_other_1_override}</span
|
||||
>
|
||||
{@const Icon1 = code_to_icon.option_1[option_other_1_override]}
|
||||
<span class="badge_footer_special_left">
|
||||
{#if Icon1}<Icon1 size="1em" />{/if}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<!-- badge_type_code is the CSS class hook for per-event stylesheets;
|
||||
@@ -597,9 +606,10 @@
|
||||
><Asterisk size="1em" /></span
|
||||
>
|
||||
{:else if option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt)}
|
||||
<span class="badge_footer_special_right"
|
||||
>{@html option_other_2_override}</span
|
||||
>
|
||||
{@const Icon2 = code_to_icon.option_2[option_other_2_override]}
|
||||
<span class="badge_footer_special_right">
|
||||
{#if Icon2}<Icon2 size="1em" />{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -796,7 +806,8 @@
|
||||
{#if option_other_1_override && ['back_bool', 'front_back_bool'].includes(option_other_1_display_opt)}
|
||||
- {option_other_1_override}
|
||||
{:else if option_other_1_override && ['back_html', 'front_back_html'].includes(option_other_1_display_opt)}
|
||||
- {@html option_other_1_override}
|
||||
{@const BIcon1 = code_to_icon.option_1[option_other_1_override]}
|
||||
- {option_other_1_override}{#if BIcon1} <BIcon1 size="0.85em" class="inline" />{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -806,7 +817,8 @@
|
||||
{#if option_other_2_override && ['back_bool', 'front_back_bool'].includes(option_other_2_display_opt)}
|
||||
- {option_other_2_override}
|
||||
{:else if option_other_2_override && ['back_html', 'front_back_html'].includes(option_other_2_display_opt)}
|
||||
- {@html option_other_2_override}
|
||||
{@const BIcon2 = code_to_icon.option_2[option_other_2_override]}
|
||||
- {option_other_2_override}{#if BIcon2} <BIcon2 size="0.85em" class="inline" />{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user