fix(industrial): improve OSM review UX + public map visibility

Four UX issues surfaced when reviewing the new OSM-sync pipeline against
the actual 2,193 imports — fixed in this commit:

1. Admin queue surfaced noise first.
   `ListOsmPendingHandler` now sorts by `totalAreaHa DESC` (real KCN
   first, single-factory `landuse=industrial` polygons last) and accepts
   `minAreaHa` (default 50 ha) plus a `region` filter. The admin page
   exposes both as dropdowns — "Tất cả / ≥ 5 / ≥ 50 / ≥ 200 / ≥ 500 ha".
   Top-of-queue is now Bàu Bàng (2,597 ha) and Nhơn Trạch (2,535 ha).

2. Promote dialog said "KCN KCN Đại An" — duplicate prefix.
   Reworded to "Sắp promote: <name>" so the row name stands on its own.

3. Province was "Chưa xác định" on 2,107 of 2,193 OSM rows.
   The OSM tags lacked any addr:* hint, so the importer never had
   anything to write. Added `scripts/data/vn-province-centroids.ts` (63
   provinces with capital-city coords) and a `nearestProvince(lat, lng)`
   fallback in `parseFeature()`. Shipped a one-shot backfill script
   `scripts/backfill-osm-provinces.ts` and ran it — every existing OSM
   row now has a province (Hồ Chí Minh: 408, Lạng Sơn: 232,
   Quảng Ninh: 220, Hà Nội: 172, Hải Phòng: 105, …). Admin can correct
   on promote if the nearest-centroid heuristic picked the wrong
   neighbour for a long-thin province.

4. Public map looked empty — only 20 curated parks visible.
   Added an opt-in toggle "Hiển thị KCN OSM" with a small legend above
   the map. When on, the bbox endpoint returns OSM raw rows too; markers
   render in amber (vs. green for curated) at slightly smaller radius
   and lower opacity, so the visual hierarchy stays clear. Refetch is
   wired through a ref so the toggle takes effect without remounting
   the map.

Verified in browser preview: zoom-out shows clusters of 320 / 71 / etc.
across the country with the toggle on, and just three small clusters
(20 curated parks) when off.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/[locale]/(public)/khu-cong-nghiep/page.tsx

@@ -2,6 +2,7 @@
 
 import { Factory, Map as MapIcon, List, Columns } from 'lucide-react';
 import * as React from 'react';
+import { OsmMapLegend } from '@/components/khu-cong-nghiep/osm-map-legend';
 import { OsmParkBboxMap } from '@/components/khu-cong-nghiep/osm-park-bbox-map';
 import { ParkCard } from '@/components/khu-cong-nghiep/park-card';
 import { ParkFilterBar } from '@/components/khu-cong-nghiep/park-filter-bar';
@@ -19,6 +20,10 @@ export default function KhuCongNghiepPage() {
     limit: PAGE_SIZE,
   });
   const [viewMode, setViewMode] = React.useState<ViewMode>('split');
+  // When true, the bbox map also shows raw OSM-imported parks (amber
+  // markers) on top of the curated catalog. Off by default — most users
+  // want only the verified set.
+  const [includeOsmRaw, setIncludeOsmRaw] = React.useState(false);
 
   const { data, isLoading, isError } = useIndustrialParksSearch(filters);
 
@@ -113,7 +118,16 @@ export default function KhuCongNghiepPage() {
 
             {/* Map-only view — bbox-driven, loads ALL parks in viewport */}
             {viewMode === 'map' && (
-              <OsmParkBboxMap className="h-[calc(100vh-260px)]" />
+              <>
+                <OsmMapLegend
+                  includeOsmRaw={includeOsmRaw}
+                  onToggleOsmRaw={setIncludeOsmRaw}
+                />
+                <OsmParkBboxMap
+                  className="h-[calc(100vh-300px)]"
+                  includeOsmRaw={includeOsmRaw}
+                />
+              </>
             )}
 
             {/* Split view: list left, sticky bbox map right (lg+ only) */}
@@ -126,8 +140,16 @@ export default function KhuCongNghiepPage() {
                     ))}
                   </div>
                 </div>
-                <div className="hidden lg:block">
-                  <OsmParkBboxMap className="sticky top-20 h-[calc(100vh-220px)]" />
+                <div className="hidden lg:flex lg:flex-col lg:gap-2">
+                  <OsmMapLegend
+                    includeOsmRaw={includeOsmRaw}
+                    onToggleOsmRaw={setIncludeOsmRaw}
+                    compact
+                  />
+                  <OsmParkBboxMap
+                    className="sticky top-20 h-[calc(100vh-260px)]"
+                    includeOsmRaw={includeOsmRaw}
+                  />
                 </div>
               </div>
             )}