Making the code easier to read and more consistent.
This commit is contained in:
Scott Idem
@@ -1,96 +1,125 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { load_ae_obj_li__account, create_ae_obj__account } from '$lib/ae_core/ae_core__account';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Building, Calendar, ExternalLink, FileText, ListFilter, Plus, RefreshCcw, Search, ShieldCheck, X } from '@lucide/svelte';
|
||||
let account_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
load_ae_obj_li__account,
|
||||
create_ae_obj__account
|
||||
} from '$lib/ae_core/ae_core__account';
|
||||
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Building,
|
||||
Calendar,
|
||||
ExternalLink,
|
||||
FileText,
|
||||
ListFilter,
|
||||
Plus,
|
||||
RefreshCcw,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
let account_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_enabled = $state('all');
|
||||
let qry_hidden = $state('all');
|
||||
let qry_str = $state('');
|
||||
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? account_li.filter(a =>
|
||||
a.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: account_li
|
||||
);
|
||||
let filtered_li = $derived(
|
||||
qry_str
|
||||
? account_li.filter(
|
||||
(a) =>
|
||||
a.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
|
||||
a.code?.toLowerCase().includes(qry_str.toLowerCase())
|
||||
)
|
||||
: account_li
|
||||
);
|
||||
|
||||
async function load_accounts() {
|
||||
loading = true;
|
||||
account_li = await load_ae_obj_li__account({
|
||||
api_cfg: $ae_api,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
async function load_accounts() {
|
||||
loading = true;
|
||||
account_li = await load_ae_obj_li__account({
|
||||
api_cfg: $ae_api,
|
||||
enabled: qry_enabled as any,
|
||||
hidden: qry_hidden as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load_accounts();
|
||||
onMount(() => {
|
||||
load_accounts();
|
||||
});
|
||||
|
||||
async function handle_add_account() {
|
||||
const name = prompt('Enter new account name:');
|
||||
if (!name) return;
|
||||
|
||||
const code = prompt('Enter account code (optional):');
|
||||
|
||||
const new_acct = await create_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
data_kv: {
|
||||
name,
|
||||
code: code || undefined,
|
||||
enable: true
|
||||
},
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
async function handle_add_account() {
|
||||
const name = prompt('Enter new account name:');
|
||||
if (!name) return;
|
||||
|
||||
const code = prompt('Enter account code (optional):');
|
||||
|
||||
const new_acct = await create_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
data_kv: {
|
||||
name,
|
||||
code: code || undefined,
|
||||
enable: true
|
||||
},
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (new_acct) {
|
||||
load_accounts();
|
||||
}
|
||||
if (new_acct) {
|
||||
load_accounts();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<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-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<Building size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">Account Management</h1>
|
||||
<p class="text-xs font-bold opacity-50 uppercase tracking-widest">Client Entities & Billing</p>
|
||||
<p
|
||||
class="text-xs font-bold opacity-50 uppercase tracking-widest">
|
||||
Client Entities & Billing
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm preset-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 preset-tonal-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>
|
||||
<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">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Accounts</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">
|
||||
<div
|
||||
class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search by name or code..."
|
||||
/>
|
||||
<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}>
|
||||
placeholder="Search by name or code..." />
|
||||
<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}
|
||||
<span class="whitespace-nowrap tracking-wide">Refresh</span>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Refresh</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -98,8 +127,13 @@
|
||||
|
||||
<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 preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Status</span>
|
||||
<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>
|
||||
@@ -107,8 +141,13 @@
|
||||
</div>
|
||||
|
||||
<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 preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Visibility</span>
|
||||
<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>
|
||||
@@ -120,56 +159,87 @@
|
||||
|
||||
{#if loading}
|
||||
<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 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 preset-tonal-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>
|
||||
<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 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">
|
||||
<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 preset-tonal-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 preset-tonal-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 preset-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 ? 'preset-filled-success' : 'preset-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 preset-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">
|
||||
<p class="font-black tracking-tight truncate">{acct.name}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {acct.code || '--'}</p>
|
||||
<p class="font-black tracking-tight truncate">
|
||||
{acct.name}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">
|
||||
Code: {acct.code || '--'}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2 text-xs opacity-70">
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Calendar size={14} class="text-primary-500 shrink-0" />
|
||||
<span>Created: {new Date(acct.created_on).toLocaleDateString()}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<Calendar
|
||||
size={14}
|
||||
class="text-primary-500 shrink-0" />
|
||||
<span
|
||||
>Created: {new Date(
|
||||
acct.created_on
|
||||
).toLocaleDateString()}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck size={14} class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate">{acct.account_id_random}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
|
||||
<ShieldCheck
|
||||
size={14}
|
||||
class="text-secondary-500 shrink-0" />
|
||||
<span class="font-mono truncate"
|
||||
>{acct.account_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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}">
|
||||
<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>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { ae_api } from '$lib/stores/ae_stores';
|
||||
export const load: PageLoad = async ({ parent }) => {
|
||||
// Ensure we have parent data if needed, but for listing accounts we mostly need the api_cfg
|
||||
const parentData = await parent();
|
||||
|
||||
|
||||
return {
|
||||
// We could pre-load here, but listing accounts might be better handled in the component
|
||||
// to support interactive filtering/pagination more easily.
|
||||
|
||||
@@ -1,91 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { load_ae_obj_id__account, update_ae_obj__account, delete_ae_obj_id__account } from '$lib/ae_core/ae_core__account';
|
||||
import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Activity, ArrowLeft, Building, Info, Save, Settings, Trash2 } from '@lucide/svelte';
|
||||
let account_id = $derived($page.params.account_id ?? '');
|
||||
let account: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import {
|
||||
load_ae_obj_id__account,
|
||||
update_ae_obj__account,
|
||||
delete_ae_obj_id__account
|
||||
} from '$lib/ae_core/ae_core__account';
|
||||
import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
Building,
|
||||
Info,
|
||||
Save,
|
||||
Settings,
|
||||
Trash2
|
||||
} from '@lucide/svelte';
|
||||
let account_id = $derived($page.params.account_id ?? '');
|
||||
let account: any = $state(null);
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
|
||||
async function load_account() {
|
||||
loading = true;
|
||||
account = await load_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
async function load_account() {
|
||||
loading = true;
|
||||
account = await load_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_account();
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
// Filter fields to only include editable ones
|
||||
const data_kv: any = {};
|
||||
editable_fields__account.forEach((field) => {
|
||||
if (account[field] !== undefined) {
|
||||
data_kv[field] = account[field];
|
||||
}
|
||||
load_account();
|
||||
});
|
||||
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
// Filter fields to only include editable ones
|
||||
const data_kv: any = {};
|
||||
editable_fields__account.forEach(field => {
|
||||
if (account[field] !== undefined) {
|
||||
data_kv[field] = account[field];
|
||||
}
|
||||
});
|
||||
const result = await update_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
const result = await update_ae_obj__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
alert('Account updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
if (result) {
|
||||
alert('Account updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this account?')) return;
|
||||
|
||||
const result = await delete_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this account?')) return;
|
||||
|
||||
if (result) {
|
||||
goto('/core/accounts');
|
||||
}
|
||||
const result = await delete_ae_obj_id__account({
|
||||
api_cfg: $ae_api,
|
||||
account_id,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
goto('/core/accounts');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<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 preset-tonal-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">
|
||||
<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>
|
||||
<h1 class="h2 font-black tracking-tight">
|
||||
{account?.name ?? 'Loading...'}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-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 preset-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}
|
||||
@@ -98,70 +121,129 @@
|
||||
|
||||
{#if loading}
|
||||
<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 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-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">
|
||||
<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 preset-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Account Name</span>
|
||||
<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 preset-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Short Name</span>
|
||||
<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 preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Account Code</span>
|
||||
<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 preset-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Description</span>
|
||||
<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 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">
|
||||
<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>
|
||||
<div class="flex flex-col gap-4 py-2">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.enable} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Enabled</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={account.enable} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.hide} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={account.hide} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Hidden</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={account.priority} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Priority Account</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={account.priority} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Priority Account</span>
|
||||
</label>
|
||||
</div>
|
||||
<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 preset-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Group</span>
|
||||
<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 preset-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Sort Order</span>
|
||||
<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 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">
|
||||
<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 preset-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>
|
||||
|
||||
Reference in New Issue
Block a user