award

frontend/src/components/DetailsPanel.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react';
-import { Construction } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -9,6 +8,7 @@ import {
 import { cn } from '@/lib/utils';
 import { pathBetween } from '@/lib/maidenhead';
 import { BandSlotGrid } from '@/components/BandSlotGrid';
+import { AwardRefSelector } from '@/components/AwardRefSelector';
 
 export interface DetailsState {
   state: string;
@@ -37,6 +37,10 @@ export interface DetailsState {
   srx?: number;
   stx?: number;
   email: string;
+  // Award references for the contacted station (set via the Awards tab picker).
+  // Semicolon-delimited "AWARD@REF" entries, e.g. "POTA@FR-11553;IOTA@EU-064".
+  // App.tsx maps these back to pota_ref/sota_ref/iota when saving the QSO.
+  award_refs?: string;
 }
 
 interface Props {
@@ -84,7 +88,6 @@ function Field({ label, span = 1, children }: { label: string; span?: 1 | 2 | 3
 export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid, details, onChange, wb, wbBusy, band, mode, tab, onTab, keyerActive }: Props) {
   const [internalOpen, setInternalOpen] = useState<TabName>('stats');
   const open = tab ?? internalOpen; // controlled when `tab` is provided
-
   // Bearing/distance from operator's home grid to the remote station.
   // Recomputed only when either grid actually changes.
   const path = useMemo(
@@ -197,9 +200,12 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
       )}
 
       {open === 'awards' && (
-        <div className="px-4 py-6 text-center text-xs text-muted-foreground">
-          <Construction className="size-6 mx-auto mb-2 text-muted-foreground/60" />
-          <div className="font-semibold text-sm text-foreground/70">Awards module coming soon</div>
+        <div className="px-3 py-2.5">
+          <AwardRefSelector
+            dxcc={details.dxcc}
+            value={details.award_refs ?? ''}
+            onChange={(v) => onChange({ award_refs: v })}
+          />
         </div>
       )}