feat(industrial): OSM bulk import + bbox map + admin review (PR 2-4/4)

Pulls every `landuse=industrial` feature from OpenStreetMap into the
IndustrialPark catalog and surfaces it on the public KCN map. Admins can
promote raw OSM rows into the public catalog or lock individual fields
to protect them from the monthly reconciliation sync.

PR 2 — Bulk import script (scripts/sync-osm-industrial-parks.ts):
  • Splits Vietnam into 4 chunks (north / northCentral / southCentral /
    south) to stay under Overpass 504 timeouts.
  • Posts to overpass-api.de with form-encoded body, converts via
    osmtogeojson, derives centroid + area via @turf/centroid + @turf/area.
  • Upsert keyed on osmId. Honours `osmLocked` (skip row entirely) and
    `lockedFields[]` (skip individual columns) so admin edits survive.
  • Inserts use $executeRawUnsafe with ST_SetSRID(ST_MakePoint, 4326)
    because Prisma can't manage the Unsupported geometry NOT NULL column.
  • CLI flags: --dry-run, --chunk=NAME.

PR 3 — Bbox spatial API + Mapbox layer:
  • GET /industrial/parks/by-bbox returns a GeoJSON FeatureCollection
    filtered by ST_MakeEnvelope. Sends Point-only at zoom < 12,
    MultiPolygon outline at zoom >= 12 to keep payloads light.
  • Public consumers see MANUAL + OSM_PROMOTED only; admins can pass
    includeOsmRaw=true to also see raw OSM imports.
  • OsmParkBboxMap component drives Mapbox from viewport moveend with
    AbortController-debounced fetches, clusters at zoom < 12, expands
    via getClusterExpansionZoom (callback-style API).
  • /khu-cong-nghiep page now uses the bbox map in map + split views.

PR 4 — Admin review queue + monthly cron:
  • Commands: PromoteOsmPark (OSM → OSM_PROMOTED + isPublic=true,
    optional lockFields), LockOsmPark (toggle row-level skip flag).
  • Query: ListOsmPending lists rows with dataSource='OSM' for review.
  • OsmSyncCronService runs `0 2 1 * *` Asia/Ho_Chi_Minh and spawns
    sync-osm-industrial-parks.ts per chunk. Skipped unless
    OSM_SYNC_ENABLED=true so dev never accidentally hits Overpass.
  • New admin page /admin/industrial/osm-review: searchable table,
    promote dialog with quick-pick lock fields (name, developer,
    description, etc.) plus a free-text fallback, lock/unlock toggle,
    deep-link to openstreetmap.org for verification.

Repository changes:
  • PrismaIndustrialParkRepository now filters public queries to
    `isPublic = true AND dataSource IN (MANUAL, OSM_PROMOTED)` so raw
    OSM rows stay hidden from end users.
  • Added *.rdb to .gitignore (Redis dump local artefact).

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

apps/web/app/[locale]/(admin)/admin/industrial/osm-review/page.tsx

@@ -0,0 +1,500 @@
+'use client';
+
+import {
+  CheckCircle,
+  Lock,
+  LockOpen,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+  ExternalLink,
+  X,
+  Search,
+  AlertTriangle,
+} from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Link } from '@/i18n/navigation';
+import {
+  industrialApi,
+  type OsmPendingItem,
+  type OsmPendingResult,
+} from '@/lib/khu-cong-nghiep-api';
+
+/**
+ * Admin OSM review queue. Lists parks with `dataSource = 'OSM'` (raw imports
+ * from the monthly Overpass sync). Admins decide what to do with each row:
+ *
+ *   - Promote → flips `dataSource` to `OSM_PROMOTED` and `isPublic = true`,
+ *     so the row shows up in the public catalog. Optionally lock specific
+ *     fields so the next sync run won't overwrite them.
+ *   - Lock / Unlock → toggles `osmLocked`. When locked, the row is skipped
+ *     entirely by the sync cron.
+ *
+ * Fields that admins commonly want to lock after edits: `name`, `developer`,
+ * `description`, `targetIndustries`. We surface these as quick-pick checkboxes
+ * in the promote dialog, plus a free-text fallback for anything else.
+ */
+
+const PAGE_SIZE = 50;
+
+const QUICK_LOCK_FIELDS: { key: string; label: string }[] = [
+  { key: 'name', label: 'Tên KCN' },
+  { key: 'developer', label: 'Chủ đầu tư' },
+  { key: 'description', label: 'Mô tả' },
+  { key: 'targetIndustries', label: 'Ngành mục tiêu' },
+  { key: 'totalAreaHa', label: 'Diện tích' },
+  { key: 'status', label: 'Trạng thái' },
+];
+
+function formatTags(tags: Record<string, string> | null): string {
+  if (!tags) return '—';
+  // Surface the most useful keys first, then anything else, capped to keep
+  // the cell readable. Tag values are user-generated on OSM so we trim hard.
+  const priorityKeys = ['name', 'name:vi', 'name:en', 'operator', 'website'];
+  const ordered = [
+    ...priorityKeys.filter((k) => k in tags),
+    ...Object.keys(tags).filter((k) => !priorityKeys.includes(k)),
+  ];
+  return ordered
+    .slice(0, 4)
+    .map((k) => `${k}=${String(tags[k]).slice(0, 30)}`)
+    .join(', ');
+}
+
+export default function AdminOsmReviewPage() {
+  const [result, setResult] = useState<OsmPendingResult | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+
+  // Filters
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [provinceFilter, setProvinceFilter] = useState('');
+
+  // Promote dialog state
+  const [promoteTarget, setPromoteTarget] = useState<OsmPendingItem | null>(null);
+  const [lockFields, setLockFields] = useState<Set<string>>(new Set());
+  const [extraField, setExtraField] = useState('');
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const fetchQueue = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await industrialApi.listOsmPending({
+        page,
+        limit: PAGE_SIZE,
+        q: search || undefined,
+        province: provinceFilter || undefined,
+      });
+      setResult(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Không thể tải hàng đợi OSM');
+    } finally {
+      setLoading(false);
+    }
+  }, [page, search, provinceFilter]);
+
+  useEffect(() => {
+    fetchQueue();
+  }, [fetchQueue]);
+
+  const submitSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setPage(1);
+    setSearch(searchInput.trim());
+  };
+
+  const handleToggleLock = async (item: OsmPendingItem) => {
+    setActionError(null);
+    try {
+      await industrialApi.lockOsm(item.id, !item.osmLocked);
+      fetchQueue();
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : 'Không thể cập nhật trạng thái lock');
+    }
+  };
+
+  const openPromoteDialog = (item: OsmPendingItem) => {
+    setPromoteTarget(item);
+    // Default: lock the name (so the next OSM sync doesn't rename it back to
+    // whatever Overpass has). Admins can uncheck if they want OSM to win.
+    setLockFields(new Set(['name']));
+    setExtraField('');
+    setActionError(null);
+  };
+
+  const closePromoteDialog = () => {
+    setPromoteTarget(null);
+    setLockFields(new Set());
+    setExtraField('');
+  };
+
+  const handlePromote = async () => {
+    if (!promoteTarget) return;
+    setActionLoading(true);
+    setActionError(null);
+    try {
+      const fields = Array.from(lockFields);
+      const extras = extraField
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean);
+      await industrialApi.promoteOsm(promoteTarget.id, [...fields, ...extras]);
+      closePromoteDialog();
+      fetchQueue();
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : 'Promote thất bại. Vui lòng thử lại.');
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const toggleLockField = (key: string) => {
+    setLockFields((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      {actionError && (
+        <div className="flex items-center justify-between rounded-md border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+          <span>{actionError}</span>
+          <button onClick={() => setActionError(null)} className="ml-2" aria-label="Đóng">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-heading-md font-semibold tracking-tight">Review KCN từ OpenStreetMap</h1>
+          <p className="text-sm text-foreground-muted">
+            Xét duyệt các KCN nhập từ OSM (chưa public). Promote → public catalog hoặc lock để giữ nguyên dữ liệu.
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={fetchQueue} disabled={loading}>
+          <RefreshCw className={`mr-1.5 h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`} />
+          Làm mới
+        </Button>
+      </div>
+
+      {/* Filters */}
+      <Card className="shadow-elevation-1">
+        <CardContent className="p-4">
+          <form className="flex flex-wrap items-end gap-3" onSubmit={submitSearch}>
+            <div className="flex-1 min-w-[200px]">
+              <label className="mb-1 block text-xs text-foreground-dim">Tìm kiếm</label>
+              <Input
+                placeholder="Tên KCN, chủ đầu tư..."
+                value={searchInput}
+                onChange={(e) => setSearchInput(e.target.value)}
+                className="h-8 text-sm"
+              />
+            </div>
+            <div className="w-40">
+              <label className="mb-1 block text-xs text-foreground-dim">Tỉnh / TP</label>
+              <Input
+                placeholder="Bắc Ninh, Đồng Nai..."
+                value={provinceFilter}
+                onChange={(e) => {
+                  setPage(1);
+                  setProvinceFilter(e.target.value);
+                }}
+                className="h-8 text-sm"
+              />
+            </div>
+            <Button type="submit" size="sm">
+              <Search className="mr-1.5 h-3.5 w-3.5" />
+              Tìm
+            </Button>
+            {(search || provinceFilter) && (
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={() => {
+                  setSearchInput('');
+                  setSearch('');
+                  setProvinceFilter('');
+                  setPage(1);
+                }}
+              >
+                <X className="mr-1 h-3 w-3" />
+                Xóa bộ lọc
+              </Button>
+            )}
+          </form>
+        </CardContent>
+      </Card>
+
+      {/* Table */}
+      <Card className="shadow-elevation-1 overflow-hidden">
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="flex h-48 items-center justify-center">
+              <RefreshCw className="h-5 w-5 animate-spin text-foreground-muted" />
+            </div>
+          ) : error ? (
+            <div className="flex h-48 flex-col items-center justify-center gap-2">
+              <p className="text-sm text-destructive">{error}</p>
+              <Button variant="outline" size="sm" onClick={fetchQueue}>
+                Thử lại
+              </Button>
+            </div>
+          ) : !result || result.data.length === 0 ? (
+            <div className="flex h-48 flex-col items-center justify-center gap-2">
+              <CheckCircle className="h-8 w-8 text-signal-up" />
+              <p className="text-sm text-foreground-muted">Không có KCN nào trong hàng đợi</p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader className="sticky top-0 z-sticky-header bg-background-elevated">
+                  <TableRow className="border-b border-border-strong">
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">
+                      Tên KCN
+                    </TableHead>
+                    <TableHead className="hidden sm:table-cell text-heading-xs uppercase text-foreground-muted">
+                      Tỉnh
+                    </TableHead>
+                    <TableHead className="hidden md:table-cell text-heading-xs uppercase text-foreground-muted text-right">
+                      Diện tích (ha)
+                    </TableHead>
+                    <TableHead className="hidden lg:table-cell text-heading-xs uppercase text-foreground-muted">
+                      OSM
+                    </TableHead>
+                    <TableHead className="hidden xl:table-cell text-heading-xs uppercase text-foreground-muted">
+                      Tags
+                    </TableHead>
+                    <TableHead className="text-heading-xs uppercase text-foreground-muted">
+                      Trạng thái
+                    </TableHead>
+                    <TableHead className="text-right text-heading-xs uppercase text-foreground-muted">
+                      Hành động
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {result.data.map((item) => (
+                    <TableRow
+                      key={item.id}
+                      className="h-row-compact border-b border-border hover:bg-background-surface transition-colors"
+                    >
+                      <TableCell>
+                        <div className="font-medium max-w-[280px] truncate text-sm">
+                          {item.name}
+                        </div>
+                        {item.nameEn && (
+                          <div className="text-xs text-foreground-dim max-w-[280px] truncate">
+                            {item.nameEn}
+                          </div>
+                        )}
+                      </TableCell>
+                      <TableCell className="hidden sm:table-cell text-sm text-foreground-muted">
+                        {item.province}
+                      </TableCell>
+                      <TableCell className="hidden md:table-cell font-mono text-data-sm tabular-nums text-right">
+                        {item.totalAreaHa
+                          ? new Intl.NumberFormat('vi-VN', {
+                              maximumFractionDigits: 1,
+                            }).format(item.totalAreaHa)
+                          : '—'}
+                      </TableCell>
+                      <TableCell className="hidden lg:table-cell font-mono text-data-sm">
+                        <div className="flex items-center gap-1 text-foreground-dim">
+                          {item.osmType?.toLowerCase() ?? '—'}/{item.osmId}
+                          {item.latitude != null && item.longitude != null && (
+                            <a
+                              href={`https://www.openstreetmap.org/${(item.osmType ?? 'way').toLowerCase()}/${item.osmId}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="hover:text-foreground"
+                              aria-label="Mở trên openstreetmap.org"
+                            >
+                              <ExternalLink className="h-3 w-3" />
+                            </a>
+                          )}
+                        </div>
+                      </TableCell>
+                      <TableCell className="hidden xl:table-cell text-xs text-foreground-dim max-w-[260px] truncate">
+                        {formatTags(item.osmTags)}
+                      </TableCell>
+                      <TableCell>
+                        {item.osmLocked ? (
+                          <span className="inline-flex items-center gap-1 rounded-pill bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 ring-1 ring-inset ring-amber-200">
+                            <Lock className="h-3 w-3" />
+                            Locked
+                          </span>
+                        ) : (
+                          <span className="inline-flex items-center gap-1 rounded-pill bg-background-surface px-2 py-0.5 text-xs font-medium text-foreground-muted ring-1 ring-inset ring-border">
+                            Pending
+                          </span>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex justify-end gap-1">
+                          {item.latitude != null && item.longitude != null && (
+                            <Link
+                              href={`/khu-cong-nghiep/${item.slug}` as never}
+                              target="_blank"
+                              className="rounded p-1 text-foreground-muted hover:bg-background-surface transition-colors"
+                              aria-label={`Xem KCN: ${item.name}`}
+                              title="Mở trang chi tiết"
+                            >
+                              <ExternalLink className="h-4 w-4" />
+                            </Link>
+                          )}
+                          <button
+                            title={item.osmLocked ? 'Bỏ khóa OSM sync' : 'Khóa OSM sync'}
+                            onClick={() => handleToggleLock(item)}
+                            className="rounded p-1 text-foreground-muted hover:bg-background-surface transition-colors"
+                            aria-label={
+                              item.osmLocked ? `Bỏ khóa: ${item.name}` : `Khóa: ${item.name}`
+                            }
+                          >
+                            {item.osmLocked ? (
+                              <LockOpen className="h-4 w-4" />
+                            ) : (
+                              <Lock className="h-4 w-4" />
+                            )}
+                          </button>
+                          <button
+                            title="Promote → public"
+                            onClick={() => openPromoteDialog(item)}
+                            className="rounded p-1 text-signal-up hover:bg-signal-up/10 transition-colors"
+                            aria-label={`Promote KCN: ${item.name}`}
+                          >
+                            <CheckCircle className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              {result.totalPages > 1 && (
+                <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
+                  <span className="font-mono text-data-sm text-foreground-muted">
+                    Trang {result.page}/{result.totalPages} · {result.total} KCN
+                  </span>
+                  <div className="flex gap-1">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      disabled={page <= 1}
+                      onClick={() => setPage((p) => p - 1)}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      disabled={page >= result.totalPages}
+                      onClick={() => setPage((p) => p + 1)}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Promote dialog */}
+      <Dialog
+        open={!!promoteTarget}
+        onOpenChange={(open) => {
+          if (!open) closePromoteDialog();
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Promote KCN từ OSM</DialogTitle>
+            <DialogDescription>
+              <span className="flex items-start gap-2 text-sm">
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                <span>
+                  KCN <strong>{promoteTarget?.name}</strong> sẽ được chuyển sang trạng thái public
+                  (OSM_PROMOTED). Chọn các trường muốn khóa để bảo vệ chúng khỏi OSM sync sau này.
+                </span>
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex flex-col gap-3">
+            <div>
+              <p className="mb-2 text-xs font-medium text-foreground-muted">Khóa các trường:</p>
+              <div className="grid grid-cols-2 gap-2">
+                {QUICK_LOCK_FIELDS.map(({ key, label }) => (
+                  <label
+                    key={key}
+                    className="flex items-center gap-2 rounded-md border border-border px-2 py-1.5 text-sm cursor-pointer hover:bg-background-surface"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={lockFields.has(key)}
+                      onChange={() => toggleLockField(key)}
+                      className="rounded border-border"
+                    />
+                    {label}
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <p className="mb-1 text-xs font-medium text-foreground-muted">
+                Trường tùy chỉnh (cách nhau bởi dấu phẩy)
+              </p>
+              <Input
+                placeholder="vd: occupancyRate, leasableAreaHa"
+                value={extraField}
+                onChange={(e) => setExtraField(e.target.value)}
+                className="h-8 text-sm"
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={closePromoteDialog} disabled={actionLoading}>
+              Hủy
+            </Button>
+            <Button onClick={handlePromote} disabled={actionLoading}>
+              {actionLoading ? 'Đang xử lý...' : 'Promote'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

apps/web/app/[locale]/(admin)/layout.tsx

@@ -37,6 +37,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     { href: '/admin/audit-log' as const, label: 'Nhật ký kiểm toán', icon: ScrollText },
     { href: '/admin/accounts/developers' as const, label: 'Tài khoản CĐT', icon: Building2 },
     { href: '/admin/accounts/park-operators' as const, label: 'Tài khoản KCN', icon: Factory },
+    { href: '/admin/industrial/osm-review' as const, label: 'Review OSM (KCN)', icon: Factory },
     { href: '/admin/settings/ai' as const, label: t('adminNav.aiSettings'), icon: Sparkles },
   ];
 

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

@@ -2,9 +2,9 @@
 
 import { Factory, Map as MapIcon, List, Columns } from 'lucide-react';
 import * as React from 'react';
+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';
-import { ParkMap } from '@/components/khu-cong-nghiep/park-map';
 import { Button } from '@/components/ui/button';
 import { useIndustrialParksSearch } from '@/lib/hooks/use-khu-cong-nghiep';
 import type { SearchIndustrialParksParams } from '@/lib/khu-cong-nghiep-api';
@@ -111,12 +111,12 @@ export default function KhuCongNghiepPage() {
               {data.total} khu công nghiệp được tìm thấy
             </p>
 
-            {/* Map-only view */}
+            {/* Map-only view — bbox-driven, loads ALL parks in viewport */}
             {viewMode === 'map' && (
-              <ParkMap parks={data.data} className="h-[calc(100vh-260px)]" />
+              <OsmParkBboxMap className="h-[calc(100vh-260px)]" />
             )}
 
-            {/* Split view: list left, sticky map right (lg+ only) */}
+            {/* Split view: list left, sticky bbox map right (lg+ only) */}
             {viewMode === 'split' && (
               <div className="grid gap-4 lg:grid-cols-2">
                 <div className="overflow-auto" style={{ maxHeight: 'calc(100vh - 220px)' }}>
@@ -127,10 +127,7 @@ export default function KhuCongNghiepPage() {
                   </div>
                 </div>
                 <div className="hidden lg:block">
-                  <ParkMap
-                    parks={data.data}
-                    className="sticky top-20 h-[calc(100vh-220px)]"
-                  />
+                  <OsmParkBboxMap className="sticky top-20 h-[calc(100vh-220px)]" />
                 </div>
               </div>
             )}

apps/web/components/khu-cong-nghiep/osm-park-bbox-map.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+/* eslint-disable import-x/no-named-as-default-member */
+import mapboxgl from 'mapbox-gl';
+import * as React from 'react';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { useMapboxStyle } from '@/lib/mapbox-style';
+
+const VN_CENTER: [number, number] = [106.0, 16.0];
+const DEFAULT_ZOOM = 5;
+
+const SOURCE_ID = 'osm-parks';
+const CLUSTER_LAYER_ID = 'osm-parks-clusters';
+const CLUSTER_COUNT_LAYER_ID = 'osm-parks-cluster-count';
+const POINT_LAYER_ID = 'osm-parks-points';
+const BOUNDARY_FILL_LAYER_ID = 'osm-parks-boundaries-fill';
+const BOUNDARY_LINE_LAYER_ID = 'osm-parks-boundaries-line';
+
+interface OsmParkBboxMapProps {
+  className?: string;
+  /** Override the bbox API path. Default = `${NEXT_PUBLIC_API_URL}/industrial/parks/by-bbox`. */
+  apiPath?: string;
+  /** Show raw OSM-imported parks (admin tools). Default false. */
+  includeOsmRaw?: boolean;
+}
+
+/**
+ * Viewport-driven KCN map. Pulls parks from the bbox endpoint as the user
+ * pans/zooms — clusters at low zoom (<12), shows polygon outlines at
+ * high zoom. Designed for the public catalog where we have ~2000 OSM
+ * imports + 50 curated rows; loading the entire dataset eagerly would
+ * be wasteful.
+ */
+export function OsmParkBboxMap({
+  className,
+  apiPath,
+  includeOsmRaw = false,
+}: OsmParkBboxMapProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const mapRef = React.useRef<mapboxgl.Map | null>(null);
+  const fetchAbortRef = React.useRef<AbortController | null>(null);
+  const mapStyle = useMapboxStyle();
+
+  const apiBase = React.useMemo(() => {
+    if (apiPath) return apiPath;
+    const apiUrl = process.env['NEXT_PUBLIC_API_URL'] ?? 'http://localhost:3201/api/v1';
+    return `${apiUrl}/industrial/parks/by-bbox`;
+  }, [apiPath]);
+
+  // Capture the current includeOsmRaw value via a ref so the moveend
+  // handler always sees the latest without re-binding the listener.
+  const includeOsmRawRef = React.useRef(includeOsmRaw);
+  React.useEffect(() => {
+    includeOsmRawRef.current = includeOsmRaw;
+  }, [includeOsmRaw]);
+
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    const token = process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
+    if (!token) return;
+    mapboxgl.accessToken = token;
+
+    const map = new mapboxgl.Map({
+      container: containerRef.current,
+      style: mapStyle,
+      center: VN_CENTER,
+      zoom: DEFAULT_ZOOM,
+      attributionControl: false,
+    });
+    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+    map.addControl(
+      new mapboxgl.AttributionControl({ compact: true, customAttribution: 'Data © OSM' }),
+      'bottom-right',
+    );
+    mapRef.current = map;
+
+    const fetchParks = async () => {
+      try {
+        // Cancel any in-flight request — only the latest viewport matters.
+        fetchAbortRef.current?.abort();
+        const controller = new AbortController();
+        fetchAbortRef.current = controller;
+        const bounds = map.getBounds();
+        if (!bounds) return;
+        const sw = bounds.getSouthWest();
+        const ne = bounds.getNorthEast();
+        const zoom = Math.round(map.getZoom());
+        const params = new URLSearchParams({
+          south: sw.lat.toString(),
+          west: sw.lng.toString(),
+          north: ne.lat.toString(),
+          east: ne.lng.toString(),
+          zoom: zoom.toString(),
+          ...(includeOsmRawRef.current ? { includeOsmRaw: 'true' } : {}),
+        });
+        const res = await fetch(`${apiBase}?${params}`, {
+          credentials: 'include',
+          signal: controller.signal,
+        });
+        if (!res.ok) return;
+        const fc = (await res.json()) as GeoJSON.FeatureCollection;
+        const src = map.getSource(SOURCE_ID) as mapboxgl.GeoJSONSource | undefined;
+        if (src) src.setData(fc);
+      } catch (err) {
+        if (err instanceof Error && err.name === 'AbortError') return;
+        console.warn('[osm-park-bbox-map] fetch failed:', err);
+      }
+    };
+
+    map.on('load', () => {
+      // Empty source — populated by the first fetchParks() call below.
+      map.addSource(SOURCE_ID, {
+        type: 'geojson',
+        data: { type: 'FeatureCollection', features: [] },
+        cluster: true,
+        clusterRadius: 50,
+        clusterMaxZoom: 11,
+        clusterProperties: {
+          // No extra metrics yet — total count is built-in.
+        },
+      });
+
+      // Cluster bubbles. Mapbox color parser only accepts literal colors,
+      // so we use hex constants matching our design-system primary token.
+      map.addLayer({
+        id: CLUSTER_LAYER_ID,
+        type: 'circle',
+        source: SOURCE_ID,
+        filter: ['has', 'point_count'],
+        paint: {
+          'circle-color': [
+            'step',
+            ['get', 'point_count'],
+            '#22c55e', // primary
+            10,
+            '#f59e0b',
+            50,
+            '#ef4444',
+          ],
+          'circle-radius': [
+            'step',
+            ['get', 'point_count'],
+            16,
+            10,
+            22,
+            50,
+            30,
+          ],
+          'circle-stroke-width': 2,
+          'circle-stroke-color': '#ffffff',
+          'circle-opacity': 0.9,
+        },
+      });
+
+      map.addLayer({
+        id: CLUSTER_COUNT_LAYER_ID,
+        type: 'symbol',
+        source: SOURCE_ID,
+        filter: ['has', 'point_count'],
+        layout: {
+          'text-field': ['get', 'point_count_abbreviated'],
+          'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+          'text-size': 12,
+        },
+        paint: { 'text-color': '#ffffff' },
+      });
+
+      // Individual park markers (centroid Points) when not clustered.
+      map.addLayer({
+        id: POINT_LAYER_ID,
+        type: 'circle',
+        source: SOURCE_ID,
+        filter: [
+          'all',
+          ['!', ['has', 'point_count']],
+          ['==', ['get', '_kind'], 'point'],
+        ],
+        paint: {
+          'circle-color': '#22c55e',
+          'circle-radius': 6,
+          'circle-stroke-color': '#ffffff',
+          'circle-stroke-width': 1.5,
+        },
+      });
+
+      // Polygon outlines — only present when zoom >= 12 (server omits them
+      // at lower zoom). Fill layer for hit-test, line layer for stroke.
+      map.addLayer({
+        id: BOUNDARY_FILL_LAYER_ID,
+        type: 'fill',
+        source: SOURCE_ID,
+        filter: ['==', ['get', '_kind'], 'polygon'],
+        paint: {
+          'fill-color': '#22c55e',
+          'fill-opacity': 0.18,
+        },
+      });
+      map.addLayer({
+        id: BOUNDARY_LINE_LAYER_ID,
+        type: 'line',
+        source: SOURCE_ID,
+        filter: ['==', ['get', '_kind'], 'polygon'],
+        paint: {
+          'line-color': '#22c55e',
+          'line-width': 2,
+          'line-opacity': 0.6,
+        },
+      });
+
+      // Click handler on point/polygon → navigate to detail.
+      const onClick = (e: mapboxgl.MapLayerMouseEvent) => {
+        const f = e.features?.[0];
+        if (!f) return;
+        const slug = (f.properties as Record<string, unknown> | null)?.['slug'];
+        if (typeof slug === 'string' && slug.length > 0) {
+          window.location.href = `/vi/khu-cong-nghiep/${slug}`;
+        }
+      };
+      map.on('click', POINT_LAYER_ID, onClick);
+      map.on('click', BOUNDARY_FILL_LAYER_ID, onClick);
+      // Cursor feedback
+      for (const layerId of [POINT_LAYER_ID, BOUNDARY_FILL_LAYER_ID, CLUSTER_LAYER_ID]) {
+        map.on('mouseenter', layerId, () => {
+          map.getCanvas().style.cursor = 'pointer';
+        });
+        map.on('mouseleave', layerId, () => {
+          map.getCanvas().style.cursor = '';
+        });
+      }
+      // Cluster click — zoom in
+      map.on('click', CLUSTER_LAYER_ID, (e) => {
+        const features = map.queryRenderedFeatures(e.point, { layers: [CLUSTER_LAYER_ID] });
+        const clusterFeature = features[0];
+        if (!clusterFeature) return;
+        const clusterId = clusterFeature.properties?.['cluster_id'];
+        const src = map.getSource(SOURCE_ID) as mapboxgl.GeoJSONSource;
+        if (typeof clusterId === 'number') {
+          src.getClusterExpansionZoom(
+            clusterId,
+            (err: Error | null | undefined, zoom: number | null | undefined) => {
+              if (err || zoom == null) return;
+              const geom = clusterFeature.geometry;
+              if (geom.type === 'Point') {
+                map.easeTo({ center: geom.coordinates as [number, number], zoom });
+              }
+            },
+          );
+        }
+      });
+
+      // Initial fetch + listen to viewport changes.
+      void fetchParks();
+    });
+
+    map.on('moveend', () => {
+      void fetchParks();
+    });
+
+    return () => {
+      fetchAbortRef.current?.abort();
+      map.remove();
+      mapRef.current = null;
+    };
+    // We intentionally do NOT depend on includeOsmRaw — the ref-based
+    // approach avoids tearing down the map on every prop tick.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiBase]);
+
+  // Sync mapStyle (theme switch) without rebuilding the map.
+  React.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    map.setStyle(mapStyle);
+  }, [mapStyle]);
+
+  const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
+
+  return (
+    <div className={`relative overflow-hidden rounded-lg border ${className || 'h-[600px]'}`}>
+      <div ref={containerRef} className="h-full w-full" />
+      {!hasToken && (
+        <div className="absolute inset-0 flex items-center justify-center bg-muted text-sm text-muted-foreground">
+          Thiết lập NEXT_PUBLIC_MAPBOX_TOKEN để hiển thị bản đồ
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/lib/khu-cong-nghiep-api.ts

@@ -233,6 +233,46 @@ export interface SearchIndustrialParksParams {
   limit?: number;
 }
 
+// ─── OSM Admin Types ────────────────────────────────────
+
+export interface OsmPendingItem {
+  id: string;
+  slug: string;
+  name: string;
+  nameEn: string | null;
+  province: string;
+  district: string;
+  region: string;
+  status: string;
+  /** OSM relation/way/node id, serialised as string (BigInt). */
+  osmId: string;
+  osmType: 'NODE' | 'WAY' | 'RELATION' | null;
+  /** Raw OSM tags object — varies wildly per row. */
+  osmTags: Record<string, string> | null;
+  totalAreaHa: number;
+  developer: string;
+  operator: string | null;
+  osmLocked: boolean;
+  lastSyncedAt: string | null;
+  latitude: number | null;
+  longitude: number | null;
+}
+
+export interface OsmPendingResult {
+  data: OsmPendingItem[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface ListOsmPendingParams {
+  page?: number;
+  limit?: number;
+  q?: string;
+  province?: string;
+}
+
 // ─── Labels ─────────────────────────────────────────────
 
 export const PARK_STATUS_LABELS: Record<IndustrialParkStatus, string> = {
@@ -328,4 +368,31 @@ export const industrialApi = {
 
   deletePark: (id: string) =>
     apiClient.delete<{ success: boolean }>(`/industrial/parks/${id}`),
+
+  // ─── OSM admin endpoints (ADMIN role only) ───────────
+
+  listOsmPending: (params: ListOsmPendingParams = {}) => {
+    const query = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== '') query.append(key, String(value));
+    });
+    const qs = query.toString();
+    return apiClient.get<OsmPendingResult>(
+      `/industrial/parks/osm/pending${qs ? `?${qs}` : ''}`,
+    );
+  },
+
+  /** Promote OSM row → public OSM_PROMOTED. Optionally lock fields the admin
+   *  just edited so the next sync run leaves them alone. */
+  promoteOsm: (id: string, lockFields: string[] = []) =>
+    apiClient.post<{ id: string }>(`/industrial/parks/${id}/osm/promote`, {
+      lockFields,
+    }),
+
+  /** Toggle the row-level OSM lock. When `true`, sync skips this row entirely. */
+  lockOsm: (id: string, locked: boolean) =>
+    apiClient.post<{ id: string; locked: boolean }>(
+      `/industrial/parks/${id}/osm/lock`,
+      { locked },
+    ),
 };