From 24b52b802732ec04335047eb6ca95ebccb4f4688 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Mon, 8 Jun 2026 19:51:31 -0400 Subject: [PATCH] =?UTF-8?q?style(badges):=20reports=20=E2=80=94=20consiste?= =?UTF-8?q?nt=20buttons,=20dark=20mode,=20500-row=20cap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Report selector now uses a tonal-primary container matching the pres_mgmt reports pattern, making Long Names / Print Throughput clearly clickable - All hardcoded gray-* colors replaced with surface-*-* tokens and dark: variants for proper light/dark mode support - Control buttons (field selector, threshold, window size) use btn-sm with visible borders matching the rest of the events module - Long Names table uses surface tokens on rows, header, borders - Print Throughput bar rows use surface tokens; expanded badge chips link to /print instead of /review - Long Names caps display at 500 rows with a warning note when hit Co-Authored-By: Claude Sonnet 4.6 --- .../(badges)/badges/reports/+page.svelte | 36 +++++---- .../reports/reports_badge_long_names.svelte | 72 ++++++++++-------- .../reports_badge_print_throughput.svelte | 76 +++++++++---------- 3 files changed, 101 insertions(+), 83 deletions(-) diff --git a/src/routes/events/[event_id]/(badges)/badges/reports/+page.svelte b/src/routes/events/[event_id]/(badges)/badges/reports/+page.svelte index b27a0c5f..238056fd 100644 --- a/src/routes/events/[event_id]/(badges)/badges/reports/+page.svelte +++ b/src/routes/events/[event_id]/(badges)/badges/reports/+page.svelte @@ -6,13 +6,12 @@ interface Props { } let { data, log_lvl = 0 }: Props = $props(); -import { untrack } from 'svelte'; import { liveQuery } from 'dexie'; import { page } from '$app/state'; import { ae_loc } from '$lib/stores/ae_stores'; import { db_events } from '$lib/ae_events/db_events'; -import { events_loc, events_slct } from '$lib/stores/ae_events_stores'; +import { events_loc } from '$lib/stores/ae_events_stores'; import { ArrowLeft, TrendingUp, Type, Gauge, LoaderCircle } from '@lucide/svelte'; import Reports_badge_long_names from './reports_badge_long_names.svelte'; @@ -56,46 +55,55 @@ let reprint_count = $derived(

Trusted access required for badge reports.

{:else} -
+
+ class="btn btn-sm preset-tonal-surface border border-surface-300-700 flex items-center gap-1">

- + Badge Reports

{#if $lq__event_obj?.name} -

{$lq__event_obj.name}

+

{$lq__event_obj.name}

{/if}
-
+
{badge_count} badges · {printed_count} printed{reprint_count > 0 ? ` (${reprint_count} reprint${reprint_count !== 1 ? 's' : ''})` : ''}
- -
+ +
+ + Reports: + @@ -111,6 +119,6 @@ let reprint_count = $derived( {:else if active_report === 'print_throughput'} {:else} -
Select a report above to get started.
+

Select a report above to view results.

{/if} {/if} diff --git a/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_long_names.svelte b/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_long_names.svelte index b185f931..39725652 100644 --- a/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_long_names.svelte +++ b/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_long_names.svelte @@ -12,6 +12,8 @@ type NameField = 'given' | 'family' | 'full'; let name_field: NameField = $state('full'); let threshold: number = $state(20); +const MAX_DISPLAY = 500; + function get_display_name(badge: any): string { switch (name_field) { case 'given': @@ -29,7 +31,7 @@ function get_display_name(badge: any): string { } function get_field_label(field: NameField): string { - return field === 'given' ? 'Given Name' : field === 'family' ? 'Family Name' : 'Full Name'; + return field === 'given' ? 'Given' : field === 'family' ? 'Family' : 'Full Name'; } interface BadgeRow { @@ -41,79 +43,83 @@ interface BadgeRow { has_override: boolean; } -let results: BadgeRow[] = $derived.by(() => { +let all_results: BadgeRow[] = $derived.by(() => { if (!badge_li?.length) return []; return badge_li .map((b) => { const display_name = get_display_name(b); - const has_override = - name_field === 'full' - ? !!b.full_name_override - : false; return { event_badge_id: b.event_badge_id, display_name, name_len: display_name.length, badge_type: b.badge_type_override ?? b.badge_type ?? null, affiliations: b.affiliations_override ?? b.affiliations ?? null, - has_override + has_override: name_field === 'full' ? !!b.full_name_override : false }; }) .filter((r) => r.name_len >= threshold) .sort((a, b) => b.name_len - a.name_len); }); + +let results = $derived(all_results.slice(0, MAX_DISPLAY)); +let is_truncated = $derived(all_results.length > MAX_DISPLAY);
-
- Field: +
+ Field: {#each (['full', 'given', 'family'] as NameField[]) as field} {/each}
-
- Min length: +
+ Min length: - {threshold} + {threshold}
- - {results.length} badge{results.length !== 1 ? 's' : ''} with {get_field_label(name_field).toLowerCase()} ≥ {threshold} chars + + {all_results.length} badge{all_results.length !== 1 ? 's' : ''} with {get_field_label(name_field).toLowerCase()} ≥ {threshold} chars + {#if is_truncated} + (showing first {MAX_DISPLAY}) + {/if}
{#if results.length === 0} -

+

No badges found with a {get_field_label(name_field).toLowerCase()} of {threshold} or more characters.

{:else} -
+
- + @@ -123,32 +129,36 @@ let results: BadgeRow[] = $derived.by(() => { {#each results as row (row.event_badge_id)} - + - - +
Name ({get_field_label(name_field)}) Len Badge Type
{row.display_name} {#if row.has_override} - override + override {/if} = 30} - class:bg-red-100={row.name_len >= 30} - class:text-amber-700={row.name_len >= 25 && row.name_len < 30} - class:bg-amber-100={row.name_len >= 25 && row.name_len < 30} - class:text-gray-600={row.name_len < 25}> + class:text-error-600={row.name_len >= 30} + class:dark:text-error-400={row.name_len >= 30} + class:bg-error-100={row.name_len >= 30} + class:dark:bg-error-900={row.name_len >= 30} + class:text-warning-700={row.name_len >= 25 && row.name_len < 30} + class:dark:text-warning-400={row.name_len >= 25 && row.name_len < 30} + class:bg-warning-100={row.name_len >= 25 && row.name_len < 30} + class:dark:bg-warning-900={row.name_len >= 25 && row.name_len < 30} + class:text-surface-600-400={row.name_len < 25}> {row.name_len} {row.badge_type ?? '—'} + {row.badge_type ?? '—'} {row.affiliations ?? '—'} Edit diff --git a/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte b/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte index ad6c47f9..eae31aea 100644 --- a/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte +++ b/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte @@ -13,7 +13,7 @@ let expanded_bucket: number | null = $state(null); interface Bucket { start_ms: number; label: string; - date_label: string | null; // shown when day changes + date_label: string | null; count: number; badges: any[]; } @@ -96,22 +96,24 @@ function get_effective_name(badge: any): string {
-
- Window: +
+ Window: {#each ([5, 15, 30, 60] as BucketMin[]) as sz} {/each}
{#if stats.total_printed > 0} - + {stats.total_printed} printed · {stats.buckets.length} window{stats.buckets.length !== 1 ? 's' : ''} with activity {#if stats.span_label}· {stats.span_label}{/if} @@ -120,68 +122,72 @@ function get_effective_name(badge: any): string { {#if stats.total_printed === 0} -

No printed badges found for this event.

+

No printed badges found for this event.

{:else if stats.buckets.length === 0} -

No valid print timestamps found.

+

No valid print timestamps found.

{:else}
{#each stats.buckets as bucket (bucket.start_ms)} {#if bucket.date_label} -
+
{bucket.date_label}
{/if} -
+
{#if expanded_bucket === bucket.start_ms} -
+
{#each bucket.badges as b (b.event_badge_id)} + href={`/events/${event_id}/badges/${b.event_badge_id}/print`} + class="rounded border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-2 py-0.5 text-xs hover:border-primary-300 dark:hover:border-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors"> {get_effective_name(b)} {/each}
-

- {bucket.count} badge{bucket.count !== 1 ? 's' : ''} printed in this {bucket_size}-min window · click badge to review +

+ {bucket.count} badge{bucket.count !== 1 ? 's' : ''} printed in this {bucket_size}-min window · click to open

{/if} @@ -190,16 +196,10 @@ function get_effective_name(badge: any): string {
-
- - Total printed: {stats.total_printed} - - - Peak window: {stats.max_count} in {bucket_size} min - - - Avg per window: {stats.buckets.length ? (stats.total_printed / stats.buckets.length).toFixed(1) : '—'} - +
+ Total printed: {stats.total_printed} + Peak window: {stats.max_count} in {bucket_size} min + Avg per window: {stats.buckets.length ? (stats.total_printed / stats.buckets.length).toFixed(1) : '—'}
{/if}