Turnpike/frontend/src/pages/Attendees.svelte

<script>
  import { liveQuery } from 'dexie'
  import { db } from '../db.js'
  import { api } from '../api.js'
  import CheckInButton from '../components/CheckInButton.svelte'

  let { session } = $props()

  let search = $state('')
  let filterType = $state('')
  let filterChecked = $state('')
  let error = $state('')
  let success = $state('')
  let showAdd = $state(false)
  let newName = $state('')
  let newEmail = $state('')
  let newPhone = $state('')
  let newTicketID = $state('')
  let newTicketType = $state('')
  let newNote = $state('')
  let adding = $state(false)
  let generating = $state(false)
  let emailing = $state(false)

  const role = $derived(session?.user?.role ?? '')
  const canManage = $derived(['admin', 'ticketing'].includes(role))
  const canCheckIn = $derived(['admin', 'ticketing', 'gate'].includes(role))

  const allAttendees = liveQuery(() => db.attendees.toArray())
  const ticketTypes = liveQuery(() =>
    db.attendees.orderBy('ticket_type').uniqueKeys()
  )

  const filtered = $derived.by(() => {
    const list = $allAttendees ?? []
    const s = search.toLowerCase()
    return list
      .filter(a => {
        if (filterType && a.ticket_type !== filterType) return false
        if (filterChecked === 'true' && !a.checked_in) return false
        if (filterChecked === 'false' && a.checked_in) return false
        if (s && !a.name.toLowerCase().includes(s) &&
            !a.email.toLowerCase().includes(s) &&
            !a.ticket_id.toLowerCase().includes(s)) return false
        return true
      })
      .sort((a, b) => a.name.localeCompare(b.name))
  })

  async function checkIn(attendee) {
    try {
      const result = await api.attendees.checkIn(attendee.id)
      if (result.attendee) await db.attendees.put(result.attendee)
    } catch (err) {
      error = err.message
    }
  }

  async function addAttendee(e) {
    e.preventDefault()
    adding = true
    error = ''
    try {
      const a = await api.attendees.create({
        name: newName, email: newEmail, phone: newPhone,
        ticket_id: newTicketID, ticket_type: newTicketType, note: newNote,
      })
      await db.attendees.put(a)
      showAdd = false
      newName = newEmail = newPhone = newTicketID = newTicketType = newNote = ''
    } catch (err) {
      error = err.message
    } finally {
      adding = false
    }
  }

  async function generateTokens() {
    generating = true
    error = ''
    success = ''
    try {
      const result = await api.attendees.generateTokens()
      success = `Generated ${result.generated} token${result.generated !== 1 ? 's' : ''}.`
    } catch (err) {
      error = err.message
    } finally {
      generating = false
    }
  }

  async function emailAll() {
    if (!confirm('Send token emails to all attendees with a token and email address?')) return
    emailing = true
    error = ''
    success = ''
    try {
      const result = await api.attendees.emailAllTokens()
      success = `Sent ${result.sent} email${result.sent !== 1 ? 's' : ''}${result.skipped ? `, skipped ${result.skipped}` : ''}.`
      if (result.errors?.length) error = result.errors.join('; ')
    } catch (err) {
      error = err.message
    } finally {
      emailing = false
    }
  }

  async function emailToken(attendee) {
    error = ''
    success = ''
    try {
      await api.attendees.emailToken(attendee.id)
      success = `Token email sent to ${attendee.name}.`
    } catch (err) {
      error = err.message
    }
  }
</script>

<div class="page">
  <div class="page-header">
    <h1 class="page-title">Attendees</h1>
    <div class="actions">
      {#if canManage}
        <button class="btn btn-primary btn-sm" onclick={() => showAdd = !showAdd}>+ Add</button>
        <a href="/api/attendees/export" class="btn btn-ghost btn-sm">Export CSV</a>
        <button class="btn btn-ghost btn-sm" onclick={generateTokens} disabled={generating}>
          {generating ? '…' : '⚿ Tokens'}
        </button>
        <a href="/api/attendees/export-tokens" class="btn btn-ghost btn-sm">Export Links</a>
        <button class="btn btn-ghost btn-sm" onclick={emailAll} disabled={emailing}>
          {emailing ? '…' : '✉ Email All'}
        </button>
      {/if}
    </div>
  </div>

  {#if error}
    <div class="alert alert-error">{error}</div>
  {/if}
  {#if success}
    <div class="alert alert-success">{success}</div>
  {/if}

  {#if showAdd && canManage}
    <div class="card" style="margin-bottom:1.5rem">
      <form onsubmit={addAttendee}>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div class="form-group">
            <label for="new-name">Name *</label>
            <input id="new-name" bind:value={newName} required placeholder="Full name" />
          </div>
          <div class="form-group">
            <label for="new-email">Email</label>
            <input id="new-email" type="email" bind:value={newEmail} placeholder="email@example.com" />
          </div>
          <div class="form-group">
            <label for="new-ticket-id">Ticket ID</label>
            <input id="new-ticket-id" bind:value={newTicketID} placeholder="From ticketing system" />
          </div>
          <div class="form-group">
            <label for="new-ticket-type">Ticket type</label>
            <input id="new-ticket-type" bind:value={newTicketType} placeholder="e.g. General, VIP" />
          </div>
        </div>
        <div class="form-group">
          <label for="new-note">Note</label>
          <input id="new-note" bind:value={newNote} placeholder="Optional note" />
        </div>
        <div class="actions">
          <button type="submit" class="btn btn-primary" disabled={adding}>
            {adding ? 'Adding…' : 'Add attendee'}
          </button>
          <button type="button" class="btn btn-ghost" onclick={() => showAdd = false}>Cancel</button>
        </div>
      </form>
    </div>
  {/if}

  <div class="search-bar">
    <input placeholder="Search name, email, ticket ID…" bind:value={search} />
    {#if ($ticketTypes ?? []).length > 0}
      <select bind:value={filterType} style="width:auto">
        <option value="">All types</option>
        {#each $ticketTypes ?? [] as t}
          <option value={t}>{t}</option>
        {/each}
      </select>
    {/if}
    <select bind:value={filterChecked} style="width:auto">
      <option value="">All</option>
      <option value="false">Not checked in</option>
      <option value="true">Checked in</option>
    </select>
    <span class="text-muted" style="font-size:0.85rem;white-space:nowrap">
      {filtered.length} shown
    </span>
  </div>

  {#if ($allAttendees ?? []).length === 0}
    <div class="empty">
      <strong>No attendees yet</strong>
      <p>Import a CSV or add attendees manually.</p>
    </div>
  {:else}
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Ticket type</th>
            <th>Email</th>
            <th>Status</th>
            {#if canCheckIn}<th></th>{/if}
          </tr>
        </thead>
        <tbody>
          {#each filtered as a (a.id)}
            <tr>
              <td>
                <strong>{a.name}</strong>
                {#if a.ticket_id}
                  <span class="text-muted" style="font-size:0.8rem"> · {a.ticket_id}</span>
                {/if}
                {#if (a.party_size ?? 1) > 1}
                  <span class="badge badge-lead" style="margin-left:0.3rem">×{a.party_size}</span>
                {/if}
                {#if a.note}
                  <div class="text-muted" style="font-size:0.78rem">{a.note}</div>
                {/if}
              </td>
              <td class="text-muted">{a.ticket_type || '—'}</td>
              <td>
                <div>{a.email || '—'}</div>
                {#if a.volunteer_token && canManage}
                  <div style="font-size:0.75rem;margin-top:0.15rem">
                    <code style="color:var(--c-accent-h)">{a.volunteer_token}</code>
                    {#if a.email}
                      <button class="btn btn-ghost btn-sm" style="padding:0.1rem 0.4rem;margin-left:0.25rem"
                        onclick={() => emailToken(a)}>✉</button>
                    {/if}
                  </div>
                {/if}
              </td>
              <td>
                {#if (a.party_size ?? 1) > 1}
                  <span class="badge {a.checked_in ? 'badge-checked' : 'badge-unchecked'}">
                    {a.checked_in_count ?? 0}/{a.party_size} in
                  </span>
                {:else}
                  <span class="badge {a.checked_in ? 'badge-checked' : 'badge-unchecked'}">
                    {a.checked_in ? 'Checked in' : 'Pending'}
                  </span>
                {/if}
                {#if a.checked_in_at}
                  <div class="text-muted" style="font-size:0.75rem">
                    {new Date(a.checked_in_at).toLocaleTimeString()}
                  </div>
                {/if}
              </td>
              {#if canCheckIn}
                <td>
                  {#if (a.checked_in_count ?? 0) < (a.party_size ?? 1)}
                    <CheckInButton onclick={() => checkIn(a)} />
                  {/if}
                </td>
              {/if}
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  {/if}
</div>