Now with much better badge search function. And bug fix for Payment tab.

src/app.postcss

@@ -250,4 +250,51 @@ div.btn-group button:last-child {
         /* outline: medium dashed blue; */
         display: none;
     }
+}
+
+
+
+
+/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
+div.ae_quick_modal_container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: hsla(0, 0%, 0%, .5);
+}
+
+/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
+section.ae_quick_popover {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+    background-color: hsla(0, 0%, 100%, .95);
+    padding: 1rem;
+    border-radius: .5rem;
+    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
+
+    min-height: 98%;
+    min-width: 98%;
+}
+
+section.ae_quick_popover_small {
+    position: fixed;
+    top: 1em;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    z-index: 100;
+    background-color: hsla(0, 0%, 100%, .95);
+    padding: 1rem;
+    border-radius: .5rem;
+    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
+
+    min-height: 24rem;
+    max-height: 95%;
+    min-width: 50%;
+    max-width: 95%;
 }

src/lib/ae_events_functions.ts

@@ -169,7 +169,7 @@ async function handle_load_ae_obj_li__badge(
 }
 
 
-async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qry_str, external_event_id, params={}, try_cache=true}) {
+async function handle_search__event_badge({api_cfg, event_id, type_code=null, fulltext_search_qry_str, external_event_id, params={}, try_cache=true}) {
     console.log(`*** handle_search__event_badge() *** event_id=${event_id}`);
 
     let enabled: string = (params.qry__enabled ?? 'enabled'); // all, disabled, enabled
@@ -178,6 +178,7 @@ async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qr
     let offset: number = (params.qry__offset ?? 0); // 0
 
     let params_json: key_val = {};
+
     if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) {
         params_json['ft_qry'] = {
             'default_qry_str': fulltext_search_qry_str,
@@ -187,7 +188,15 @@ async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qr
     }
 
     params_json['and_qry'] = {};
-    if (external_event_id) params_json['and_qry']['external_event_id'] = external_event_id;
+    if (external_event_id) {
+        params_json['and_qry']['external_event_id'] = external_event_id;
+    }
+
+    if (type_code) { // This is the event_badge.badge_type_code. There is also a member_type_code and registration_type_code that could be referenced in the future.
+        params_json['and_qry']['badge_type_code'] = type_code;
+    }
+
+    let order_by_li = {'priority': 'DESC', 'sort': 'DESC', 'family_name': 'ASC', 'given_name': 'ASC', 'updated_on': 'DESC', 'created_on': 'DESC'};
 
     // $events_sess.badges.status_qry__search = 'loading';
     ae_promises.search__event_badge = await api.get_ae_obj_li_for_obj_id_crud({
@@ -199,7 +208,7 @@ async function handle_search__event_badge({api_cfg, event_id, fulltext_search_qr
         use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
         enabled: enabled,
         hidden: hidden,
-        order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
+        order_by_li: order_by_li,
         // order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
         limit: limit,
         offset: offset,

src/lib/ae_events_stores.ts

@@ -33,6 +33,14 @@ let events_local_data_struct: key_val = {
 
     // Badge Printing
     'badges': {
+        auto_view: true,
+
+        show_hidden: false, // These are hidden (archived) leads so the list is not as long.
+        show_not_enabled: false,
+
+        show_printed: false,
+        allow_reprint: false,
+
         'show_element__cfg': true,
         'show_element__cfg_detail': false,
         'show_element__access_type': true,
@@ -122,6 +130,13 @@ let events_session_data_struct: key_val = {
     'badges': {
         'fulltext_search_qry_str': null,
         'status_qry__search': null,
+
+        show_form__search: true,
+        show_form__search_results: true,
+        show_form__scan: false,
+
+        qr_scan_start: true,
+        qr_scan_result: null,
     },
 
     // Lead Retrievals (Exhibit)

src/routes/events_badges/review/+page.svelte

@@ -14,6 +14,9 @@ import { db_events } from "$lib/db_events";
 import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
 
+import Element_qr_scanner from '$lib/element_qr_scanner.svelte';
+	import { goto } from '$app/navigation';
+
 // The lq__ prefix is used to indicate that this is a liveQuery object and it should use the $ prefix when referencing the object.
 let lq__event_badge_li = liveQuery(
     () => db_events.badges.toArray()
@@ -24,6 +27,7 @@ let lq__event_badge_li = liveQuery(
 let ae_promises: key_val = {};
 let load_obj_li_results: Promise<any>|key_val;
 let search_submit_results: Promise<any>|key_val;
+let scan_submit_results: Promise<any>|key_val;
 
 
 $ae_loc.hostname = data.url.hostname;
@@ -42,6 +46,9 @@ if ($events_slct.event_id) {
     // $events_trigger = 'load__event_obj';
 }
 
+// ISHLT 2024 badge type codes
+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"}];
+
 
 onMount(() => {
     console.log('Events Badges [New/Edit]: +page.svelte');
@@ -126,21 +133,27 @@ async function handle_load_ae_obj_id__event_badge({event_badge_id, try_cache=fal
 $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
     console.log(`handle_load_ae_obj_id__event() $events_slct.event_id=${$events_slct.event_id} api_cfg=`, $ae_api);
 
+    $events_trigger = null;
+
     if (!$events_sess.badges.fulltext_search_qry_str) {
         $events_sess.badges.fulltext_search_qry_str = '';
     }
 
+    let type_code = $events_sess.badges.search_badge_type_code;
+    let search_str = $events_sess.badges.fulltext_search_qry_str.trim();
+    // Add quotes around the search string to make it an exact match.
+    search_str = `"${search_str}"`;
+    console.log(search_str);
+
     if ($events_sess.status_qry__search == 'loading') {
         console.log('*** $events_sess.status_qry__search == loading ***');
 
         setTimeout(() => {
             console.log("Delayed for X second.");
-            $events_trigger = null;
 
-            let search_str = $events_sess.badges.fulltext_search_qry_str.trim();
+            $events_sess.status_qry__search = 'loading';
-            console.log(search_str);
 
-            search_submit_results = events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $events_slct.event_id, fulltext_search_qry_str: search_str, external_event_id: $events_loc.badges.default__external_registration_id})
+            search_submit_results = events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $events_slct.event_id, type_code: type_code, fulltext_search_qry_str: search_str, external_event_id: $events_loc.badges.default__external_registration_id})
             .then(function (search_results) {
                 $events_slct.badge_obj_li = search_results;
                 console.log(search_results);
@@ -149,14 +162,13 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
         }, 250);
     } else {
         console.log('*** $events_sess.status_qry__search != loading ***');
-        $events_trigger = null;
 
         $events_sess.status_qry__search = 'loading';
 
-        let search_str = $events_sess.badges.fulltext_search_qry_str.trim();
+
         console.log(search_str);
 
-        search_submit_results = events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $events_slct.event_id, fulltext_search_qry_str: search_str, external_event_id: $events_loc.badges.default__external_registration_id})
+        search_submit_results = events_func.handle_search__event_badge({api_cfg: $ae_api, event_id: $events_slct.event_id, type_code: type_code, fulltext_search_qry_str: search_str, external_event_id: $events_loc.badges.default__external_registration_id})
         .then(function (search_results) {
             $events_slct.badge_obj_li = search_results;
             console.log(search_results);
@@ -167,6 +179,89 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
 
 
 
+
+let load_event_badge_results = null;
+function handle_qr_scan_result(event) {
+    console.log('*** handle_qr_scan_result() ***');
+
+    let qr_scan_result = event.detail.result;
+    console.log(qr_scan_result);
+    let qr_scan_obj = ae_util.process_data_string(qr_scan_result);
+
+    if (qr_scan_obj.qr_type == 'OBJ') {
+        console.log(`Got a QR type of OBJ. Type ${qr_scan_obj.type}; ID ${qr_scan_obj.id}`);
+
+        if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_badge') {
+            console.log(`Found an Event Badge object type and ID.`);
+            let event_badge_id = qr_scan_obj.id
+
+            $events_sess.badges.qr_scan_result = `Found a badge type with ID: ${event_badge_id}`;
+
+            load_event_badge_results = events_func.handle_load_ae_obj_id__badge({api_cfg: $ae_api, badge_id: event_badge_id })
+            .then((result) => {
+                $events_slct.badge_id = event_badge_id;
+                $events_slct.badge_obj = result;
+                console.log(result);
+
+                // Confirm they want to view the badge.
+                if ($events_slct.badge_obj.print_count >= 1 && !confirm(`That badge has already been printed ${$events_slct.badge_obj.print_count} times. View badge for ${$events_slct.badge_obj.full_name}?`)) {
+                    return;
+                }
+
+                // ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
+
+                // Go to the badge view page
+                // Example: /event/badge/view_badge?event_badge_id=THE_ID
+                goto(`/event/badge/view_badge?event_badge_id=${$events_slct.badge_obj.event_badge_id_random}`, {replaceState: true});
+            });
+
+
+
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_exhibit') {
+            console.log(`Ignoring.`);
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_person') {
+            console.log(`Ignoring.`);
+        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_session') {
+            console.log(`Ignoring.`);
+        } else {
+            console.log(`Ignoring. The object returned was unexpected or not valid.`);
+            console.log(qr_scan_obj);
+        }
+    } else if (qr_scan_obj.qr_type == 'MECARD') {
+        console.log(`Got a QR type of MECARD. This was not expected, but we will at least display it???`);
+
+        // https://github.com/ertant/vCard
+        // vcard = vCardParser.parse(qr_scan_obj.str); // vCard
+        // console.log(vcard);
+
+        mecard = qr_scan_obj.str.split(';'); // vCard
+        // NOTE: Next we need to loop through the values and split each again on ":".
+        // NOTE: Then probably do a second check based on the known key values (N, EMAIL, ADR).
+        console.log(mecard);
+
+        show_mecard = true;
+    } else {
+        console.log(`Got a QR type of ${qr_scan_obj.qr_type}. Display warning to user, but otherwise ignoring.`);
+        console.log(qr_scan_obj);
+    }
+}
+
+function handle_qr_camera(event) {
+    console.log('*** handle_qr_camera() ***', event.detail);
+
+    if (!$ae_loc.hub.qr) {
+        $ae_loc.hub.qr = {};
+    }
+
+    if (event.detail.status == 'allowed') {
+        // console.log('Camera access allowed');
+        $ae_loc.hub.qr.camera_status = 'allowed';
+    } else if (event.detail.status == 'denied') {
+        console.log('Camera access denied!?');
+        $ae_loc.hub.qr.camera_status = 'denied';
+    }
+}
+
 </script>
 
 
@@ -182,39 +277,65 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
 </header>
 {/if}
 
+<div class="variant-ghost-success my-2 p-2 flex flex-row items-center">
+
+{#if $events_sess.badges.show_form__search}
 <form
-    class="form"
+    class="form flex-grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
     on:submit|preventDefault={() => {
         $events_trigger = 'load__event_badge_obj_li';
     }}
     >
-<!-- <section class="btn btn-group"> -->
+{#if $ae_loc.trusted_access && badge_type_code_li}
-<input
+<div class="search_by_badge_type_code">
+    <select
+        bind:value={$events_sess.badges.search_badge_type_code}
+        on:change={() => {
+            $events_trigger = 'load__event_badge_obj_li';
+        }}
+        class="select text-xs transition-all"
+        >
+        <option value="">-- All Badge Types --</option>
+        {#each badge_type_code_li as badge_type_code}
+            <option value={badge_type_code.code}>{badge_type_code.name}</option>
+        {/each}
+    </select>
+</div>
+{/if}
+
+<!-- <input
     type="search"
-    placeholder="Search (name, email, affiliatons, etc.)"
+    placeholder="name, email, affiliations"
     id="badge_fulltext_search_qry_str"
     name="fulltext_search_qry_str"
     bind:value={$events_sess.badges.fulltext_search_qry_str}
-    class="input w-96"
+    class="input text-xl hover:text-3xl font-bold font-mono w-96"
+    on:change={() => {
+        if ($events_sess.badges.fulltext_search_qry_str.length >= 3) {
+            $events_trigger = 'load__event_badge_obj_li';
+        }
+    }}
+    > -->
+    <input
+    type="search"
+    placeholder="name, email, affiliations"
+    id="badge_fulltext_search_qry_str"
+    name="fulltext_search_qry_str"
+    bind:value={$events_sess.badges.fulltext_search_qry_str}
+    class="input text-1xl hover:text-3xl font-bold font-mono w-96 transition-all"
+    on:keyup={() => {
+        if ($events_sess.badges.fulltext_search_qry_str.length >= 3) {
+            $events_trigger = 'load__event_badge_obj_li';
+        }
+    }}
     >
 
+
 <button
     type="submit"
-    class="btn variant-ghost-primary w-48"
+    class="btn btn-lg variant-ghost-success hover:variant-glass-success text-2xl font-bold w-48 transition-all"
     on:click={() => {
-        // $events_trigger = 'load__event_badge_obj_li';
-        // $events_trigger = $events_trigger;
 
-        // handle_oninput_fulltext_search_qry_str();
-
-        // handle_badge_search('event_id', null);
-        // modalStore.trigger(modal_edit__event_badge);
-
-        // $events_trigger = 'load__event_badge';
-
-        // $events_loc.show_edit__event_badge_obj = true;
-
-        // modalStore.trigger(modal_edit__event_badge);
     }}
     >
     <span class="fas fa-search mx-1"></span>
@@ -222,6 +343,102 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
 </button>
 </form>
 
+<!-- **BEGIN** Scan Form -->
+{:else if $events_sess.badges.show_form__scan}
+
+<!-- <div class="ae_quick_modal_container">
+    <section
+        class="
+            ae_quick_popover
+            events__badges__scan
+            z-50
+            flex
+            flex-col
+            gap-4
+            justify-stretch
+            max-h-full
+            min-w-full
+            "
+        >
+        <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+            <h2 class="h3">Scan</h2>
+
+            <div class="popover__actions">
+                <button
+                    type="button"
+                    class="btn variant-soft-primary"
+                    on:click={() => {
+                        $events_sess.badges.show_form__scan = false;
+                        $events_sess.badges.qr_scan_start = false;
+                    }}
+                    >
+                    <span class="fas fa-times mx-1"></span>
+                    Close
+                </button>
+            </div>
+        </header>
+
+        <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix"> -->
+
+
+        <!-- <div class=""> -->
+        <!-- <Element_qr_scanner start_qr_scanner={$events_sess.badges.qr_scan_start} show_qr_scan_result={true} show_qr_manual_badge_id_entry_option={true} on:qr_scan_result={handle_qr_scan_result} on:qr_camera={handle_qr_camera} /> -->
+        <!-- </div> -->
+
+        <!-- <div class="qr_quick_results variant-soft-secondary font-bold p-4">
+            {@html $events_sess.badges.qr_scan_result ?? 'No results yet'}
+        </div> -->
+
+
+
+        <!-- This block needs to be moved or something. It takes up too much space! -->
+        <!-- This uses the events_slct with badge_id and badge_obj. -->
+        <!-- {#if $events_slct.badge_id && $events_slct.badge_obj} -->
+
+        <!-- {/if} -->
+
+
+
+{/if}
+<!-- **END** Scan Form -->
+
+
+<div>
+    {#if $events_sess.badges.show_form__search}
+    <button
+        type="button"
+        on:click={() => {
+            $events_sess.badges.show_form__search = false;
+            $events_sess.badges.show_form__search_results = false;
+            $events_sess.badges.show_form__scan = true;
+            $events_sess.badges.qr_scan_start = true;
+        }}
+        class="btn btn-sm variant-ghost-primary"
+        >
+        <span class="fas fa-qrcode mx-1"></span>
+        QR Scan
+    </button>
+    {:else if $events_sess.badges.show_form__scan}
+    <button
+        type="button"
+        on:click={() => {
+            $events_sess.badges.show_form__search = true;
+            $events_sess.badges.show_form__search_results = false;
+            $events_sess.badges.show_form__scan = false;
+            $events_sess.badges.qr_scan_start = false;
+        }}
+        class="btn btn-sm variant-ghost-primary"
+        >
+        <span class="fas fa-search mx-1"></span>
+        Search
+    </button>
+    {/if}
+</div>
+
+
+</div>
+
+
 {#await load_obj_li_results}
     <span class="modal-loading">
         <span class="fas fa-spinner fa-spin"></span>
@@ -239,6 +456,8 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
 {/await}
 
 
+{#if $events_sess.badges.show_form__search}
+
 {#if $events_slct?.badge_obj_li.length}
 <!-- {#if $event_badge_li} -->
 <section class="ae_h_scrollfix">
@@ -248,40 +467,90 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
 <tr>
     <th>Badge</th>
     <!-- The email should only be the first 3 chars and then @domain name. -->
-    <th>Email</th>
+    <th>Email / Affiliations / Location</th>
-    <th>Affiliations</th>
+    <!-- <th>Affiliations / Location</th> -->
+    <th>Badge Type</th>
 </tr>
 </thead>
 <tbody>
 {#each $events_slct.badge_obj_li as badge_obj}
 <!-- {#each $lq__event_badge_li as badge_obj} -->
-<tr>
+<tr class="">
-<td>
+<td class="">
     <button
-        class="btn variant-ghost-secondary w-96"
+        class="btn btn-xl text-xl variant-ghost-secondary hover:variant-glass-secondary w-96 overflow-hidden transition-all"
         on:click={() => {
-            ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
+            // Confirm they want to view the badge.
-            // modalStore.trigger(modal_edit__event_badge);
+            if (badge_obj.print_count >= 1 && !confirm(`That badge has already been printed ${badge_obj.print_count} times. View badge for ${badge_obj.full_name}?`)) {
+                return;
+            }
+            // ae_util.handle_url_and_message('event_badge_id', badge_obj.event_badge_id_random);
 
-            // $events_trigger = 'load__event_badge';
+            // Go to the badge view page
-            // $events_trigger = 'show_edit__event_badge';
+            // Example: /event/badge/view_badge?event_badge_id=THE_ID
-            // $events_loc.show_edit__event_badge_obj = true;
+            goto(`/event/badge/view_badge?event_badge_id=${badge_obj.event_badge_id_random}`, {replaceState: true});
-            // modalStore.trigger(modal_edit__event_badge);
         }}
         >
-        <span class="fas fa-id-badge mx-1"></span>
+        <span class="flex flex-row justify-between items-center w-full">
-        Badge: {badge_obj.full_name}
+            <span>
+            <span class="fas fa-id-badge mx-1"></span>
+            {#if badge_obj.print_count >= 1}
+                <!-- Show a green checkmark -->
+                <span class="fas fa-check text-green-500"></span>
+
+                {#if $ae_loc.trusted_access}
+                    <span class="print_count variant-soft-warning px-1">{badge_obj.print_count}x</span>
+                {/if}
+            {/if}
+            </span>
+
+            <span class="font-bold">
+            {#if badge_obj.full_name_override}
+                {badge_obj.full_name_override}
+            {:else if badge_obj.full_name}
+                {badge_obj.full_name}
+            {:else if badge_obj.given_name}
+                {badge_obj.given_name} {badge_obj.family_name}
+            {:else}
+                -- no name --
+            {/if}
+            </span>
+        </span>
     </button>
 </td>
-<td>
+<td class="">
+    <div class="">
+    <div>
     <!-- The email should only be the first 3 chars and then @domain name. -->
     <!-- Example: original: scott.idem@oneskyit.com obscured: sco...@oneskyit.com -->
     <span class="fas fa-envelope mx-1"></span>
     {badge_obj.email ? badge_obj.email.replace(/^(.{3}).*@/, '$1...@') : ''}
+    </div>
+
+    <div>
+    {#if badge_obj?.affiliations}
+        <span class="fas fa-users mx-1"></span>
+        {badge_obj.affiliations}
+    {:else if badge_obj.location}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.location}
+    {:else if badge_obj.city && badge_obj.state_province}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.city}, {badge_obj.state_province}
+    {:else if badge_obj.city}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.city}
+    {:else if badge_obj.state_province}
+        <span class="fas fa-map-marker-alt mx-1"></span>
+        {badge_obj.state_province}
+    {:else}
+        -- none --
+    {/if}
+    </div>
+    </div>
 </td>
-<td>
+<td class="">
-    <span class="fas fa-users mx-1"></span>
+    <span title={badge_obj.registration_type}>{badge_obj.badge_type}</span>
-    {badge_obj.affiliations}
 </td>
 </tr>
 {/each}
@@ -295,8 +564,68 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
 {/if}
 
 
+{:else if $events_sess.badges.show_form__scan}
 
-{#if $ae_loc.ds.hub__page__events_badges__create_info}
+
+<div class="ae_quick_modal_container">
+    <section
+        class="
+            ae_quick_popover_small
+            events__badges__scan
+            z-50
+            flex
+            flex-col
+            gap-4
+            justify-stretch
+
+            "
+        >
+        <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
+            <h2 class="h3">Scan</h2>
+
+            <div class="popover__actions">
+                <button
+                    type="button"
+                    class="btn variant-soft-primary"
+                    on:click={() => {
+                        $events_sess.badges.show_form__search = true;
+                        $events_sess.badges.show_form__search_results = false;
+                        $events_sess.badges.show_form__scan = false;
+                        $events_sess.badges.qr_scan_start = false;
+
+                        $events_slct.badge_id = null;
+                        $events_slct.badge_obj = null;
+                    }}
+                    >
+                    <span class="fas fa-times mx-1"></span>
+                    Close
+                </button>
+            </div>
+        </header>
+
+        <section class="popover__content grow flex flex-col gap-4 items-center ae_modal_scrollfix">
+
+        <Element_qr_scanner start_qr_scanner={$events_sess.badges.qr_scan_start} show_qr_scan_result={true} show_qr_manual_badge_id_entry_option={true} on:qr_scan_result={handle_qr_scan_result} on:qr_camera={handle_qr_camera} />
+
+        <div class="qr_quick_results variant-soft-secondary font-bold p-4">
+            {@html $events_sess.badges.qr_scan_result ?? 'No results yet'}
+        </div>
+
+
+        {#if $events_slct.badge_id && $events_slct.badge_obj}
+        <p>Badge ID: <strong>{$events_slct.badge_obj.event_badge_id_random}</strong></p>
+        {/if}
+
+        </section> <!-- .popover__content -->
+    </section> <!-- .ae_quick_popover -->
+
+</div>
+
+
+
+{/if}
+
+<!-- {#if $ae_loc.ds.hub__page__events_badges__create_info}
 {@html $ae_loc.ds.hub__page__events_badges__create_info}
 {:else}
 <section>
@@ -304,7 +633,12 @@ $: if ($events_trigger == 'load__event_badge_obj_li' && $events_slct.event_id) {
             More information goes here.
         </div>
 </section>
-{/if}
+{/if} -->
 
 
 </section>
+
+
+
+
+

src/routes/events_leads/exhibit/[slug]/+page.svelte

@@ -503,7 +503,7 @@ function send_init_confirm_email({index, lic_key, lic_pass}) {
     border=""
     class="bg-surface-100-800-token w-full"
     >
-    {#if $events_loc.leads.show_option__paid_tab}
+    {#if $events_loc.leads.show_option__paid_tab ?? true}
     <Tab
         bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
         name="tab_payment"

src/routes/events_leads/exhibit/[slug]/leads_add_scan.svelte

@@ -861,47 +861,5 @@ function handle_qr_camera(event) {
 
 
 <style lang="postcss">
-/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
-div.ae_quick_modal_container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    background-color: hsla(0, 0%, 0%, .5);
-}
 
-/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
-section.ae_quick_popover {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 100;
-    background-color: hsla(0, 0%, 100%, .95);
-    padding: 1rem;
-    border-radius: .5rem;
-    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
-
-    min-height: 98%;
-    min-width: 98%;
-}
-
-section.ae_quick_popover_small {
-    position: fixed;
-    top: 1em;
-    left: 50%;
-    transform: translate(-50%, 0%);
-    z-index: 100;
-    background-color: hsla(0, 0%, 100%, .95);
-    padding: 1rem;
-    border-radius: .5rem;
-    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
-
-    min-hight: 24rem;
-    max-height: 95%;
-    min-width: 50%;
-    max-width: 95%;
-}
 </style>

src/routes/events_leads/exhibit/[slug]/leads_payment.svelte

@@ -120,15 +120,16 @@ $: if ($events_sess.stripe && $events_sess.stripe.license_qty >= 0 || $events_se
                 <p>You have not rented any tablets for scanning. You can use your own device(s) with this service.</p>
             {/if}
 
-            <p>To save space while using this app you can hide this payment tab now that you have paid for your licenses. This can be unhidden under the Conf tab if needed.</p>
+            <p>To save space while using this app you can hide this payment tab now that you have paid for your licenses. This can be unhidden under the Conf(ig) tab if needed.</p>
         </div>
 
         <button
             type="button"
             on:click={() => {
-                let confirm_hide = confirm('Are you sure you want to hide this tab?');
+                let confirm_hide = confirm('You can unhide this later under the Config tab.');
                 if (confirm_hide) {
                     $events_loc.leads.show_option__paid_tab = false;
+                    $events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
                 }
             }}
             class="btn variant-soft-primary"