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
@@ -2,7 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Phone, Plus, Search, Mail, User, ExternalLink, X } from 'lucide-svelte';
|
||||
import { Phone, Plus, Search, Mail, User, ExternalLink, X, ListFilter, Contact } from 'lucide-svelte';
|
||||
import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
|
||||
import Contact_form from './ae_comp__contact_form.svelte';
|
||||
|
||||
@@ -33,12 +33,17 @@
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<Phone size={24} />
|
||||
<h1 class="h2">Contact Management</h1>
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Phone size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">Contact Management</h1>
|
||||
</div>
|
||||
<button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
|
||||
<button
|
||||
class="btn btn-sm variant-filled-primary font-bold shadow-lg"
|
||||
onclick={() => show_add_form = !show_add_form}
|
||||
>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
@@ -48,7 +53,7 @@
|
||||
</header>
|
||||
|
||||
{#if show_add_form}
|
||||
<div class="mb-8">
|
||||
<div class="animate-fade-in">
|
||||
<Contact_form
|
||||
onSave={(new_con) => {
|
||||
show_add_form = false;
|
||||
@@ -63,53 +68,73 @@
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="placeholder animate-pulse h-64 w-full"></div>
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
</div>
|
||||
{:else if contact_li.length === 0}
|
||||
<div class="card p-8 text-center variant-soft">
|
||||
<p class="opacity-60">No contacts found for this account.</p>
|
||||
<div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Contact size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Business and support contacts will appear here.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each contact_li as con}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<User size={14} class="opacity-60" />
|
||||
{con.name || '--'}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<Mail size={14} class="opacity-60" />
|
||||
{con.email || '--'}
|
||||
</div>
|
||||
</td>
|
||||
<td>{con.phone || '--'}</td>
|
||||
<td>
|
||||
<span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'}">
|
||||
{con.enable ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm variant-soft-primary" href="/core/contacts/{con.contact_id_random}">
|
||||
Manage <ExternalLink size={12} class="ml-2" />
|
||||
</a>
|
||||
</td>
|
||||
<div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-4 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Directory Results
|
||||
<span class="badge variant-soft-secondary ml-auto">{contact_li.length} entries</span>
|
||||
</h3>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr class="uppercase text-[10px] tracking-widest opacity-60">
|
||||
<th>Name / Title</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Status</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each contact_li as con}
|
||||
<tr class="transition-colors">
|
||||
<td class="font-bold">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full">
|
||||
<User size={14} class="opacity-60" />
|
||||
</div>
|
||||
{con.title || con.name || '--'}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{#if con.email}
|
||||
<div class="flex items-center gap-2">
|
||||
<Mail size={14} class="opacity-40" />
|
||||
<span class="text-sm">{con.email}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<span class="opacity-20 text-xs italic">No Email</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-mono text-sm opacity-80">{con.phone_office || con.phone_mobile || '--'}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
|
||||
{con.enable ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/contacts/{con.contact_id_random}">
|
||||
Manage <ExternalLink size={12} class="ml-2 opacity-50" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -96,11 +96,11 @@
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
{#if onCancel}
|
||||
<button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
|
||||
<button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
|
||||
<X size={16} class="mr-1" /> Cancel
|
||||
</button>
|
||||
{/if}
|
||||
<button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
|
||||
<button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -124,23 +124,23 @@
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
|
||||
|
||||
<label class="label">
|
||||
<span>Title / Name</span>
|
||||
<input class="input" type="text" bind:value={formData.title} required placeholder="Business Office" />
|
||||
</label>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Title / Name</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.title} required placeholder="Business Office" />
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Tagline</span>
|
||||
<input class="input" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
|
||||
</label>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Tagline</label>
|
||||
<input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Email Address</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Email Address</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Mail size={16} /></div>
|
||||
<input type="email" bind:value={formData.email} placeholder="contact@example.com" />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.email} placeholder="contact@example.com" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Communication Section -->
|
||||
@@ -148,58 +148,58 @@
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="label">
|
||||
<span>Mobile Phone</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Mobile Phone</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
|
||||
</div>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Office Phone</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Office Phone</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Phone size={16} /></div>
|
||||
<input type="tel" bind:value={formData.phone_office} placeholder="+1..." />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Website URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Website URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Globe size={16} /></div>
|
||||
<input type="url" bind:value={formData.website_url} placeholder="https://..." />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.website_url} placeholder="https://..." />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Social Media Section -->
|
||||
<fieldset class="space-y-4">
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
|
||||
|
||||
<label class="label">
|
||||
<span>LinkedIn URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">LinkedIn URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Linkedin size={16} /></div>
|
||||
<input type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="label">
|
||||
<span>Facebook URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Facebook URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Facebook size={16} /></div>
|
||||
<input type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
|
||||
</div>
|
||||
</label>
|
||||
<label class="label">
|
||||
<span>Instagram URL</span>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr]">
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Instagram URL</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
|
||||
<div class="input-group-shim"><Instagram size={16} /></div>
|
||||
<input type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@@ -208,33 +208,33 @@
|
||||
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
|
||||
|
||||
<div class="flex flex-wrap gap-4 pt-2">
|
||||
<label class="flex items-center space-x-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
|
||||
<span>Enabled</span>
|
||||
<span class="text-sm font-medium">Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.hide} />
|
||||
<span>Hidden</span>
|
||||
<span class="text-sm font-medium">Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-2">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input class="checkbox" type="checkbox" bind:checked={formData.priority} />
|
||||
<span>Priority</span>
|
||||
<span class="text-sm font-medium">Priority</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="label">
|
||||
<span>Internal Notes</span>
|
||||
<textarea class="textarea" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
</label>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75">Internal Notes</label>
|
||||
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
|
||||
<button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
|
||||
<button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
|
||||
{#if is_loading}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{/if}
|
||||
{contact ? 'Update Contact' : 'Create Contact'}
|
||||
{contact ? 'Update Contact Record' : 'Create Contact Record'}
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user