awards

frontend/src/components/AwardsPanel.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Award as AwardIcon, RefreshCw, Loader2, Search, Pencil, X, Grid3x3, List, BarChart3 } from 'lucide-react';
-import { GetAwardDefs, GetAward, AwardCellQSOs, GetAwardStats } from '../../wailsjs/go/main/App';
+import { Award as AwardIcon, RefreshCw, Loader2, Search, Pencil, X, Grid3x3, List, BarChart3, AlertTriangle } from 'lucide-react';
+import { GetAwardDefs, GetAward, AwardCellQSOs, GetAwardStats, AwardMissingQSOs } from '../../wailsjs/go/main/App';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { AwardEditor } from '@/components/AwardEditor';
 
@@ -58,7 +59,7 @@ function ProgressBar({ worked, confirmed, total }: { worked: number; confirmed:
 
 type AwardListItem = { code: string; name: string; valid?: boolean };
 
-export function AwardsPanel() {
+export function AwardsPanel({ onEditQSO }: { onEditQSO?: (id: number) => void } = {}) {
   const [awardList, setAwardList] = useState<AwardListItem[]>([]);
   // Computed results are cached per award code — each award is scanned only the
   // first time it's selected (or when explicitly rescanned).
@@ -71,6 +72,7 @@ export function AwardsPanel() {
   const [view, setView] = useState<'grid' | 'list' | 'stats'>('grid');
   const [refFilter, setRefFilter] = useState<'all' | 'worked' | 'notworked' | 'worked_notconf'>('all');
   const [cell, setCell] = useState<{ ref: string; band: string; name?: string } | null>(null);
+  const [showMissing, setShowMissing] = useState(false);
   const [stats, setStats] = useState<AwardStats | null>(null);
   const [statsLoading, setStatsLoading] = useState(false);
 
@@ -105,7 +107,9 @@ export function AwardsPanel() {
   async function loadList() {
     try {
       const defs = ((await GetAwardDefs()) ?? []) as any[];
-      const list: AwardListItem[] = defs.map((d) => ({ code: d.code, name: d.name, valid: d.valid }));
+      const list: AwardListItem[] = defs
+        .map((d) => ({ code: d.code, name: d.name, valid: d.valid }))
+        .sort((a, b) => a.code.localeCompare(b.code));
       setAwardList(list);
       const first = list.find((a) => a.code === selected) ?? list[0];
       if (first) compute(first.code);
@@ -147,6 +151,22 @@ export function AwardsPanel() {
           </Button>
         </div>
         <AwardEditor open={editing} onClose={() => setEditing(false)} onSaved={() => { setByCode({}); loadList(); }} />
+        {/* Quick selector — scales when there are many awards. */}
+        {awardList.length > 0 && (
+          <div className="px-2 py-2 border-b border-border/40">
+            <Select value={selected} onValueChange={(code) => { setRefSearch(''); compute(code); }}>
+              <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Select an award…" /></SelectTrigger>
+              <SelectContent className="max-h-80">
+                {awardList.map((a) => (
+                  <SelectItem key={a.code} value={a.code} className="text-xs">
+                    <span className="font-semibold">{a.code}</span>
+                    <span className="text-muted-foreground"> — {a.name}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
         <div className="flex-1 overflow-auto">
           {err && <div className="p-3 text-xs text-destructive">{err}</div>}
           {awardList.map((a) => {
@@ -236,6 +256,13 @@ export function AwardsPanel() {
                 ))}
               </div>
               <span className="text-[11px] text-muted-foreground">{filteredRefs.length} ref{filteredRefs.length > 1 ? 's' : ''}</span>
+              <button
+                onClick={() => setShowMissing(true)}
+                className="flex items-center gap-1 text-[11px] text-amber-700 hover:text-amber-900 border border-amber-300 bg-amber-50 rounded px-2 py-1"
+                title="Contacts in this award's scope (right DXCC/band/mode) but with no reference — they're excluded until you add it"
+              >
+                <AlertTriangle className="size-3" /> Missing refs
+              </button>
               <div className="flex-1" />
               {/* Legend */}
               <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
@@ -364,6 +391,83 @@ export function AwardsPanel() {
       {cell && current && (
         <CellQSOModal code={current.code} cell={cell} onClose={() => setCell(null)} />
       )}
+      {showMissing && current && (
+        <MissingQSOModal code={current.code} name={current.name} onClose={() => setShowMissing(false)} onEditQSO={onEditQSO} />
+      )}
+    </div>
+  );
+}
+
+// MissingQSOModal lists contacts within an award's scope that carry NO
+// reference — the silent gaps. Rows open the QSO editor so the operator can add
+// the missing reference (e.g. a department for DDFM).
+function MissingQSOModal({ code, name, onClose, onEditQSO }: { code: string; name: string; onClose: () => void; onEditQSO?: (id: number) => void }) {
+  const [qsos, setQsos] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const load = () => {
+    setLoading(true);
+    AwardMissingQSOs(code)
+      .then((r) => setQsos((r ?? []) as any))
+      .catch(() => setQsos([]))
+      .finally(() => setLoading(false));
+  };
+  useEffect(() => { load(); }, [code]);
+  // Distinct stations vs total contacts (a station may appear on several QSOs).
+  const stations = useMemo(() => new Set(qsos.map((q) => String(q.callsign || '').toUpperCase())).size, [qsos]);
+  const fmt = (s: any) => { const d = new Date(s); return isNaN(d.getTime()) ? '' : d.toISOString().slice(0, 16).replace('T', ' '); };
+  return (
+    <div className="fixed inset-0 z-50 bg-black/40 grid place-items-center" onClick={onClose}>
+      <div className="bg-card border border-border rounded-lg shadow-xl w-[760px] max-h-[80vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-2 px-4 py-2.5 border-b">
+          <AlertTriangle className="size-4 text-amber-600" />
+          <span className="font-semibold text-sm">{code} — contacts missing a reference</span>
+          {name && <span className="text-xs text-muted-foreground truncate">{name}</span>}
+          <div className="flex-1" />
+          <button onClick={load} disabled={loading}
+            className="flex items-center gap-1 text-[11px] border border-border rounded px-2 py-1 hover:bg-accent/50 disabled:opacity-50"
+            title="Recompute now — contacts you've fixed drop off the list">
+            {loading ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />} Refresh
+          </button>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="size-4" /></button>
+        </div>
+        <div className="px-4 py-2 text-[11px] text-muted-foreground border-b border-border/50">
+          In this award's scope (DXCC / band / mode / dates) but no reference was found — so they don't count yet.
+          {onEditQSO && ' Click a row to open the QSO and add the reference.'}
+        </div>
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="p-4 text-xs text-muted-foreground flex items-center gap-2"><Loader2 className="size-3.5 animate-spin" /> Scanning…</div>
+          ) : qsos.length === 0 ? (
+            <div className="p-4 text-xs text-muted-foreground">
+              No gaps found. (Missing-reference detection applies to awards scoped to a DXCC entity — e.g. DDFM, WAS, RAC, WAJA.)
+            </div>
+          ) : (
+            <table className="w-full text-xs">
+              <thead className="sticky top-0 bg-card text-left text-muted-foreground border-b border-border">
+                <tr><th className="py-1 px-3 font-medium">Date (UTC)</th><th className="py-1 pr-2 font-medium">Callsign</th><th className="py-1 pr-2 font-medium">Band</th><th className="py-1 pr-2 font-medium">Mode</th><th className="py-1 pr-2 font-medium">Country</th><th className="py-1 pr-3 font-medium">QTH / Note</th></tr>
+              </thead>
+              <tbody>
+                {qsos.map((q, i) => (
+                  <tr key={q.id ?? i}
+                    className={cn('border-b border-border/30', onEditQSO && 'cursor-pointer hover:bg-accent/40')}
+                    onClick={() => onEditQSO && q.id && onEditQSO(q.id as number)}>
+                    <td className="py-1 px-3 font-mono">{fmt(q.qso_date)}</td>
+                    <td className="py-1 pr-2 font-mono font-semibold">{q.callsign}</td>
+                    <td className="py-1 pr-2">{q.band}</td>
+                    <td className="py-1 pr-2">{q.mode}</td>
+                    <td className="py-1 pr-2 text-muted-foreground truncate max-w-[120px]">{q.country}</td>
+                    <td className="py-1 pr-3 text-muted-foreground truncate max-w-[200px]">{q.qth || q.notes}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+        <div className="px-4 py-2 border-t text-[11px] text-muted-foreground">
+          <span className="font-semibold text-foreground">{stations}</span> station{stations > 1 ? 's' : ''} ·{' '}
+          {qsos.length} contact{qsos.length > 1 ? 's' : ''} without a reference
+        </div>
+      </div>
     </div>
   );
 }