up

frontend/src/components/QSLManagerModal.tsx

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { UploadCloud, DownloadCloud, Search, Loader2, ScrollText, ListChecks } from 'lucide-react';
+import { UploadCloud, DownloadCloud, Search, Loader2, ScrollText, ListChecks, Trees, ExternalLink } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
-import { FindQSOsForUpload, UploadQSOsManual, DownloadConfirmations } from '../../wailsjs/go/main/App';
+import { FindQSOsForUpload, UploadQSOsManual, DownloadConfirmations, SyncPOTAHunterLog, ListQSO, BulkUpdateQSL } from '../../wailsjs/go/main/App';
+import { Input } from '@/components/ui/input';
 import { EventsOn } from '../../wailsjs/runtime/runtime';
 
 type UploadRow = {
@@ -23,8 +24,26 @@ const SERVICES = [
   { v: 'qrz',     label: 'QRZ.com' },
   { v: 'clublog', label: 'Club Log' },
   { v: 'lotw',    label: 'LoTW' },
+  { v: 'pota',    label: 'POTA hunter log' },
+  { v: 'paper',   label: 'Paper QSL' },
 ];
 
+const QSL_STATUSES = [
+  { v: '_', label: '— leave —' },
+  { v: 'Y', label: 'Yes' },
+  { v: 'N', label: 'No' },
+  { v: 'R', label: 'Requested' },
+  { v: 'I', label: 'Ignore' },
+];
+
+type LogQSO = {
+  id: number; qso_date: string; callsign: string; band: string; mode: string; country?: string;
+  qsl_sent?: string; qsl_rcvd?: string; qsl_via?: string; qsl_sent_date?: string; qsl_rcvd_date?: string;
+};
+
+type POTAUnmatched = { activator: string; date: string; band: string; reference: string; reason: string; qso_id: number };
+type POTASync = { fetched: number; updated: number; already_tagged: number; added: number; unmatched: number; unmatched_list: POTAUnmatched[] };
+
 const SENT_STATUSES = [
   { v: 'R', label: 'Requested' },
   { v: 'N', label: 'No' },
@@ -42,10 +61,82 @@ function fmtDate(iso: string): string {
   return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
 }
 
+// fmtQslDate renders a QSL/LoTW/eQSL/ClubLog date (ADIF YYYYMMDD, or an ISO
+// datetime) as YYYY-MM-DD — same shape as the QSO date, without the time.
+export function fmtQslDate(s?: string): string {
+  if (!s) return '';
+  const t = s.trim();
+  const m = t.match(/^(\d{4})(\d{2})(\d{2})/);
+  if (m) return `${m[1]}-${m[2]}-${m[3]}`;
+  const d = new Date(t);
+  if (!isNaN(d.getTime())) return d.toISOString().slice(0, 10);
+  return t;
+}
+
 // QSL Manager as an in-app tab panel: upload logged QSOs to online logbooks
 // and download confirmations, while the rest of the app stays usable.
-export function QSLManagerPanel() {
+export function QSLManagerPanel({ onEditQSO }: { onEditQSO?: (id: number) => void } = {}) {
   const [service, setService] = useState('lotw');
+  const [potaSyncing, setPotaSyncing] = useState(false);
+  const [potaRes, setPotaRes] = useState<POTASync | null>(null);
+  const [potaErr, setPotaErr] = useState('');
+  const [potaAddMissing, setPotaAddMissing] = useState(false);
+
+  async function syncPota() {
+    setPotaSyncing(true); setPotaErr(''); setPotaRes(null);
+    try { setPotaRes((await SyncPOTAHunterLog(potaAddMissing)) as any as POTASync); }
+    catch (e: any) { setPotaErr(String(e?.message ?? e)); }
+    finally { setPotaSyncing(false); }
+  }
+
+  // ── Paper QSL: search a callsign, bulk-set sent/received + via + date ──
+  const [paperCall, setPaperCall] = useState('');
+  const [paperRows, setPaperRows] = useState<LogQSO[]>([]);
+  const [paperSel, setPaperSel] = useState<Set<number>>(new Set());
+  const [paperBusy, setPaperBusy] = useState(false);
+  const [paperMsg, setPaperMsg] = useState('');
+  const [qslRcvd, setQslRcvd] = useState('Y');
+  const [qslSent, setQslSent] = useState('_');
+  const [qslRcvdDate, setQslRcvdDate] = useState('');
+  const [qslSentDate, setQslSentDate] = useState('');
+  const [qslVia, setQslVia] = useState('');
+
+  const searchPaper = useCallback(async () => {
+    const c = paperCall.trim().toUpperCase();
+    if (!c) return;
+    setPaperBusy(true); setPaperMsg('');
+    try {
+      const r: any = await ListQSO({ callsign: c, limit: 1000 } as any);
+      const list = (r ?? []) as LogQSO[];
+      setPaperRows(list);
+      setPaperSel(new Set(list.map((x) => x.id)));
+    } catch (e: any) { setPaperMsg(String(e?.message ?? e)); setPaperRows([]); }
+    finally { setPaperBusy(false); }
+  }, [paperCall]);
+
+  function togglePaper(id: number) {
+    setPaperSel((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
+  }
+  const paperAllSel = paperRows.length > 0 && paperSel.size === paperRows.length;
+
+  async function applyPaper() {
+    const ids = paperRows.filter((r) => paperSel.has(r.id)).map((r) => r.id);
+    if (ids.length === 0) return;
+    setPaperBusy(true); setPaperMsg('');
+    const ymd = (d: string) => d.replaceAll('-', '');
+    try {
+      const n = await BulkUpdateQSL(ids as any, {
+        sent_status: qslSent === '_' ? '' : qslSent,
+        rcvd_status: qslRcvd === '_' ? '' : qslRcvd,
+        sent_date: ymd(qslSentDate),
+        rcvd_date: ymd(qslRcvdDate),
+        via: qslVia,
+      } as any);
+      setPaperMsg(`${n} QSO updated.`);
+      await searchPaper();
+    } catch (e: any) { setPaperMsg(String(e?.message ?? e)); }
+    finally { setPaperBusy(false); }
+  }
   const [sent, setSent] = useState('R');
   const [rows, setRows] = useState<UploadRow[]>([]);
   const [selected, setSelected] = useState<Set<number>>(new Set());
@@ -149,18 +240,57 @@ export function QSLManagerPanel() {
             <SelectContent>{SERVICES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
           </Select>
         </div>
-        <div className="flex flex-col gap-1">
-          <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Sent status</label>
-          <Select value={sent} onValueChange={setSent}>
-            <SelectTrigger className="h-8 w-44"><SelectValue /></SelectTrigger>
-            <SelectContent>{SENT_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
-          </Select>
-        </div>
-        <Button size="sm" className="h-8" onClick={selectRequired} disabled={searching || busy}>
-          {searching ? <Loader2 className="size-3.5 animate-spin" /> : <Search className="size-3.5" />}
-          Select required
-        </Button>
+        {service === 'pota' ? (
+          <>
+            <Button size="sm" className="h-8" onClick={syncPota} disabled={potaSyncing}>
+              {potaSyncing ? <Loader2 className="size-3.5 animate-spin" /> : <Trees className="size-3.5" />}
+              Sync hunter log
+            </Button>
+            <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground cursor-pointer self-center" title="Insert hunter-log contacts whose callsign isn't in your log yet (callsign/date/band/mode/park)">
+              <Checkbox checked={potaAddMissing} onCheckedChange={(c) => setPotaAddMissing(!!c)} />
+              Add not-found QSOs to my log
+            </label>
+            <span className="text-[11px] text-muted-foreground self-center">Token in Settings → External services → POTA.</span>
+          </>
+        ) : service === 'paper' ? (
+          <>
+            <div className="flex flex-col gap-1">
+              <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Callsign</label>
+              <Input className="h-8 w-40 font-mono uppercase" value={paperCall}
+                onChange={(e) => setPaperCall(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') searchPaper(); }}
+                placeholder="e.g. DL1ABC" />
+            </div>
+            <Button size="sm" className="h-8" onClick={searchPaper} disabled={paperBusy || !paperCall.trim()}>
+              {paperBusy ? <Loader2 className="size-3.5 animate-spin" /> : <Search className="size-3.5" />}
+              Search
+            </Button>
+            <span className="text-[11px] text-muted-foreground self-center">Find a callsign, then set QSL sent/received + via + date on the selection.</span>
+          </>
+        ) : (
+          <>
+            <div className="flex flex-col gap-1">
+              <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Sent status</label>
+              <Select value={sent} onValueChange={setSent}>
+                <SelectTrigger className="h-8 w-44"><SelectValue /></SelectTrigger>
+                <SelectContent>{SENT_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
+              </Select>
+            </div>
+            <Button size="sm" className="h-8" onClick={selectRequired} disabled={searching || busy}>
+              {searching ? <Loader2 className="size-3.5 animate-spin" /> : <Search className="size-3.5" />}
+              Select required
+            </Button>
+          </>
+        )}
         <div className="flex-1" />
+        {service === 'pota' && potaRes && (
+          <span className="text-xs text-muted-foreground">
+            {potaRes.updated} updated · {potaRes.added} added · {potaRes.already_tagged} already · {potaRes.unmatched} unmatched / {potaRes.fetched}
+          </span>
+        )}
+        {service === 'paper' && paperRows.length > 0 && (
+          <span className="text-xs text-muted-foreground">{paperRows.length} QSO · {paperSel.size} selected</span>
+        )}
         {!showLog && viewMode === 'confirmations' && (
           <div className="flex flex-col gap-1">
             <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Filter</label>
@@ -192,7 +322,81 @@ export function QSLManagerPanel() {
       <div className="flex-1 overflow-auto px-3 py-2 min-h-0">
         {error && <div className="text-xs text-rose-700 mb-2">{error}</div>}
 
-        {showLog ? (
+        {service === 'paper' ? (
+          paperRows.length === 0 ? (
+            <div className="text-sm text-muted-foreground py-10 text-center">Search a callsign to list its QSOs, then set QSL status below.</div>
+          ) : (
+            <table className="w-full text-xs border-collapse">
+              <thead className="sticky top-0 bg-card">
+                <tr className="text-left text-muted-foreground border-b border-border">
+                  <th className="py-1.5 px-2 w-8"><Checkbox checked={paperAllSel} onCheckedChange={() => setPaperSel(paperAllSel ? new Set() : new Set(paperRows.map((r) => r.id)))} /></th>
+                  <th className="py-1.5 px-2">Date UTC</th><th className="py-1.5 px-2">Callsign</th>
+                  <th className="py-1.5 px-2">Band</th><th className="py-1.5 px-2">Mode</th>
+                  <th className="py-1.5 px-2">QSL Sent</th><th className="py-1.5 px-2">QSL Rcvd</th><th className="py-1.5 px-2">Via</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paperRows.map((r) => (
+                  <tr key={r.id}
+                    className={cn('border-b border-border/40 cursor-pointer hover:bg-accent/30', paperSel.has(r.id) && 'bg-primary/5')}
+                    onClick={() => togglePaper(r.id)}>
+                    <td className="py-1 px-2" onClick={(e) => e.stopPropagation()}><Checkbox checked={paperSel.has(r.id)} onCheckedChange={() => togglePaper(r.id)} /></td>
+                    <td className="py-1 px-2 font-mono">{fmtDate(r.qso_date)}</td>
+                    <td className="py-1 px-2 font-mono font-bold">{r.callsign}</td>
+                    <td className="py-1 px-2">{r.band}</td>
+                    <td className="py-1 px-2">{r.mode}</td>
+                    <td className="py-1 px-2 font-mono">{r.qsl_sent || '—'}{r.qsl_sent_date ? ` ${fmtQslDate(r.qsl_sent_date)}` : ''}</td>
+                    <td className="py-1 px-2 font-mono">{r.qsl_rcvd || '—'}{r.qsl_rcvd_date ? ` ${fmtQslDate(r.qsl_rcvd_date)}` : ''}</td>
+                    <td className="py-1 px-2 text-muted-foreground truncate max-w-[160px]">{r.qsl_via}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )
+        ) : service === 'pota' ? (
+          <div className="space-y-3">
+            {potaErr && <div className="text-xs rounded-md px-3 py-2 border border-destructive/30 bg-destructive/10 text-destructive">{potaErr}</div>}
+            {!potaRes && !potaErr && !potaSyncing && (
+              <div className="text-sm text-muted-foreground py-10 text-center">Click “Sync hunter log” to fetch your pota.app log and stamp park references.</div>
+            )}
+            {potaSyncing && <div className="text-sm text-muted-foreground py-10 text-center flex items-center justify-center gap-2"><Loader2 className="size-4 animate-spin" /> Syncing with pota.app…</div>}
+            {potaRes && (
+              <>
+                <div className="text-xs rounded-md px-3 py-2 border border-emerald-300 bg-emerald-50 text-emerald-800">
+                  {potaRes.updated} QSO updated · {potaRes.added} added to log · {potaRes.already_tagged} already tagged · {potaRes.unmatched} unmatched (of {potaRes.fetched} hunter-log entries). Rescan the POTA award to count the new references.
+                </div>
+                {potaRes.unmatched_list?.length > 0 && (
+                  <table className="w-full text-xs border-collapse">
+                    <thead className="sticky top-0 bg-card">
+                      <tr className="text-left text-muted-foreground border-b border-border">
+                        <th className="py-1.5 px-2">Activator</th><th className="py-1.5 px-2">Date UTC</th>
+                        <th className="py-1.5 px-2">Band</th><th className="py-1.5 px-2">Park</th>
+                        <th className="py-1.5 px-2">Why unmatched</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {potaRes.unmatched_list.map((u, i) => (
+                        <tr key={i}
+                          className={cn('border-b border-border/40', u.qso_id > 0 && 'cursor-pointer hover:bg-accent/30')}
+                          onClick={() => u.qso_id > 0 && onEditQSO?.(u.qso_id)}
+                          title={u.qso_id > 0 ? 'Open this QSO to fix it' : ''}>
+                          <td className="py-1 px-2 font-mono font-bold">{u.activator}</td>
+                          <td className="py-1 px-2 font-mono">{u.date}</td>
+                          <td className="py-1 px-2">{u.band}</td>
+                          <td className="py-1 px-2 font-mono">{u.reference}</td>
+                          <td className="py-1 px-2 text-muted-foreground">
+                            {u.reason}
+                            {u.qso_id > 0 && <ExternalLink className="inline size-3 ml-1 opacity-60" />}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </>
+            )}
+          </div>
+        ) : showLog ? (
           <div className="font-mono text-[11px] space-y-0.5 py-1">
             {logLines.length === 0 ? (
               <div className="text-muted-foreground flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> starting…</div>
@@ -270,7 +474,43 @@ export function QSLManagerPanel() {
         )}
       </div>
 
-      {/* Action bar */}
+      {/* Paper-QSL apply form */}
+      {service === 'paper' && (
+        <div className="flex items-end flex-wrap gap-3 px-3 py-2 border-t border-border bg-muted/20 shrink-0">
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">QSL received</label>
+            <div className="flex gap-1.5">
+              <Select value={qslRcvd} onValueChange={setQslRcvd}>
+                <SelectTrigger className="h-8 w-28"><SelectValue /></SelectTrigger>
+                <SelectContent>{QSL_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
+              </Select>
+              <Input type="date" className="h-8 w-36" value={qslRcvdDate} onChange={(e) => setQslRcvdDate(e.target.value)} title="QSL received date" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">QSL sent</label>
+            <div className="flex gap-1.5">
+              <Select value={qslSent} onValueChange={setQslSent}>
+                <SelectTrigger className="h-8 w-28"><SelectValue /></SelectTrigger>
+                <SelectContent>{QSL_STATUSES.map((s) => <SelectItem key={s.v} value={s.v}>{s.label}</SelectItem>)}</SelectContent>
+              </Select>
+              <Input type="date" className="h-8 w-36" value={qslSentDate} onChange={(e) => setQslSentDate(e.target.value)} title="QSL sent date" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[10px] uppercase tracking-wider text-muted-foreground">Via</label>
+            <Input className="h-8 w-40" value={qslVia} onChange={(e) => setQslVia(e.target.value)} placeholder="BUREAU / DIRECT / manager" />
+          </div>
+          <div className="flex-1" />
+          {paperMsg && <span className="text-[11px] text-muted-foreground self-center">{paperMsg}</span>}
+          <Button size="sm" onClick={applyPaper} disabled={paperBusy || paperSel.size === 0}>
+            Apply to {paperSel.size} selected
+          </Button>
+        </div>
+      )}
+
+      {/* Action bar (upload/download — not for POTA / Paper QSL) */}
+      {service !== 'pota' && service !== 'paper' && (
       <div className="flex items-center justify-between gap-2 px-3 py-2 border-t border-border bg-muted/20 shrink-0">
         <div className="flex items-center gap-2">
           <Button variant="outline" size="sm" onClick={download} disabled={busy}
@@ -286,6 +526,7 @@ export function QSLManagerPanel() {
           <UploadCloud className="size-3.5" /> Upload {selectedCount} to {serviceLabel}
         </Button>
       </div>
+      )}
     </div>
   );
 }