Sites ({sites.length})
+ {hasGroups && (
+
+ · {locationCount} location{locationCount !== 1 ? 's' : ''}
+
+ )}
- {/* Select All row (only when sites exist) */}
+ {/* Select All row */}
{sites.length > 0 && (
)}
- {/* Batch edit panel (appears when sites are selected) */}
+ {/* Batch edit panel */}
{selectedSiteIds.length > 0 && (
@@ -94,84 +219,27 @@ export default function SiteList({ onEditSite, onAddSite }: SiteListProps) {
No sites yet. Click on the map or use "+ Manual" to add one.
) : (
-
- {sites.map((site) => {
- const isBatchSelected = selectedSiteIds.includes(site.id);
- const isFlashing = flashIds.has(site.id);
+
+ {siteGroups.map((group) => {
+ if (group.sites.length === 1) {
+ // Single site — render normally
+ return renderSiteRow(group.sites[0], false);
+ }
+ // Multi-sector group
return (
-
selectSite(site.id)}
- >
- {/* Batch checkbox */}
-
toggleSiteSelection(site.id)}
- onClick={(e) => e.stopPropagation()}
- className="w-3.5 h-3.5 rounded border-gray-300 dark:border-dark-border accent-blue-600 flex-shrink-0"
- />
-
- {/* Color indicator */}
-
-
- {/* Info */}
-
-
- {site.name}
-
-
- {site.frequency} MHz · {site.power} dBm ·{' '}
- {site.antennaType === 'omni'
- ? 'Omni'
- : `Sector ${site.azimuth ?? 0}°`}
- {' '}· {site.height}m
-
-
-
- {/* Actions */}
-
-
-
-
+
+ {/* Group header */}
+
+
+ {group.label}
+
+
+ {group.sites.length} sectors
+
+ {/* Grouped site rows */}
+ {group.sites.map((site) => renderSiteRow(site, true))}
);
})}
diff --git a/frontend/src/components/ui/NumberInput.tsx b/frontend/src/components/ui/NumberInput.tsx
new file mode 100644
index 0000000..cbeef2a
--- /dev/null
+++ b/frontend/src/components/ui/NumberInput.tsx
@@ -0,0 +1,147 @@
+import { useCallback, useRef } from 'react';
+
+interface NumberInputProps {
+ label: string;
+ value: number;
+ onChange: (value: number) => void;
+ min?: number;
+ max?: number;
+ step?: number;
+ unit?: string;
+ hint?: string;
+ showSlider?: boolean;
+}
+
+export default function NumberInput({
+ label,
+ value,
+ onChange,
+ min = 0,
+ max = 100,
+ step = 1,
+ unit = '',
+ hint,
+ showSlider = true,
+}: NumberInputProps) {
+ const holdTimer = useRef
| null>(null);
+
+ const clamp = useCallback(
+ (v: number) => Math.max(min, Math.min(max, v)),
+ [min, max]
+ );
+
+ const increment = useCallback(() => {
+ onChange(clamp(value + step));
+ }, [value, step, onChange, clamp]);
+
+ const decrement = useCallback(() => {
+ onChange(clamp(value - step));
+ }, [value, step, onChange, clamp]);
+
+ // Hold-to-repeat for arrow buttons
+ const startHold = useCallback(
+ (fn: () => void) => {
+ fn();
+ holdTimer.current = setInterval(fn, 120);
+ },
+ []
+ );
+
+ const stopHold = useCallback(() => {
+ if (holdTimer.current) {
+ clearInterval(holdTimer.current);
+ holdTimer.current = null;
+ }
+ }, []);
+
+ const handleTextChange = (e: React.ChangeEvent) => {
+ const raw = e.target.value;
+ if (raw === '' || raw === '-') return;
+ const v = Number(raw);
+ if (!isNaN(v)) {
+ onChange(clamp(v));
+ }
+ };
+
+ // Format value for display — avoid long decimals
+ const displayValue = Number.isInteger(step) ? value : Number(value.toFixed(1));
+
+ return (
+
+ {/* Label + value badge */}
+
+
+
+ {displayValue} {unit}
+
+
+
+ {/* Text input + arrow buttons */}
+
+
+
+
+
+
+
+
+ {/* Slider for visual feedback */}
+ {showSlider && (
+
onChange(Number(e.target.value))}
+ min={min}
+ max={max}
+ step={step}
+ className="w-full h-1.5 bg-gray-200 dark:bg-dark-border rounded-lg appearance-none cursor-pointer accent-blue-600"
+ />
+ )}
+
+ {/* Min/max labels */}
+ {showSlider && (
+
+ {min}{unit}
+ {max}{unit}
+
+ )}
+
+ {hint &&
{hint}
}
+