Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate Event Badges to V3 and implement Core Management pages

Browse Source 
- Completed V3 migration for Event Badge CRUD operations
- Implemented User module V3 logic and editable fields
- Created management routes for Accounts, Sites, Users, and Lookups
- Updated Site Domain logic to use 'fqdn' and show 'access_key'
- Modernized Core Dashboard with navigation cards
- Restored Dexie User table definition
This commit is contained in:
Scott Idem
2026-01-06 13:38:47 -05:00
parent 1b318eeb8b
commit 00e80af3a1
29 changed files with 3800 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/ae_core/ae_core__site.ts
View File

@@ -53,7 +53,8 @@ export interface Site_Domain {
site_id: string;
site_id_random: string;
domain: string;
fqdn: string;
access_key?: null | string;
enable: null | boolean;
enable_from?: null | Date;
@@ -557,7 +558,8 @@ const properties_to_save__site_domain = [
'site_domain_id_random',
'site_id',
'site_id_random',
'domain',
'fqdn',
'access_key',
'enable',
'enable_from',
'enable_to',
@@ -605,7 +607,7 @@ async function _process_generic_props<T extends Record<string, any>>({
const priority = processed_obj.priority ? 1 : 0;
const sort = processed_obj.sort ?? '0';
const updated = processed_obj.updated_on ?? processed_obj.created_on;
const name = processed_obj.name ?? processed_obj.domain ?? '';
const name = processed_obj.name ?? processed_obj.fqdn ?? '';
(processed_obj as any).tmp_sort_1 = `${group}_${priority}_${sort}_${updated}`;
(processed_obj as any).tmp_sort_2 = `${group}_${priority}_${sort}_${name}_${updated}`;

19
src/lib/ae_core/ae_core__user.editable_fields.ts Normal file
View File

@@ -0,0 +1,19 @@
export const editable_fields__user = [
'username',
'name',
'email',
'allow_auth_key',
'super',
'manager',
'administrator',
'verified',
'public',
'enable',
'enable_from',
'enable_to',
'hide',
'priority',
'sort',
'group',
'notes'
];

379
src/lib/ae_core/ae_core__user.ts Normal file
View File

@@ -0,0 +1,379 @@
import type { key_val } from '$lib/stores/ae_stores';
import { api } from '$lib/api/api';
import { db_save_ae_obj_li__ae_obj } from '$lib/ae_core/core__idb_dexie';
import { db_core } from '$lib/ae_core/db_core';
const ae_promises: key_val = {};
export interface User {
id: string;
user_id: string;
user_id_random: string;
username: string;
name: string;
email: string;
allow_auth_key: boolean;
super: boolean;
manager: boolean;
administrator: boolean;
verified: boolean;
public: boolean;
person_id?: string;
person_id_random?: string;
enable: null | boolean;
enable_from?: null | Date;
enable_to?: null | Date;
hide?: null | boolean;
priority?: null | boolean;
sort?: null | number;
group?: null | string;
notes?: null | string;
created_on: Date;
updated_on?: null | Date;
tmp_sort_1?: string;
tmp_sort_2?: string;
}
// Updated 2026-01-06
export async function load_ae_obj_id__user({
api_cfg,
user_id,
view = 'default',
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
user_id: string;
view?: string;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
if (log_lvl) {
console.log(`*** load_ae_obj_id__user() *** user_id=${user_id}`);
}
ae_promises.load__user_obj = await api
.get_ae_obj_v3({
api_cfg,
obj_type: 'user',
obj_id: user_id,
view,
params,
log_lvl
})
.then(async function (result) {
if (result) {
if (try_cache) {
const processed_obj_li = await process_ae_obj__user_props({
obj_li: [result],
log_lvl
});
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'user',
obj_li: processed_obj_li,
properties_to_save: properties_to_save,
log_lvl
});
}
return result;
} else {
return null;
}
});
return ae_promises.load__user_obj;
}
// Updated 2026-01-06
export async function load_ae_obj_li__user({
api_cfg,
qry_str = null,
enabled = 'enabled',
hidden = 'not_hidden',
view = 'default',
limit = 99,
offset = 0,
order_by_li = { username: 'ASC' },
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
qry_str?: string | null;
enabled?: 'enabled' | 'all' | 'not_enabled';
hidden?: 'hidden' | 'all' | 'not_hidden';
view?: string;
limit?: number;
offset?: number;
order_by_li?: Record<string, 'ASC' | 'DESC'>;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
let promise;
if (qry_str) {
const search_query: any = { q: qry_str };
promise = api.search_ae_obj_v3({
api_cfg,
obj_type: 'user',
search_query,
enabled,
hidden,
view,
limit,
offset,
order_by_li,
log_lvl
});
} else {
promise = api.get_ae_obj_li_v3({
api_cfg,
obj_type: 'user',
enabled,
hidden,
view,
limit,
offset,
order_by_li,
log_lvl
});
}
ae_promises.load__user_obj_li = await promise.then(async function (result_li) {
if (result_li) {
if (try_cache) {
const processed_obj_li = await process_ae_obj__user_props({
obj_li: result_li,
log_lvl
});
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'user',
obj_li: processed_obj_li,
properties_to_save: properties_to_save,
log_lvl
});
}
return result_li;
} else {
return [];
}
});
return ae_promises.load__user_obj_li;
}
// Updated 2026-01-06
export async function create_ae_obj__user({
api_cfg,
data_kv,
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
data_kv: key_val;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.create_ae_obj_v3({
api_cfg,
obj_type: 'user',
fields: data_kv,
params,
log_lvl
});
if (result && try_cache) {
const processed_obj_li = await process_ae_obj__user_props({
obj_li: [result],
log_lvl
});
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'user',
obj_li: processed_obj_li,
properties_to_save: properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2026-01-06
export async function update_ae_obj__user({
api_cfg,
user_id,
data_kv,
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
user_id: string;
data_kv: key_val;
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.update_ae_obj_v3({
api_cfg,
obj_type: 'user',
obj_id: user_id,
fields: data_kv,
params,
log_lvl
});
if (result && try_cache) {
const processed_obj_li = await process_ae_obj__user_props({
obj_li: [result],
log_lvl
});
await db_save_ae_obj_li__ae_obj({
db_instance: db_core,
table_name: 'user',
obj_li: processed_obj_li,
properties_to_save: properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2026-01-06
export async function delete_ae_obj_id__user({
api_cfg,
user_id,
method = 'delete',
params = {},
try_cache = true,
log_lvl = 0
}: {
api_cfg: any;
user_id: string;
method?: 'delete' | 'soft_delete' | 'disable' | 'hide';
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
}) {
const result = await api.delete_ae_obj_v3({
api_cfg,
obj_type: 'user',
obj_id: user_id,
method,
params,
log_lvl
});
if (try_cache) {
await db_core.user.delete(user_id);
}
return result;
}
const properties_to_save = [
'id',
'user_id',
'user_id_random',
'username',
'name',
'email',
'allow_auth_key',
'super',
'manager',
'administrator',
'verified',
'public',
'person_id',
'person_id_random',
'enable',
'enable_from',
'enable_to',
'hide',
'priority',
'sort',
'group',
'notes',
'created_on',
'updated_on',
'tmp_sort_1',
'tmp_sort_2'
];
async function _process_generic_props<T extends Record<string, any>>({
obj_li,
obj_type,
log_lvl = 0,
specific_processor
}: {
obj_li: T[];
obj_type: string;
log_lvl?: number;
specific_processor?: (obj: T) => Promise<T> | T;
}): Promise<T[]> {
if (!obj_li || obj_li.length === 0) return [];
const processed_obj_li: T[] = [];
for (const original_obj of obj_li) {
let processed_obj = { ...original_obj };
for (const key in processed_obj) {
if (key.endsWith('_random')) {
const newKey = key.slice(0, -7);
(processed_obj as any)[newKey] = processed_obj[key];
}
}
const randomIdKey = `${obj_type}_id_random`;
if (processed_obj[randomIdKey]) {
(processed_obj as any).id = processed_obj[randomIdKey];
}
const group = processed_obj.group ?? '0';
const priority = processed_obj.priority ? 1 : 0;
const sort = processed_obj.sort ?? '0';
const updated = processed_obj.updated_on ?? processed_obj.created_on;
const name = processed_obj.username ?? processed_obj.name ?? '';
(processed_obj as any).tmp_sort_1 = `${group}_${priority}_${sort}_${updated}`;
(processed_obj as any).tmp_sort_2 = `${group}_${priority}_${sort}_${name}_${updated}`;
if (specific_processor) {
processed_obj = await Promise.resolve(specific_processor(processed_obj));
}
processed_obj_li.push(processed_obj as T);
}
return processed_obj_li;
}
export async function process_ae_obj__user_props({
obj_li,
log_lvl = 0
}: {
obj_li: any[];
log_lvl?: number;
}) {
return _process_generic_props({
obj_li,
obj_type: 'user',
log_lvl
});
}

41
src/lib/ae_core/db_core.ts
View File

@@ -132,14 +132,47 @@ export interface Person {
address_country_alpha_2_code?: null | string; // ISO 3166-1 alpha-2 country code
}
// Updated 2026-01-06
export interface User {
id: string;
user_id: string;
user_id_random: string;
username: string;
name: string;
email: string;
allow_auth_key: boolean;
super: boolean;
manager: boolean;
administrator: boolean;
verified: boolean;
public: boolean;
person_id?: string;
person_id_random?: string;
enable: null | boolean;
hide?: null | boolean;
priority?: null | boolean;
sort?: null | number;
group?: null | string;
notes?: null | string;
created_on: Date;
updated_on?: null | Date;
tmp_sort_1?: string;
tmp_sort_2?: string;
}
// Updated 2026-01-06
export class MySubClassedDexie extends Dexie {
file!: Table<File>;
person!: Table<Person>;
user!: Table<User>;
account!: Table<any>;
site!: Table<any>;
site_domain!: Table<any>;
// user!: Table<User>;
constructor() {
super('ae_core_db');
@@ -165,6 +198,12 @@ export class MySubClassedDexie extends Dexie {
agree,
enable, hide, priority, sort, group, created_on, updated_on`,
user: `
id, user_id, user_id_random,
username, name, email,
super, manager, administrator,
enable, hide, priority, sort, group, created_on, updated_on`,
account: `
id, account_id, account_id_random,
code, name,

46
src/lib/ae_events/ae_events__event_badge.editable_fields.ts Normal file
View File

@@ -0,0 +1,46 @@
export const editable_fields__event_badge = [
'event_badge_template_id',
'event_badge_template_id_random',
'pronouns',
'informal_name',
'title_names',
'given_name',
'middle_name',
'family_name',
'designations',
'professional_title',
'professional_title_override',
'full_name_override',
'affiliations',
'affiliations_override',
'email',
'email_override',
'address_line_1',
'address_line_2',
'address_line_3',
'city',
'country_subdivision_code',
'state_province',
'state_province_abb',
'postal_code',
'country_alpha_2_code',
'country',
'location_override',
'badge_type',
'badge_type_code',
'badge_type_override',
'badge_type_code_override',
'external_event_id',
'external_id',
'external_person_id',
'alert',
'enable',
'hide',
'priority',
'sort',
'group',
'notes',
'print_count',
'print_first_datetime',
'print_last_datetime'
];

177
src/lib/ae_events/ae_events__event_badge.ts
View File

@@ -121,7 +121,7 @@ export async function load_ae_obj_li__event_badge({
ae_promises.load__event_badge_obj_li = await api
.get_ae_obj_li_v3({
api_cfg: api_cfg,
api_cfg,
obj_type: 'event_badge',
for_obj_type: 'event',
for_obj_id: event_id,
@@ -182,7 +182,7 @@ export async function load_ae_obj_li__event_badge({
return ae_promises.load__event_badge_obj_li;
}
// Updated 2025-10-06
// Updated 2026-01-06
export async function create_ae_obj__event_badge({
api_cfg,
event_id,
@@ -201,49 +201,39 @@ export async function create_ae_obj__event_badge({
if (log_lvl) {
console.log(`*** create_ae_obj__event_badge() *** event_id=${event_id}`);
}
ae_promises.create__event_badge = await api
.create_ae_obj_crud({
api_cfg,
obj_type: 'event_badge',
fields: {
event_id_random: event_id,
...data_kv
},
key: api_cfg.api_crud_super_key,
params,
return_obj: true,
const result = await api.create_nested_obj_v3({
api_cfg,
parent_type: 'event',
parent_id: event_id,
child_type: 'event_badge',
fields: data_kv,
params,
log_lvl
});
if (result && try_cache) {
const processed_obj_li = await process_ae_obj__event_badge_props({
obj_li: [result],
event_id,
log_lvl
})
.then(async function (event_badge_obj_create_result) {
if (event_badge_obj_create_result) {
if (try_cache) {
const processed_obj_li = await process_ae_obj__event_badge_props({
obj_li: [event_badge_obj_create_result],
event_id,
log_lvl
});
db_save_ae_obj_li__ae_obj({
db_instance: db_events,
table_name: 'badge',
obj_li: processed_obj_li,
properties_to_save,
log_lvl
});
}
return event_badge_obj_create_result;
} else {
return null;
}
})
.catch(function (error: any) {
console.log('No results returned or failed.', error);
});
return ae_promises.create__event_badge;
await db_save_ae_obj_li__ae_obj({
db_instance: db_events,
table_name: 'badge',
obj_li: processed_obj_li,
properties_to_save,
log_lvl
});
}
return result;
}
// Updated 2025-10-06
// Updated 2026-01-06
export async function delete_ae_obj_id__event_badge({
api_cfg,
event_id,
event_badge_id,
method = 'delete',
params = {},
@@ -251,8 +241,9 @@ export async function delete_ae_obj_id__event_badge({
log_lvl = 0
}: {
api_cfg: any;
event_id: string;
event_badge_id: string;
method?: string;
method?: 'delete' | 'soft_delete' | 'disable' | 'hide';
params?: key_val;
try_cache?: boolean;
log_lvl?: number;
@@ -260,35 +251,29 @@ export async function delete_ae_obj_id__event_badge({
if (log_lvl) {
console.log(`*** delete_ae_obj_id__event_badge() *** event_badge_id=${event_badge_id}`);
}
ae_promises.delete__event_badge_obj = await api
.delete_ae_obj_id_crud({
api_cfg,
obj_type: 'event_badge',
obj_id: event_badge_id,
key: api_cfg.api_crud_super_key,
params,
method,
log_lvl
})
.catch(function (error: any) {
console.log('No results returned or failed.', error);
})
.finally(function () {
if (try_cache) {
if (log_lvl) {
console.log(
`Attempting to remove IDB entry for event_badge_id=${event_badge_id}`
);
}
db_events.badge.delete(event_badge_id);
}
});
return ae_promises.delete__event_badge_obj;
const result = await api.delete_nested_ae_obj_v3({
api_cfg,
parent_type: 'event',
parent_id: event_id,
child_type: 'event_badge',
child_id: event_badge_id,
method,
params,
log_lvl
});
if (try_cache) {
await db_events.badge.delete(event_badge_id);
}
return result;
}
// Updated 2025-10-06
// Updated 2026-01-06
export async function update_ae_obj__event_badge({
api_cfg,
event_id,
event_badge_id,
data_kv,
params = {},
@@ -296,6 +281,7 @@ export async function update_ae_obj__event_badge({
log_lvl = 0
}: {
api_cfg: any;
event_id: string;
event_badge_id: string;
data_kv: key_val;
params?: key_val;
@@ -305,41 +291,34 @@ export async function update_ae_obj__event_badge({
if (log_lvl) {
console.log(`*** update_ae_obj__event_badge() *** event_badge_id=${event_badge_id}`);
}
ae_promises.update__event_badge_obj = await api
.update_ae_obj_id_crud({
api_cfg,
obj_type: 'event_badge',
obj_id: event_badge_id,
fields: data_kv,
key: api_cfg.api_crud_super_key,
params,
return_obj: true,
const result = await api.update_nested_obj_v3({
api_cfg,
parent_type: 'event',
parent_id: event_id,
child_type: 'event_badge',
child_id: event_badge_id,
fields: data_kv,
params,
log_lvl
});
if (result && try_cache) {
const processed_obj_li = await process_ae_obj__event_badge_props({
obj_li: [result],
event_id,
log_lvl
})
.then(async function (event_badge_obj_update_result) {
if (event_badge_obj_update_result) {
if (try_cache) {
const processed_obj_li = await process_ae_obj__event_badge_props({
obj_li: [event_badge_obj_update_result],
log_lvl
});
db_save_ae_obj_li__ae_obj({
db_instance: db_events,
table_name: 'badge',
obj_li: processed_obj_li,
properties_to_save,
log_lvl
});
}
return event_badge_obj_update_result;
} else {
return null;
}
})
.catch(function (error: any) {
console.log('No results returned or failed.', error);
});
return ae_promises.update__event_badge_obj;
await db_save_ae_obj_li__ae_obj({
db_instance: db_events,
table_name: 'badge',
obj_li: processed_obj_li,
properties_to_save,
log_lvl
});
}
return result;
}
// Is this needed?
@@ -751,4 +730,4 @@ export async function process_ae_obj__event_badge_props({
return obj;
}
});
}
}

230
src/routes/core/+page.svelte
View File

@@ -13,6 +13,7 @@
// import { liveQuery } from "dexie";
import { core_func } from '$lib/ae_core/ae_core_functions';
import { Building, Globe, Users, ShieldCheck, List, Plus } from 'lucide-svelte';
// import { db_core } from "$lib/db_core";
// import { db_events } from "$lib/db_events";
import {
@@ -45,128 +46,127 @@
// let search_submit_results: Promise<any>|key_val;
</script>
<section class="ae_core md:container mx-auto">
<h2 class="h3">Æ Core for {$ae_loc.account_name ?? 'Æ loading...'}</h2>
<section class="ae_core md:container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
<h2 class="h2">Æ Core Management</h2>
<div class="text-right">
<p class="text-sm opacity-60">Active Account</p>
<p class="font-bold">{$ae_loc.account_name ?? 'Loading...'}</p>
</div>
</header>
<button
type="button"
onclick={() => {
console.log('Edit the POC person for the session.');
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Account Management Card -->
<div class="card p-4 space-y-4 variant-soft-primary">
<div class="flex items-center gap-2">
<Building size={20} />
<h3 class="h4">Accounts</h3>
</div>
<p class="text-sm opacity-80 text-balance">Manage client accounts and high-level system settings.</p>
<button class="btn variant-filled-primary w-full" onclick={() => goto('/core/accounts')}>
Manage Accounts
</button>
</div>
// let params = {
// qry__limit: $ae_loc.person.qry_limit__people,
// }
<!-- Site Management Card -->
<div class="card p-4 space-y-4 variant-soft-secondary">
<div class="flex items-center gap-2">
<Globe size={20} />
<h3 class="h4">Sites</h3>
</div>
<p class="text-sm opacity-80 text-balance">Configure sites and domains associated with the active account.</p>
<button class="btn variant-filled-secondary w-full" onclick={() => goto('/core/sites')}>
Manage Sites
</button>
</div>
// $slct.person_obj_li = await core_func.load_ae_obj_li__person({api_cfg: $ae_api, account_id: $slct.account_id, params: params});
<!-- User Management Card -->
<div class="card p-4 space-y-4 variant-soft-error">
<div class="flex items-center gap-2">
<ShieldCheck size={20} />
<h3 class="h4">Users</h3>
</div>
<p class="text-sm opacity-80 text-balance">Manage system access, permissions, and user credentials.</p>
<button class="btn variant-filled-error w-full" onclick={() => goto('/core/users')}>
Manage Users
</button>
</div>
let person_results = core_func
.load_ae_obj_li__person({
api_cfg: $ae_api,
for_obj_type: 'account',
for_obj_id: $slct.account_id,
limit: $ae_loc.person.qry_limit__people,
// params: params,
log_lvl: 1
})
.then(function (load_results) {
console.log(`Loaded person_obj_li:`, load_results);
// We need to make this ready for the select option list. Convert the list to a key value pair with the person_id_random as the key. We also need to set the option text value to: full_name (primary_email)
if (load_results) {
$slct.person_id_random_li = load_results;
person_id_random_li = [];
let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
for (let i = 0; i < $slct.person_id_random_li.length; i++) {
let person_obj = $slct.person_id_random_li[i];
let person_id_random = person_obj.person_id_random;
tmp_li.push(person_id_random);
<!-- Person Management Card -->
<div class="card p-4 space-y-4 variant-soft-warning">
<div class="flex items-center gap-2">
<Users size={20} />
<h3 class="h4">People</h3>
</div>
<p class="text-sm opacity-80 text-balance">View and manage person records and their associated user accounts.</p>
<div class="flex gap-2">
<button
type="button"
onclick={() => {
let person_results = core_func
.load_ae_obj_li__person({
api_cfg: $ae_api,
for_obj_type: 'account',
for_obj_id: $slct.account_id,
limit: $ae_loc.person.qry_limit__people,
log_lvl: 1
})
.then(function (load_results) {
if (load_results) {
$slct.person_id_random_li = load_results;
person_id_random_li = load_results.map((p: any) => p.person_id_random);
}
return load_results;
})
.finally(() => {
$ae_sess.person.show_report__person_li = true;
});
}}
class="btn variant-filled-warning flex-1"
>
List People
</button>
<button
type="button"
onclick={async () => {
if (!confirm(`Add a new person to ${$ae_loc.account_name}?`)) return;
let person_data = {
account_id_random: $slct.account_id,
source_code: 'manual:SK-core',
given_name: 'New',
family_name: 'Person',
enable: true
};
let new_person_obj = await core_func.create_ae_obj__person({
api_cfg: $ae_api,
data_kv: person_data,
log_lvl: 1
});
if (new_person_obj && confirm(`Person created. View details?`)) {
goto(`/core/person/${new_person_obj.person_id_random}`);
}
person_id_random_li = tmp_li;
}}
class="btn variant-filled-warning btn-icon"
class:hidden={!$ae_loc.edit_mode}
>
<Plus size={16} />
</button>
</div>
</div>
// $slct.person_id_random_li = load_results.map((person_obj) => person_obj.person_id_random);
// let person_obj_li = load_results;
// let person_obj_kv = {};
// person_obj_kv[''] = '-- Select a person --';
// person_obj_li.forEach((person_obj) => {
// let option_text = `${person_obj.full_name} (${person_obj.primary_email})`;
// person_obj_kv[person_obj.person_id_random] = option_text;
// });
// $slct.person_obj_kv = person_obj_kv;
}
// $slct.person_obj_kv = $slct.person_obj_kv;
// console.log(`$slct.person_obj_kv = `, $slct.person_obj_kv);
<!-- Lookups Card -->
<div class="card p-4 space-y-4 variant-soft-surface">
<div class="flex items-center gap-2">
<List size={20} />
<h3 class="h4">Lookups</h3>
</div>
<p class="text-sm opacity-80 text-balance">View system lookup tables (countries, time zones, etc).</p>
<button class="btn variant-filled-surface w-full" onclick={() => goto('/core/lookups')}>
View Lookups
</button>
</div>
</div>
return load_results;
})
.finally(() => {
console.log(`person_id_random_li:`, person_id_random_li);
$ae_sess.person.show_report__person_li = true;
});
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-user mx-1"></span>
List People
</button>
<button
type="button"
onclick={async () => {
console.log('Add Person');
if (
!confirm(
`Add a new person to the account?\n${$ae_loc.account_name}\nID: ${$slct.account_id}`
)
) {
return;
}
let person_data = {
account_id_random: $slct.account_id,
// user_id_random: user_obj.user_id_random,
source_code: 'manual:SK-core',
given_name: 'New',
family_name: 'Person',
// professional_title: 'Temp Prof Title',
// affiliations: 'Temp Org',
// primary_email: 'tmp+person@oneskyit.com',
// allow_auth_key: false,
auth_key: Math.floor(Math.random() * 90000000) + 10000000,
// Random number between 100000 and 999999
passcode: Math.floor(Math.random() * 900000) + 100000,
enable: true
};
let new_person_obj = await core_func.create_ae_obj__person({
api_cfg: $ae_api,
// user_id: $ae_loc.user_id,
data_kv: person_data,
log_lvl: 1
});
console.log('new_person_obj:', new_person_obj);
if (
confirm(
`Person created:\n${new_person_obj.full_name} (${new_person_obj.primary_email ?? 'no email'})\nID: ${new_person_obj.person_id_random}\n\nView this person?`
)
) {
// window.location.reload();
// invalidateAll();
goto(`/core/person/${new_person_obj.person_id_random}`, { replaceState: true });
// pushState(`/core/person/${new_person_obj.person_id_random}`, { replace: true });
// replaceState(`/core/person/${new_person_obj.person_id_random}`);
}
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
>
<span class="fas fa-plus mx-1"></span>
Add Person
</button>
<!-- Show people for this account -->
{#if $ae_sess.person.show_report__person_li && person_id_random_li?.length > 0}

130
src/routes/core/accounts/+page.svelte Normal file
View File

@@ -0,0 +1,130 @@
<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 { FileText, Plus, Search, Building } from 'lucide-svelte';
let account_li: any[] = $state([]);
let loading = $state(true);
let qry_enabled = $state('all');
let qry_hidden = $state('all');
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();
});
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();
}
}
</script>
<div class="container mx-auto p-4 space-y-4">
<header class="flex justify-between items-center">
<div class="flex items-center gap-2">
<Building size={24} />
<h1 class="h2">Account Management</h1>
</div>
<button class="btn variant-filled-primary" onclick={handle_add_account}>
<Plus size={16} class="mr-2" /> Add Account
</button>
</header>
<div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
<label class="label">
<span>Enabled Status</span>
<select class="select" bind:value={qry_enabled} onchange={load_accounts}>
<option value="all">All</option>
<option value="enabled">Enabled Only</option>
<option value="not_enabled">Disabled Only</option>
</select>
</label>
<label class="label">
<span>Hidden Status</span>
<select class="select" bind:value={qry_hidden} onchange={load_accounts}>
<option value="all">All</option>
<option value="not_hidden">Not Hidden Only</option>
<option value="hidden">Hidden Only</option>
</select>
</label>
<button class="btn variant-filled-secondary" onclick={load_accounts} disabled={loading}>
<Search size={16} class="mr-2" /> Refresh
</button>
</div>
{#if loading}
<div class="flex justify-center p-12">
<div class="placeholder animate-pulse w-full h-32"></div>
</div>
{:else if account_li.length === 0}
<div class="card p-8 text-center">
<p>No accounts found matching your filters.</p>
</div>
{:else}
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Created</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#each account_li as acct}
<tr>
<td>{acct.name}</td>
<td><code class="code">{acct.code || '--'}</code></td>
<td>{new Date(acct.created_on).toLocaleDateString()}</td>
<td>
{#if acct.enable}
<span class="badge variant-filled-success">Enabled</span>
{:else}
<span class="badge variant-filled-error">Disabled</span>
{/if}
{#if acct.hide}
<span class="badge variant-filled-warning">Hidden</span>
{/if}
</td>
<td class="text-right">
<button class="btn btn-sm variant-soft-primary" onclick={() => goto(`/core/accounts/${acct.account_id_random}`)}>
Manage
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
</div>

14
src/routes/core/accounts/+page.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { PageLoad } from './$types';
import { load_ae_obj_li__account } from '$lib/ae_core/ae_core__account';
import { get } from 'svelte/store';
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.
};
};

149
src/routes/core/accounts/[account_id]/+page.svelte Normal file
View File

@@ -0,0 +1,149 @@
<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 { Save, Trash2, ArrowLeft, Building } from 'lucide-svelte';
let account_id = $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;
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
return;
}
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
});
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
});
if (result) {
goto('/core/accounts');
}
}
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<div class="flex items-center gap-4">
<button class="btn btn-sm variant-soft" onclick={() => goto('/core/accounts')}>
<ArrowLeft size={16} />
</button>
<div class="flex items-center gap-2">
<Building size={24} />
<h1 class="h2">{account?.name ?? 'Loading Account...'}</h1>
</div>
</div>
<div class="flex gap-2">
<button class="btn variant-filled-error" 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>
</div>
</header>
{#if loading}
<div class="placeholder animate-pulse w-full h-64"></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>
<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">
<input class="checkbox" type="checkbox" bind:checked={account.enable} />
<p>Enabled</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={account.hide} />
<p>Hidden</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={account.priority} />
<p>Priority Account</p>
</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>
<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>
</div>
{/if}
</div>

100
src/routes/core/lookups/+page.svelte Normal file
View File

@@ -0,0 +1,100 @@
<script lang="ts">
import { onMount } from 'svelte';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { List, Globe, Clock, MapPin } from 'lucide-svelte';
import { api } from '$lib/api/api';
let loading = $state(true);
let lookups: any = $state({
countries: [],
time_zones: [],
subdivisions: []
});
async function load_lookups() {
loading = true;
// Using existing generic lookup loaders if available, or raw API calls
const [countries, time_zones] = await Promise.all([
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 0 }),
api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'time_zone', log_lvl: 0 })
]);
lookups.countries = countries || [];
lookups.time_zones = time_zones || [];
loading = false;
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
return;
}
load_lookups();
});
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex items-center gap-2">
<List size={24} />
<h1 class="h2">System Lookups</h1>
</header>
{#if loading}
<div class="placeholder animate-pulse w-full h-64"></div>
{:else}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Countries -->
<div class="card p-4 space-y-4">
<header class="flex items-center gap-2 border-b border-surface-500/30 pb-2">
<Globe size={18} />
<h3 class="h4">Countries</h3>
</header>
<div class="table-container max-h-[400px] overflow-auto">
<table class="table table-compact">
<thead>
<tr>
<th>Name</th>
<th>ISO Alpha-2</th>
</tr>
</thead>
<tbody>
{#each lookups.countries as c}
<tr>
<td>{c.name}</td>
<td><code class="code">{c.alpha_2_code}</code></td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
<!-- Time Zones -->
<div class="card p-4 space-y-4">
<header class="flex items-center gap-2 border-b border-surface-500/30 pb-2">
<Clock size={18} />
<h3 class="h4">Time Zones</h3>
</header>
<div class="table-container max-h-[400px] overflow-auto">
<table class="table table-compact">
<thead>
<tr>
<th>Zone Name</th>
<th>Offset</th>
</tr>
</thead>
<tbody>
{#each lookups.time_zones as tz}
<tr>
<td>{tz.name}</td>
<td>{tz.offset_seconds / 3600}h</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
{/if}
</div>

133
src/routes/core/sites/+page.svelte Normal file
View File

@@ -0,0 +1,133 @@
<script lang="ts">
import { onMount } from 'svelte';
import { load_ae_obj_li__site, create_ae_obj__site } from '$lib/ae_core/ae_core__site';
import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Plus, Search, Globe } from 'lucide-svelte';
let site_li: any[] = $state([]);
let loading = $state(true);
let qry_enabled = $state('all');
let qry_hidden = $state('all');
async function load_sites() {
if (!$ae_loc.account_id) return;
loading = true;
site_li = await load_ae_obj_li__site({
api_cfg: $ae_api,
for_obj_id: $ae_loc.account_id,
enabled: qry_enabled as any,
hidden: qry_hidden as any,
log_lvl: 1
});
loading = false;
}
onMount(() => {
load_sites();
});
async function handle_add_site() {
const name = prompt('Enter new site name:');
if (!name) return;
const code = prompt('Enter site code (optional):');
const new_site = await create_ae_obj__site({
api_cfg: $ae_api,
account_id: $ae_loc.account_id,
data_kv: {
name,
code: code || undefined,
enable: true
},
log_lvl: 1
});
if (new_site) {
load_sites();
}
}
</script>
<div class="container mx-auto p-4 space-y-4">
<header class="flex justify-between items-center">
<div class="flex items-center gap-2">
<Globe size={24} />
<h1 class="h2">Site Management</h1>
</div>
<button class="btn variant-filled-primary" onclick={handle_add_site}>
<Plus size={16} class="mr-2" /> Add Site
</button>
</header>
<div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
<label class="label">
<span>Enabled Status</span>
<select class="select" bind:value={qry_enabled} onchange={load_sites}>
<option value="all">All</option>
<option value="enabled">Enabled Only</option>
<option value="not_enabled">Disabled Only</option>
</select>
</label>
<label class="label">
<span>Hidden Status</span>
<select class="select" bind:value={qry_hidden} onchange={load_sites}>
<option value="all">All</option>
<option value="not_hidden">Not Hidden Only</option>
<option value="hidden">Hidden Only</option>
</select>
</label>
<button class="btn variant-filled-secondary" onclick={load_sites} disabled={loading}>
<Search size={16} class="mr-2" /> Refresh
</button>
</div>
{#if loading}
<div class="flex justify-center p-12">
<div class="placeholder animate-pulse w-full h-32"></div>
</div>
{:else if site_li.length === 0}
<div class="card p-8 text-center">
<p>No sites found for this account matching your filters.</p>
</div>
{:else}
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Created</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
{#each site_li as site}
<tr>
<td>{site.name}</td>
<td><code class="code">{site.code || '--'}</code></td>
<td>{new Date(site.created_on).toLocaleDateString()}</td>
<td>
{#if site.enable}
<span class="badge variant-filled-success">Enabled</span>
{:else}
<span class="badge variant-filled-error">Disabled</span>
{/if}
{#if site.hide}
<span class="badge variant-filled-warning">Hidden</span>
{/if}
</td>
<td class="text-right">
<button class="btn btn-sm variant-soft-primary" onclick={() => goto(`/core/sites/${site.site_id_random}`)}>
Manage
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
</div>

5
src/routes/core/sites/+page.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ parent }) => {
return {};
};

223
src/routes/core/sites/[site_id]/+page.svelte Normal file
View File

@@ -0,0 +1,223 @@
<script lang="ts">
import { onMount } from 'svelte';
import { page } from '$app/stores';
import {
load_ae_obj_id__site,
update_ae_obj__site,
delete_ae_obj_id__site,
load_ae_obj_li__site_domain,
create_ae_obj__site_domain,
update_ae_obj__site_domain,
delete_ae_obj_id__site_domain
} from '$lib/ae_core/ae_core__site';
import { editable_fields__site } from '$lib/ae_core/ae_core__site.editable_fields';
import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink } from 'lucide-svelte';
let site_id = $page.params.site_id;
let site: any = $state(null);
let domain_li: any[] = $state([]);
let loading = $state(true);
let saving = $state(false);
async function load_data() {
loading = true;
site = await load_ae_obj_id__site({
api_cfg: $ae_api,
site_id,
log_lvl: 1
});
domain_li = await load_ae_obj_li__site_domain({
api_cfg: $ae_api,
site_id,
enabled: 'all',
hidden: 'all',
log_lvl: 1
});
loading = false;
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
return;
}
load_data();
});
async function handle_save_site() {
saving = true;
const data_kv: any = {};
editable_fields__site.forEach(field => {
if (site[field] !== undefined) {
data_kv[field] = site[field];
}
});
await update_ae_obj__site({
api_cfg: $ae_api,
site_id,
data_kv,
log_lvl: 1
});
saving = false;
}
async function handle_add_domain() {
const fqdn = prompt('Enter new domain (e.g. example.com):');
if (!fqdn) return;
await create_ae_obj__site_domain({
api_cfg: $ae_api,
site_id,
data_kv: { fqdn, enable: true },
log_lvl: 1
});
load_data();
}
async function handle_toggle_domain(dom: any) {
await update_ae_obj__site_domain({
api_cfg: $ae_api,
site_id,
site_domain_id: dom.site_domain_id_random,
data_kv: { enable: !dom.enable },
log_lvl: 1
});
load_data();
}
async function handle_delete_domain(dom: any) {
if (!confirm(`Remove domain ${dom.fqdn}?`)) return;
await delete_ae_obj_id__site_domain({
api_cfg: $ae_api,
site_id,
site_domain_id: dom.site_domain_id_random,
method: 'delete',
log_lvl: 1
});
load_data();
}
</script>
<div class="container mx-auto p-4 space-y-6">
<header class="flex justify-between items-center">
<div class="flex items-center gap-4">
<button class="btn btn-sm variant-soft" onclick={() => goto('/core/sites')}>
<ArrowLeft size={16} />
</button>
<div class="flex items-center gap-2">
<Globe size={24} />
<h1 class="h2">{site?.name ?? 'Loading Site...'}</h1>
</div>
</div>
<button class="btn variant-filled-primary" onclick={handle_save_site} disabled={loading || saving}>
<Save size={16} class="mr-2" /> Save Site Changes
</button>
</header>
{#if loading}
<div class="placeholder animate-pulse w-full h-64"></div>
{:else if site}
<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-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Site Configuration</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="label">
<span>Site Name</span>
<input class="input" type="text" bind:value={site.name} />
</label>
<label class="label">
<span>Site Code</span>
<input class="input" type="text" bind:value={site.code} />
</label>
<label class="label md:col-span-2">
<span>Tagline</span>
<input class="input" type="text" bind:value={site.tagline} />
</label>
<label class="label md:col-span-2">
<span>Description</span>
<textarea class="textarea" rows="2" bind:value={site.description}></textarea>
</label>
</div>
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">Access Control</h3>
<div class="flex flex-col gap-4">
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
<p>Restrict Access</p>
</label>
{#if site.restrict_access}
<label class="label">
<span>Access Key</span>
<input class="input" type="text" bind:value={site.access_key} />
</label>
{/if}
</div>
</div>
</div>
<!-- Domains Management -->
<div class="space-y-6">
<div class="card p-4 space-y-4">
<header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
<h3 class="h4">Site Domains</h3>
<button class="btn btn-sm variant-filled-secondary" onclick={handle_add_domain}>
<Plus size={14} />
</button>
</header>
{#if domain_li.length === 0}
<p class="text-sm opacity-60 text-center py-4">No domains configured.</p>
{:else}
<div class="space-y-2">
{#each domain_li as dom}
<div class="card p-3 variant-soft flex justify-between items-center">
<div class="flex flex-col">
<span class="font-medium flex items-center gap-1">
{dom.fqdn}
<a href="https://{dom.fqdn}" target="_blank" class="opacity-50 hover:opacity-100">
<ExternalLink size={12} />
</a>
</span>
<span class="text-xs opacity-60">
Key: <code class="code text-[10px]">{dom.access_key || '--'}</code> | {dom.enable ? 'Active' : 'Disabled'}
</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">
<Save size={14} />
</button>
<button class="btn btn-icon btn-sm variant-soft-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
<Trash2 size={14} />
</button>
</div>
</div>
{/each}
</div>
{/if}
</div>
<div class="card p-4 space-y-4">
<h3 class="h4 border-b border-surface-500/30 pb-2">System Status</h3>
<div class="space-y-4">
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={site.enable} />
<p>Site Enabled</p>
</label>
<label class="flex items-center space-x-2">
<input class="checkbox" type="checkbox" bind:checked={site.hide} />
<p>Hidden</p>
</label>
</div>
</div>
</div>
</div>
{/if}
</div>

113
src/routes/core/users/+page.svelte Normal file
View File

@@ -0,0 +1,113 @@
<script lang="ts">
import { onMount } from 'svelte';
import { load_ae_obj_li__user, create_ae_obj__user } from '$lib/ae_core/ae_core__user';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { goto } from '$app/navigation';
import { Plus, Search, User, ShieldCheck, Mail } from 'lucide-svelte';
let user_li: any[] = $state([]);
let loading = $state(true);
let qry_str = $state('');
let qry_enabled = $state('all');
async function load_users() {
loading = true;
user_li = await load_ae_obj_li__user({
api_cfg: $ae_api,
qry_str: qry_str || null,
enabled: qry_enabled as any,
log_lvl: 1
});
loading = false;
}
onMount(() => {
if (!$ae_loc.manager_access) {
goto('/core');
return;
}
load_users();
});
async function handle_add_user() {
const username = prompt('Enter new username:');
if (!username) return;
const email = prompt('Enter email address:');
await create_ae_obj__user({
api_cfg: $ae_api,
data_kv: { username, email, enable: true },
log_lvl: 1
});
load_users();
}
</script>
<div class="container mx-auto p-4 space-y-4">
<header class="flex justify-between items-center">
<div class="flex items-center gap-2">
<ShieldCheck size={24} />
<h1 class="h2">User Management</h1>
</div>
<button class="btn variant-filled-primary" onclick={handle_add_user}>
<Plus size={16} class="mr-2" /> Add User
</button>
</header>
<div class="card p-4 variant-soft flex flex-wrap gap-4 items-end">
<label class="label flex-1">
<span>Search Username or Email</span>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
<div class="input-group-shim"><Search size={16} /></div>
<input type="search" bind:value={qry_str} placeholder="Search..." onkeydown={(e) => e.key === 'Enter' && load_users()} />
<button class="variant-filled-secondary" onclick={load_users}>Go</button>
</div>
</label>
<label class="label">
<span>Status</span>
<select class="select w-32" bind:value={qry_enabled} onchange={load_users}>
<option value="all">All</option>
<option value="enabled">Enabled</option>
<option value="not_enabled">Disabled</option>
</select>
</label>
</div>
{#if loading}
<div class="placeholder animate-pulse w-full h-64"></div>
{:else if user_li.length === 0}
<p class="text-center py-12 opacity-60">No users found.</p>
{:else}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{#each user_li as user}
<div class="card p-4 space-y-3 variant-soft flex flex-col justify-between">
<div class="space-y-2">
<header class="flex justify-between items-start">
<div class="flex items-center gap-2">
<div class="avatar variant-filled-surface w-10 h-10 flex items-center justify-center rounded-full">
<User size={20} />
</div>
<div>
<p class="font-bold">{user.username}</p>
<p class="text-xs opacity-60">{user.name || '--'}</p>
</div>
</div>
{#if user.super}
<span class="badge variant-filled-error">Super</span>
{:else if user.manager}
<span class="badge variant-filled-warning">Manager</span>
{/if}
</header>
<div class="flex items-center gap-2 text-sm opacity-80">
<Mail size={14} />
<span>{user.email || '--'}</span>
</div>
</div>
<button class="btn btn-sm variant-filled-primary w-full" onclick={() => goto(`/core/users/${user.user_id_random}`)}>
Edit User
</button>
</div>
{/each}
</div>
{/if}
</div>