Add award detail page and fix award progress calculation

## Frontend
- Create award detail page at /awards/[id]
- Show all entities with worked/confirmed status
- Add filtering (all, worked, confirmed, unworked)
- Add sorting (name, status)
- Display summary cards (total, confirmed, worked, needed)
- Show entity details (callsign, band, mode, date)

## Backend Fixes
- Fix award progress calculation for filtered awards
- Add normalizeAwardRules to handle "filtered" type awards
- Fix satellite filter to check satName field instead of satellite
- Add case-insensitive contains matching
- Apply normalization to both progress and entity breakdown functions

This fixes the 0/0 issue for DXCC CW, WAS, VUCC, and satellite awards.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/backend/services/awards.service.js

@@ -60,13 +60,33 @@ export async function getAllAwards() {
   }));
 }
 
+/**
+ * Normalize award rules to a consistent format
+ */
+function normalizeAwardRules(rules) {
+  // Handle "filtered" type awards (like DXCC CW)
+  if (rules.type === 'filtered' && rules.baseRule) {
+    return {
+      type: 'entity',
+      entityType: rules.baseRule.entityType,
+      target: rules.baseRule.target,
+      filters: rules.filters,
+    };
+  }
+
+  return rules;
+}
+
 /**
  * Calculate award progress for a user
  * @param {number} userId - User ID
  * @param {Object} award - Award definition
  */
 export async function calculateAwardProgress(userId, award) {
-  const { rules } = award;
+  let { rules } = award;
+
+  // Normalize rules to handle different formats
+  rules = normalizeAwardRules(rules);
 
   // Get all QSOs for user
   const allQSOs = await db
@@ -149,7 +169,15 @@ function applyFilters(qsos, filters) {
  * Check if a QSO matches a filter
  */
 function matchesFilter(qso, filter) {
-  const value = qso[filter.field];
+  let value;
+
+  // Special handling for satellite field
+  if (filter.field === 'satellite') {
+    // Check if it's a satellite QSO (has satName)
+    value = qso.satName && qso.satName.length > 0;
+  } else {
+    value = qso[filter.field];
+  }
 
   switch (filter.operator) {
     case 'eq':
@@ -161,7 +189,7 @@ function matchesFilter(qso, filter) {
     case 'nin':
       return Array.isArray(filter.value) && !filter.value.includes(value);
     case 'contains':
-      return value && typeof value === 'string' && value.includes(filter.value);
+      return value && typeof value === 'string' && value.toLowerCase().includes(filter.value.toLowerCase());
     default:
       return true;
   }
@@ -204,7 +232,10 @@ export async function getAwardEntityBreakdown(userId, awardId) {
     throw new Error('Award not found');
   }
 
-  const { rules } = award;
+  let { rules } = award;
+
+  // Normalize rules to handle different formats
+  rules = normalizeAwardRules(rules);
 
   // Get all QSOs for user
   const allQSOs = await db

src/frontend/src/routes/awards/[id]/+page.svelte

@@ -0,0 +1,408 @@
+<script>
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { auth } from '$lib/stores.js';
+
+  let award = null;
+  let entities = [];
+  let loading = true;
+  let error = null;
+  let filter = 'all'; // all, worked, confirmed, unworked
+  let sort = 'name'; // name, status
+
+  onMount(async () => {
+    await loadAwardData();
+  });
+
+  async function loadAwardData() {
+    try {
+      loading = true;
+      error = null;
+
+      const awardId = $page.params.id;
+
+      // Fetch award entities
+      const response = await fetch(`/api/awards/${awardId}/entities`, {
+        headers: {
+          'Authorization': `Bearer ${$auth.token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to load award details');
+      }
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.error || 'Failed to load award details');
+      }
+
+      award = data.award;
+      entities = data.entities || [];
+    } catch (e) {
+      error = e.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function getFilteredEntities() {
+    let filtered = [...entities];
+
+    // Apply status filter
+    switch (filter) {
+      case 'worked':
+        filtered = filtered.filter((e) => e.worked);
+        break;
+      case 'confirmed':
+        filtered = filtered.filter((e) => e.confirmed);
+        break;
+      case 'unworked':
+        filtered = filtered.filter((e) => !e.worked);
+        break;
+    }
+
+    // Apply sorting
+    switch (sort) {
+      case 'name':
+        filtered.sort((a, b) => (a.entity || '').localeCompare(b.entity || ''));
+        break;
+      case 'status':
+        filtered.sort((a, b) => {
+          if (a.confirmed && !b.confirmed) return -1;
+          if (!a.confirmed && b.confirmed) return 1;
+          if (a.worked && !b.worked) return -1;
+          if (!a.worked && b.worked) return 1;
+          return (a.entity || '').localeCompare(b.entity || '');
+        });
+        break;
+    }
+
+    return filtered;
+  }
+
+  function getStatusClass(entity) {
+    if (entity.confirmed) return 'confirmed';
+    if (entity.worked) return 'worked';
+    return 'unworked';
+  }
+
+  function getStatusText(entity) {
+    if (entity.confirmed) return 'Confirmed';
+    if (entity.worked) return 'Worked';
+    return 'Not Worked';
+  }
+</script>
+
+<div class="container">
+  {#if loading}
+    <div class="loading">Loading award details...</div>
+  {:else if error}
+    <div class="error">
+      <p>Failed to load award: {error}</p>
+      <a href="/awards" class="btn">← Back to Awards</a>
+    </div>
+  {:else if award}
+    <div class="award-header">
+      <h1>{award.name}</h1>
+      <p class="description">{award.description}</p>
+      <a href="/awards" class="back-link">← Back to Awards</a>
+    </div>
+
+    <div class="controls">
+      <div class="filter-group">
+        <label>Filter:</label>
+        <select bind:value={filter}>
+          <option value="all">All Entities</option>
+          <option value="worked">Worked</option>
+          <option value="confirmed">Confirmed</option>
+          <option value="unworked">Unworked</option>
+        </select>
+      </div>
+
+      <div class="sort-group">
+        <label>Sort by:</label>
+        <select bind:value={sort}>
+          <option value="name">Name</option>
+          <option value="status">Status</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="summary">
+      <div class="summary-card">
+        <span class="summary-label">Total:</span>
+        <span class="summary-value">{entities.length}</span>
+      </div>
+      <div class="summary-card confirmed">
+        <span class="summary-label">Confirmed:</span>
+        <span class="summary-value">{entities.filter((e) => e.confirmed).length}</span>
+      </div>
+      <div class="summary-card worked">
+        <span class="summary-label">Worked:</span>
+        <span class="summary-value">{entities.filter((e) => e.worked).length}</span>
+      </div>
+      <div class="summary-card unworked">
+        <span class="summary-label">Needed:</span>
+        <span class="summary-value">{entities.filter((e) => !e.worked).length}</span>
+      </div>
+    </div>
+
+    <div class="entities-list">
+      {#if getFilteredEntities().length === 0}
+        <div class="empty">No entities match the current filter.</div>
+      {:else}
+        {#each getFilteredEntities() as entity (entity.entity)}
+          <div class="entity-card {getStatusClass(entity)}">
+            <div class="entity-info">
+              <div class="entity-name">{entity.entity || 'Unknown'}</div>
+              <div class="entity-details">
+                {#if entity.callsign}
+                  <span class="callsign">{entity.callsign}</span>
+                {/if}
+                {#if entity.band}
+                  <span class="band">{entity.band}</span>
+                {/if}
+                {#if entity.mode}
+                  <span class="mode">{entity.mode}</span>
+                {/if}
+                {#if entity.qsoDate}
+                  <span class="date">{entity.qsoDate}</span>
+                {/if}
+              </div>
+            </div>
+            <div class="entity-status">
+              <span class="status-badge {getStatusClass(entity)}">
+                {getStatusText(entity)}
+              </span>
+            </div>
+          </div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .loading,
+  .error,
+  .empty {
+    text-align: center;
+    padding: 3rem;
+    font-size: 1.1rem;
+    color: #666;
+  }
+
+  .error {
+    color: #d32f2f;
+  }
+
+  .award-header {
+    margin-bottom: 2rem;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+    color: #333;
+    margin-bottom: 0.5rem;
+  }
+
+  .description {
+    font-size: 1.1rem;
+    color: #666;
+    margin-bottom: 1rem;
+  }
+
+  .back-link {
+    display: inline-block;
+    color: #4a90e2;
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  .back-link:hover {
+    text-decoration: underline;
+  }
+
+  .controls {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+  }
+
+  .filter-group,
+  .sort-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  label {
+    font-weight: 600;
+    color: #333;
+  }
+
+  select {
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: white;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .summary-card {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .summary-card.confirmed {
+    border-color: #4a90e2;
+    background-color: #f0f7ff;
+  }
+
+  .summary-card.worked {
+    border-color: #66bb6a;
+    background-color: #f5fff5;
+  }
+
+  .summary-card.unworked {
+    border-color: #ffa726;
+    background-color: #fff8f0;
+  }
+
+  .summary-label {
+    display: block;
+    font-size: 0.875rem;
+    color: #666;
+    margin-bottom: 0.25rem;
+  }
+
+  .summary-value {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .entities-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 1rem;
+  }
+
+  .entity-card {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+  }
+
+  .entity-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .entity-card.confirmed {
+    border-left: 4px solid #4a90e2;
+  }
+
+  .entity-card.worked {
+    border-left: 4px solid #ffa726;
+  }
+
+  .entity-card.unworked {
+    border-left: 4px solid #bdbdbd;
+    opacity: 0.7;
+  }
+
+  .entity-info {
+    flex: 1;
+  }
+
+  .entity-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 0.5rem;
+  }
+
+  .entity-details {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .callsign,
+  .band,
+  .mode,
+  .date {
+    color: #666;
+  }
+
+  .entity-status {
+    flex-shrink: 0;
+  }
+
+  .status-badge {
+    padding: 0.35rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  .status-badge.confirmed {
+    background-color: #4a90e2;
+    color: white;
+  }
+
+  .status-badge.worked {
+    background-color: #ffa726;
+    color: white;
+  }
+
+  .status-badge.unworked {
+    background-color: #e0e0e0;
+    color: #666;
+  }
+
+  .btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background-color: #4a90e2;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: 500;
+    margin-top: 1rem;
+  }
+
+  .btn:hover {
+    background-color: #357abd;
+  }
+</style>