From f87ab1025114ea23900b7d044c8807f0a0248e58 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 27 Mar 2026 09:59:46 -0400
Subject: [PATCH] feat(badges): add manual one-off badge create modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two-step creation: POST event_person first, then event_badge linked to it.
Badge create route (event_person parent) pending backend fix — frontend is
ready and passing event_person_id + event_badge_template_id in payload.

- ae_events__event_person.ts: new create function (nested under event)
- ae_events_functions.ts: export create_ae_obj__event_person
- ae_comp__badge_create_form.svelte: modal form with live name preview,
  conditional display-name override, template selector (auto-selects when
  only one template), badge_type_code_li derived from selected template's
  badge_type_list JSON, two-step submit status labels
- +page.svelte: load template list via liveQuery, wire Create Badge button
  (edit_mode only), native <dialog> modal with backdrop, remote-first
  refresh on success

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/ae_events/ae_events__event_person.ts  |  42 +++
 src/lib/ae_events/ae_events_functions.ts      |   5 +
 .../[event_id]/(badges)/badges/+page.svelte   |  80 ++++-
 .../badges/ae_comp__badge_create_form.svelte  | 300 +++++++++++++-----
 4 files changed, 344 insertions(+), 83 deletions(-)
 create mode 100644 src/lib/ae_events/ae_events__event_person.ts

diff --git a/src/lib/ae_events/ae_events__event_person.ts b/src/lib/ae_events/ae_events__event_person.ts
new file mode 100644
index 00000000..5fe37495
--- /dev/null
+++ b/src/lib/ae_events/ae_events__event_person.ts
@@ -0,0 +1,42 @@
+import type { key_val } from '$lib/stores/ae_stores';
+import { api } from '$lib/api/api';
+
+const ae_promises: key_val = {};
+
+/**
+ * create_ae_obj__event_person
+ * Creates a new event_person record linked to an event.
+ * Used as the first step of manual one-off badge creation.
+ * The returned event_person_id is then passed to create_ae_obj__event_badge.
+ */
+export async function create_ae_obj__event_person({
+    api_cfg,
+    event_id,
+    data_kv,
+    params = {},
+    log_lvl = 0
+}: {
+    api_cfg: any;
+    event_id: string;
+    data_kv: key_val;
+    params?: key_val;
+    log_lvl?: number;
+}): Promise<any | null> {
+    if (log_lvl) {
+        console.log(
+            `*** create_ae_obj__event_person() *** event_id=${event_id}`
+        );
+    }
+
+    ae_promises.create__event_person = await api.create_nested_obj({
+        api_cfg,
+        parent_type: 'event',
+        parent_id: event_id,
+        child_type: 'event_person',
+        fields: data_kv,
+        params,
+        log_lvl
+    });
+
+    return ae_promises.create__event_person;
+}
diff --git a/src/lib/ae_events/ae_events_functions.ts b/src/lib/ae_events/ae_events_functions.ts
index 1242e38b..ab7a991e 100644
--- a/src/lib/ae_events/ae_events_functions.ts
+++ b/src/lib/ae_events/ae_events_functions.ts
@@ -33,6 +33,8 @@ import * as event_presenter from '$lib/ae_events/ae_events__event_presenter';
 
 import * as event_badge from '$lib/ae_events/ae_events__event_badge';
 
+import { create_ae_obj__event_person } from '$lib/ae_events/ae_events__event_person';
+
 import * as event_badge_template from '$lib/ae_events/ae_events__event_badge_template';
 
 const export_obj = {
@@ -46,6 +48,9 @@ const export_obj = {
     update_ae_obj__event: event.update_ae_obj__event,
     sync_config__event_pres_mgmt: event.sync_config__event_pres_mgmt,
 
+    // Event Person
+    create_ae_obj__event_person: create_ae_obj__event_person,
+
     // Event Badges
     load_ae_obj_id__event_badge: event_badge.load_ae_obj_id__event_badge,
     load_ae_obj_li__event_badge: event_badge.load_ae_obj_li__event_badge,
diff --git a/src/routes/events/[event_id]/(badges)/badges/+page.svelte b/src/routes/events/[event_id]/(badges)/badges/+page.svelte
index 0e7576ab..972a0ce9 100644
--- a/src/routes/events/[event_id]/(badges)/badges/+page.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/+page.svelte
@@ -28,8 +28,32 @@ import { events_func } from '$lib/ae_events/ae_events_functions';
 
 import Comp_badge_search from './ae_comp__badge_search.svelte';
 import Comp_badge_obj_li from './ae_comp__badge_obj_li.svelte';
+import Comp_badge_create_form from './ae_comp__badge_create_form.svelte';
 
-import { LoaderCircle } from '@lucide/svelte';
+import { LoaderCircle, UserPlus } from '@lucide/svelte';
+
+// Load templates for this event so the create form can show the selector and
+// derive badge_type_code_li from whichever template the user picks.
+$effect(() => {
+    const event_id = $events_slct?.event_id;
+    if (!event_id) return;
+    events_func.load_ae_obj_li__event_badge_template({
+        api_cfg: $ae_api,
+        event_id,
+        log_lvl: 0
+    });
+});
+
+let lq__badge_template_li = $derived(
+    liveQuery(async () => {
+        const event_id = $events_slct?.event_id;
+        if (!event_id) return [];
+        return await db_events.badge_template
+            .where('event_id')
+            .equals(event_id)
+            .sortBy('name');
+    })
+);
 // *** Initialization & Store Guard ***
 // Ensure all search fields are initialized to prevent circular undefined triggers
 if ($events_loc.badges) {
@@ -52,6 +76,7 @@ if ($events_loc.badges) {
 // Variables
 let show_create_badge_modal: boolean = $state(false);
 let show_upload_badge_modal: boolean = $state(false);
+let create_badge_dialog: HTMLDialogElement | undefined = $state();
 
 let event_badge_id_li: Array<string> = $state([]);
 let search_debounce_timer: any = null;
@@ -362,6 +387,49 @@ async function handle_search_refresh(params: any) {
 <Comp_badge_search event_id={$events_slct?.event_id ?? ''} log_lvl={1}
 ></Comp_badge_search>
 
+{#if $ae_loc.edit_mode}
+    <div class="flex justify-end px-4">
+        <button
+            type="button"
+            class="btn btn-sm preset-tonal-primary border-primary-500 border"
+            onclick={() => {
+                show_create_badge_modal = true;
+                create_badge_dialog?.showModal();
+            }}>
+            <UserPlus size="1em" />
+            Create Badge
+        </button>
+    </div>
+{/if}
+
+<!-- Create Badge modal — native <dialog> for focus trap + backdrop.
+     Clicking the backdrop closes it. The form remounts each open so state is fresh. -->
+<dialog
+    bind:this={create_badge_dialog}
+    class="w-full max-w-lg rounded-xl border border-gray-200 bg-white p-0 shadow-2xl dark:border-gray-700 dark:bg-gray-900"
+    onclick={(e) => { if (e.target === create_badge_dialog) { create_badge_dialog?.close(); show_create_badge_modal = false; } }}
+    onclose={() => { show_create_badge_modal = false; }}>
+    <div class="border-surface-200-800 border-b px-5 py-3">
+        <h2 class="text-surface-900-50 text-base font-semibold">Create Badge</h2>
+    </div>
+    {#if show_create_badge_modal}
+        <Comp_badge_create_form
+            event_id={$events_slct?.event_id ?? ''}
+            template_li={$lq__badge_template_li ?? []}
+            onsuccess={() => {
+                create_badge_dialog?.close();
+                show_create_badge_modal = false;
+                // Trigger a remote-first refresh so the new badge appears in results
+                $events_loc.badges.search_version = ($events_loc.badges.search_version ?? 0) + 1;
+                $events_loc.badges.qry__remote_first = true;
+            }}
+            oncancel={() => {
+                create_badge_dialog?.close();
+                show_create_badge_modal = false;
+            }} />
+    {/if}
+</dialog>
+
 {#if $events_sess?.badges?.search_status === 'loading' && event_badge_id_li.length === 0}
     <div
         class="flex flex-col items-center justify-center p-10 text-center opacity-50">
@@ -371,3 +439,13 @@ async function handle_search_refresh(params: any) {
 {:else}
     <Comp_badge_obj_li {lq__event_badge_obj_li} log_lvl={1}></Comp_badge_obj_li>
 {/if}
+
+<style>
+dialog {
+    margin: auto;
+}
+dialog::backdrop {
+    background: rgb(0 0 0 / 0.55);
+    backdrop-filter: blur(3px);
+}
+</style>
diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
index f42f68df..d5c51b9d 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
@@ -1,20 +1,38 @@
 <script lang="ts">
-// import { createEventDispatcher } from 'svelte';
 import { Loader2 } from '@lucide/svelte';
 import type { key_val } from '$lib/stores/ae_stores';
 import { events_func } from '$lib/ae_events/ae_events_functions';
 import { ae_api } from '$lib/stores/ae_stores';
+import { api } from '$lib/api/api';
 
 interface Props {
     event_id: string;
+    /** Template list for this event. Drives the template selector and badge_type_code_li. */
+    template_li?: Array<{ event_badge_template_id?: string | null; name?: string | null; badge_type_list?: string | null }>;
     onsuccess?: (badge: any) => void;
     oncancel?: () => void;
 }
 
-let { event_id, onsuccess, oncancel }: Props = $props();
+// Fallback badge type list used only when no template is loaded yet or the selected
+// template has no badge_type_list defined.
+const default_badge_type_code_li = [
+    { code: 'current_member', name: 'Member' },
+    { code: 'inactive_member', name: 'Non-Member' },
+    { code: 'guest', name: 'Guest' },
+    { code: 'ex_all', name: 'Exhibitor' },
+    { code: 'staff', name: 'Staff' },
+    { code: 'test', name: 'Test' }
+];
 
-// const dispatch = createEventDispatcher();
+let {
+    event_id,
+    template_li = [],
+    onsuccess,
+    oncancel
+}: Props = $props();
 
+let given_name: string = $state('');
+let family_name: string = $state('');
 let full_name_override: string = $state('');
 let professional_title_override: string = $state('');
 let affiliations_override: string = $state('');
@@ -23,124 +41,242 @@ let email: string = $state('');
 let allow_tracking: boolean = $state(false);
 let badge_type_code: string = $state('');
 
-let submit_status: string = $state('idle'); // idle, loading, success, error
+// Auto-select the first template when only one is available; otherwise let the user pick.
+// event_badge_template_id is sent to the API so the badge renders with the correct layout.
+let selected_template_id: string = $state('');
+$effect(() => {
+    if (template_li.length === 1 && template_li[0].event_badge_template_id) {
+        selected_template_id = template_li[0].event_badge_template_id;
+    }
+});
 
-// Example badge type codes (from ae_comp__badge_search.svelte)
-let badge_type_code_li = [
-    { code: 'current_member', name: 'Member' },
-    { code: 'inactive_member', name: 'Non-Member' },
-    { code: 'current_member_trainee', name: 'Trainee Member' },
-    { code: 'inactive_member_trainee', name: 'Trainee Non-Member' },
-    { code: 'ex_all', name: 'Exhibitor All Access' },
-    { code: 'ex_booth', name: 'Exhibitor Booth Staff' },
-    { code: 'hftx', name: 'HFTX Master Academy' },
-    { code: 'mcs', name: 'MCS Master Academy' },
-    { code: 'pediatric', name: 'Pediatric' },
-    { code: 'guest', name: 'Guest' },
-    { code: 'staff', name: 'Staff' },
-    { code: 'volunteer', name: 'Volunteer' },
-    { code: 'test', name: 'Test' }
-];
+// Derive badge type options from the selected template's badge_type_list JSON.
+// Fall back to the hardcoded default when no template is selected or its list is empty.
+let badge_type_code_li = $derived.by(() => {
+    const tmpl = template_li.find((t) => t.event_badge_template_id === selected_template_id);
+    if (!tmpl?.badge_type_list) return default_badge_type_code_li;
+    try {
+        const parsed = JSON.parse(tmpl.badge_type_list);
+        return Array.isArray(parsed) && parsed.length > 0 ? parsed : default_badge_type_code_li;
+    } catch {
+        return default_badge_type_code_li;
+    }
+});
+
+// Only show the name override field if the user explicitly wants to customize it.
+// The preview below the name fields shows what the badge will display — if that looks
+// good they don't need to touch this.
+let show_name_override: boolean = $state(false);
+
+// Live preview of what will print on the badge if no override is set
+let full_name_preview = $derived(
+    [given_name.trim(), family_name.trim()].filter(Boolean).join(' ') || '—'
+);
+
+// 'idle' | 'creating_person' | 'creating_badge' | 'success' | 'error'
+let submit_status: string = $state('idle');
+let error_msg: string = $state('');
 
 async function handle_submit(event: Event) {
     event.preventDefault();
-    submit_status = 'loading';
-    const data_to_create: key_val = {
-        full_name_override,
-        professional_title_override,
-        affiliations_override,
-        location_override,
-        email,
-        allow_tracking,
-        badge_type_code
-    };
+    submit_status = 'creating_person';
+    error_msg = '';
 
+    // Step 1: Create event_person — the identity record for this attendee.
+    // The V3 create endpoint returns { obj_id, obj_id_random } — both are the id_random
+    // of the new record. We pass event_person_id_random to the badge so the backend resolves the FK.
+    let new_person: { obj_id?: string; obj_id_random?: string } | null = null;
     try {
-        const new_badge = await events_func.create_ae_obj__event_badge({
+        const person_data: key_val = { given_name, family_name, email };
+        new_person = await events_func.create_ae_obj__event_person({
             api_cfg: $ae_api,
-            event_id: event_id,
-            data_kv: data_to_create
+            event_id,
+            data_kv: person_data
         });
-        if (new_badge) {
+    } catch (err) {
+        console.error('Error creating event_person:', err);
+        submit_status = 'error';
+        error_msg = 'Failed to create attendee record.';
+        return;
+    }
+
+    const event_person_id = new_person?.obj_id || new_person?.obj_id_random;
+    if (!event_person_id) {
+        submit_status = 'error';
+        error_msg = 'Attendee record created but returned no ID.';
+        return;
+    }
+
+    // Step 2: Create event_badge nested under event.
+    // POST /v3/crud/event/{event_id}/event_badge/
+    // Passing event_person_id so the backend links the badge to the person.
+    // Backend needs to handle event_badge creation without injecting event_id as a column
+    // (event_badge gets event_id through event_person in the view, not as a direct FK).
+    submit_status = 'creating_badge';
+    try {
+        const badge_data: key_val = {
+            event_person_id,
+            event_badge_template_id: selected_template_id || null,
+            given_name,
+            family_name,
+            email: email || null,
+            full_name_override: full_name_override || null,
+            professional_title_override: professional_title_override || null,
+            affiliations_override: affiliations_override || null,
+            location_override: location_override || null,
+            allow_tracking,
+            badge_type_code: badge_type_code || null
+        };
+        const new_badge = await api.create_nested_obj({
+            api_cfg: $ae_api,
+            parent_type: 'event',
+            parent_id: event_id,
+            child_type: 'event_badge',
+            fields: badge_data
+        });
+        if (new_badge?.obj_id) {
             submit_status = 'success';
-            // dispatch('success', new_badge);
             if (onsuccess) onsuccess(new_badge);
         } else {
             submit_status = 'error';
-            // dispatch('error', 'Failed to create badge');
+            error_msg = 'Badge record not returned from API.';
         }
-    } catch (error) {
+    } catch (err) {
+        console.error('Error creating event_badge:', err);
         submit_status = 'error';
-        console.error('Error creating badge:', error);
-        // dispatch('error', error);
+        error_msg = `Attendee record created (ID: ${event_person_id}) but badge creation failed.`;
     }
 }
 
 function handle_cancel() {
-    // dispatch('cancel');
     if (oncancel) oncancel();
 }
+
+let is_submitting = $derived(
+    submit_status === 'creating_person' || submit_status === 'creating_badge'
+);
+let step_label = $derived(
+    submit_status === 'creating_person'
+        ? 'Creating attendee record…'
+        : submit_status === 'creating_badge'
+          ? 'Creating badge…'
+          : ''
+);
 </script>
 
-<form onsubmit={handle_submit} class="space-y-4 p-4">
+<form onsubmit={handle_submit} class="space-y-4 p-5">
+    <div class="grid grid-cols-2 gap-3">
+        <label class="label">
+            <span class="label-text">First Name</span>
+            <input
+                type="text"
+                bind:value={given_name}
+                class="input"
+                required
+                placeholder="Jane" />
+        </label>
+        <label class="label">
+            <span class="label-text">Last Name</span>
+            <input
+                type="text"
+                bind:value={family_name}
+                class="input"
+                required
+                placeholder="Smith" />
+        </label>
+    </div>
+
+    <!-- Live badge name preview. If it looks right, no override needed. -->
+    <div class="flex items-center justify-between gap-2 text-sm">
+        <span class="text-surface-400">Badge will show:
+            <span class="text-surface-900-50 font-semibold">{full_name_preview}</span>
+        </span>
+        <button
+            type="button"
+            class="text-primary-500 hover:text-primary-400 text-xs underline underline-offset-2"
+            onclick={() => { show_name_override = !show_name_override; }}>
+            {show_name_override ? 'Hide override' : 'Customize display name'}
+        </button>
+    </div>
+
+    {#if show_name_override}
+        <label class="label">
+            <span class="label-text">Display Name Override</span>
+            <input
+                type="text"
+                bind:value={full_name_override}
+                class="input"
+                placeholder="e.g. Dr. Jane Smith, PhD" />
+        </label>
+    {/if}
+
     <label class="label">
-        <span>Full Name Override</span>
-        <input type="text" bind:value={full_name_override} class="input" />
+        <span class="label-text">Email</span>
+        <input type="email" bind:value={email} class="input" placeholder="jane@example.com" />
     </label>
+    {#if template_li.length > 1}
+        <!-- Template selector — only shown when the event has multiple templates.
+             Single-template events auto-select; the selector would just add noise. -->
+        <label class="label">
+            <span class="label-text">Badge Template</span>
+            <select bind:value={selected_template_id} class="select">
+                <option value="">-- Select Template --</option>
+                {#each template_li as tmpl (tmpl.event_badge_template_id)}
+                    <option value={tmpl.event_badge_template_id}>{tmpl.name}</option>
+                {/each}
+            </select>
+        </label>
+    {/if}
     <label class="label">
-        <span>Professional Title Override</span>
-        <input
-            type="text"
-            bind:value={professional_title_override}
-            class="input" />
-    </label>
-    <label class="label">
-        <span>Affiliations Override</span>
-        <textarea bind:value={affiliations_override} class="textarea" rows="2"
-        ></textarea>
-    </label>
-    <label class="label">
-        <span>Location Override</span>
-        <input type="text" bind:value={location_override} class="input" />
-    </label>
-    <label class="label">
-        <span>Email</span>
-        <input type="email" bind:value={email} class="input" />
-    </label>
-    <label class="label flex items-center gap-2">
-        <input type="checkbox" bind:checked={allow_tracking} class="checkbox" />
-        <span>Allow Tracking</span>
-    </label>
-    <label class="label">
-        <span>Badge Type</span>
+        <span class="label-text">Badge Type</span>
         <select bind:value={badge_type_code} class="select">
             <option value="">-- Select Badge Type --</option>
-            {#each badge_type_code_li as type_code_item (type_code_item.code)}
-                <option value={type_code_item.code}
-                    >{type_code_item.name}</option>
+            {#each badge_type_code_li as item (item.code)}
+                <option value={item.code}>{item.name}</option>
             {/each}
         </select>
     </label>
 
-    <div class="flex justify-end gap-2">
+    <hr class="border-surface-300-600" />
+
+    <label class="label">
+        <span class="label-text">Professional Title <span class="text-surface-400 font-normal">(optional)</span></span>
+        <input type="text" bind:value={professional_title_override} class="input" placeholder="e.g. Chief Medical Officer" />
+    </label>
+    <label class="label">
+        <span class="label-text">Organization <span class="text-surface-400 font-normal">(optional)</span></span>
+        <input type="text" bind:value={affiliations_override} class="input" placeholder="e.g. Acme Hospital" />
+    </label>
+    <label class="label">
+        <span class="label-text">Location <span class="text-surface-400 font-normal">(optional)</span></span>
+        <input type="text" bind:value={location_override} class="input" placeholder="City, State" />
+    </label>
+    <label class="flex items-center gap-2">
+        <input type="checkbox" bind:checked={allow_tracking} class="checkbox" />
+        <span class="text-sm">Allow lead tracking</span>
+    </label>
+
+    {#if submit_status === 'error'}
+        <p class="text-error-500 text-sm">{error_msg || 'An error occurred. Please try again.'}</p>
+    {/if}
+
+    <div class="flex items-center justify-end gap-2">
+        {#if is_submitting}
+            <span class="text-surface-400 flex items-center gap-1 text-sm">
+                <Loader2 size="1em" class="animate-spin" />
+                {step_label}
+            </span>
+        {/if}
         <button
             type="button"
             class="btn preset-tonal-surface"
+            disabled={is_submitting}
             onclick={handle_cancel}>Cancel</button>
         <button
             type="submit"
             class="btn preset-filled-primary"
-            disabled={submit_status === 'loading'}>
-            {#if submit_status === 'loading'}
-                <Loader2 size="1em" class="animate-spin" aria-hidden="true" />
-            {/if}
+            disabled={is_submitting || !given_name || !family_name}>
             Create Badge
         </button>
     </div>
 </form>
-
-{#if submit_status === 'success'}
-    <p class="text-green-500">Badge created successfully!</p>
-{:else if submit_status === 'error'}
-    <p class="text-red-500">Error creating badge. Please try again.</p>
-{/if}