feat(core): standardized form inputs and buttons across core modules
- Updated Person, Address, Contact forms with consistent Skeleton UI styling. - Standardized Account, Site, and User detail pages. - Modernized People, Address, and Contact list pages with improved headers and action buttons. - Applied 'variant-filled-surface' and 'rounded-lg' patterns from Journals module for UI consistency.
This commit is contained in:
Scott Idem
@@ -70,79 +70,100 @@
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm variant-soft" href="/core/accounts">
|
||||
<a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/accounts">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<Building size={24} />
|
||||
<h1 class="h2">{account?.name ?? 'Loading Account...'}</h1>
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Building size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">{account?.name ?? 'Loading...'}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn variant-filled-error" onclick={handle_delete} disabled={loading || saving}>
|
||||
<button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Disable
|
||||
</button>
|
||||
<button class="btn variant-filled-primary" onclick={handle_save} disabled={loading || saving}>
|
||||
<Save size={16} class="mr-2" /> Save Changes
|
||||
<button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
<Save size={16} class="mr-2" />
|
||||
{/if}
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse w-full h-64"></div>
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if account}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card p-4 space-y-4">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Basic Information</h3>
|
||||
<label class="label">
|
||||
<span>Account Name</span>
|
||||
<input class="input" type="text" bind:value={account.name} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Short Name</span>
|
||||
<input class="input" type="text" bind:value={account.short_name} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Account Code</span>
|
||||
<input class="input" type="text" bind:value={account.code} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Description</span>
|
||||
<textarea class="textarea" rows="3" bind:value={account.description}></textarea>
|
||||
</label>
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<span class="text-primary-500">◆</span> Basic Information
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Account Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Short Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.short_name} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Account Code</label>
|
||||
<input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={account.code} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Description</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg" rows="3" bind:value={account.description}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 space-y-4">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Settings & Status</h3>
|
||||
<div class="flex flex-col gap-4">
|
||||
<label class="flex items-center space-x-2">
|
||||
<div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<span class="text-secondary-500">◆</span> Settings & Status
|
||||
</h3>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.enable} />
|
||||
<p>Enabled</p>
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.hide} />
|
||||
<p>Hidden</p>
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.priority} />
|
||||
<p>Priority Account</p>
|
||||
<span class="text-sm font-medium">Priority Account</span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="label">
|
||||
<span>Group</span>
|
||||
<input class="input" type="text" bind:value={account.group} />
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Sort Order</span>
|
||||
<input class="input" type="number" bind:value={account.sort} />
|
||||
</label>
|
||||
<div class="space-y-4 border-t border-surface-500/30 pt-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Group</label>
|
||||
<input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.group} />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Sort Order</label>
|
||||
<input class="input variant-filled-surface rounded-lg" type="number" bind:value={account.sort} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-4 space-y-4 md:col-span-2">
|
||||
<h3 class="h4 border-b border-surface-500/30 pb-2">Internal Notes</h3>
|
||||
<textarea class="textarea" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
<div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<span class="text-tertiary-500">◆</span> Internal Notes
|
||||
</h3>
|
||||
<div class="space-y-1">
|
||||
<textarea class="textarea variant-filled-surface rounded-lg" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user