up

frontend/src/components/DetailsPanel.tsx

@@ -55,6 +55,7 @@ interface Props {
   wbBusy?: boolean;
   band: string;
   mode: string;
+  bands?: string[]; // configured bands for the worked-before matrix columns
   imageUrl?: string;
   onOpenImage?: () => void;
   // Optional controlled active tab (so the app can switch it via keyboard).
@@ -117,7 +118,7 @@ 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) {
+export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid, details, onChange, wb, wbBusy, band, mode, bands, 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.
@@ -181,7 +182,7 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
       <div className="overflow-y-auto min-h-0">
       {open === 'stats' && (
         <div className="px-3 py-2.5">
-          <BandSlotGrid wb={wb} busy={!!wbBusy} currentBand={band} currentMode={mode} />
+          <BandSlotGrid wb={wb} busy={!!wbBusy} currentBand={band} currentMode={mode} bands={bands} />
         </div>
       )}
 
@@ -196,9 +197,16 @@ export function DetailsPanel({ callsign: _cs, prefix, operatorGrid, remoteGrid,
           <Field label="Prefix">
             <Input className="font-mono uppercase" value={prefix} readOnly tabIndex={-1} />
           </Field>
-          {/* DXCC #, CQ zone, ITU zone, Continent and Azimuth SP live in the
-              main entry strip — visible without opening F2. F2 keeps the
-              less-needed long-path bearing and both distances. */}
+          <Field label="CQ zone">
+            <Input inputMode="numeric" maxLength={2} className="font-mono" value={details.cqz ?? ''} placeholder="—"
+              onChange={(e) => { const v = e.target.value.replace(/\D/g, ''); onChange({ cqz: v === '' ? undefined : parseInt(v, 10) }); }} />
+          </Field>
+          <Field label="ITU zone">
+            <Input inputMode="numeric" maxLength={2} className="font-mono" value={details.ituz ?? ''} placeholder="—"
+              onChange={(e) => { const v = e.target.value.replace(/\D/g, ''); onChange({ ituz: v === '' ? undefined : parseInt(v, 10) }); }} />
+          </Field>
+          {/* DXCC #, Continent and Azimuth SP live in the main entry strip /
+              bandeau. F2 keeps CQ/ITU zones, the long-path bearing and distances. */}
           <Field label="Azimuth LP">
             <Input
               readOnly