From 210154c67d8fd3867ade04e0a325eeb2fd2486af Mon Sep 17 00:00:00 2001
From: BioMark3r <121187458+BioMark3r@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:07:35 -0400
Subject: [PATCH] Add clean world map asset and reusable regional overlay
 component

---
 dashboard/src/assets/world-map-clean.svg    | 21 ++++++
 dashboard/src/components/RegionWorldMap.tsx | 79 +++++++++++++++++++++
 dashboard/src/styles/region-world-map.css   | 67 +++++++++++++++++
 3 files changed, 167 insertions(+)
 create mode 100644 dashboard/src/assets/world-map-clean.svg
 create mode 100644 dashboard/src/components/RegionWorldMap.tsx
 create mode 100644 dashboard/src/styles/region-world-map.css

diff --git a/dashboard/src/assets/world-map-clean.svg b/dashboard/src/assets/world-map-clean.svg
new file mode 100644
index 0000000..e26a2f2
--- /dev/null
+++ b/dashboard/src/assets/world-map-clean.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 460" role="img" aria-label="Stylized world map">
+  <rect width="1000" height="460" rx="28" fill="none"/>
+  <g fill="#9aa7b8" opacity="0.22">
+    <!-- North America -->
+    <path d="M84 120c24-26 66-40 116-42 34-1 57 10 78 28 13 12 19 25 18 40-1 20-14 37-33 50-20 13-46 20-65 33-24 15-26 35-44 49-25 20-68 18-95-7-22-20-27-49-19-72 8-24 29-41 44-58z"/>
+    <!-- South America -->
+    <path d="M292 246c16-12 39-14 58-6 17 7 26 20 29 36 3 18-6 34-16 48-15 20-26 40-25 67 1 20-7 37-25 48-14 8-34 7-47-3-15-11-17-31-12-47 6-22 23-38 29-60 4-15 0-32 9-45z"/>
+    <!-- Europe -->
+    <path d="M478 100c14-13 38-20 62-16 23 3 41 15 50 31 8 13 9 29-1 40-12 13-34 14-49 24-13 9-14 25-28 33-17 10-42 6-57-8-15-15-17-40-8-58 6-12 18-18 31-26z"/>
+    <!-- Africa -->
+    <path d="M520 165c21-12 52-10 74 5 20 13 30 35 30 58 0 30-15 53-28 78-10 19-14 43-33 55-20 13-50 11-68-5-19-16-21-44-14-67 7-24 23-43 28-67 3-16-2-34 11-47z"/>
+    <!-- Asia -->
+    <path d="M596 98c34-24 84-35 134-30 43 4 82 21 112 48 22 21 32 48 25 73-8 31-38 52-73 60-36 8-73 3-107 10-24 5-42 17-66 20-27 4-58-3-78-22-21-20-27-54-15-81 12-26 39-42 68-58z"/>
+    <!-- Southeast Asia archipelago -->
+    <path d="M763 286c13-8 31-8 45 0 10 6 18 16 17 28-1 13-12 23-26 28-15 5-33 4-46-4-10-6-16-16-15-28 1-10 10-18 25-24z"/>
+    <!-- Australia -->
+    <path d="M826 320c20-14 50-20 77-15 25 4 46 18 54 36 8 19 1 40-16 54-18 15-44 23-69 22-26-1-49-11-62-30-12-18-8-46 16-67z"/>
+    <!-- Greenland -->
+    <path d="M322 52c13-11 34-16 53-13 16 3 30 12 34 24 4 11-3 23-15 30-12 7-29 10-44 8-15-3-29-11-33-22-4-10-1-20 5-27z"/>
+  </g>
+</svg>
diff --git a/dashboard/src/components/RegionWorldMap.tsx b/dashboard/src/components/RegionWorldMap.tsx
new file mode 100644
index 0000000..f3becf0
--- /dev/null
+++ b/dashboard/src/components/RegionWorldMap.tsx
@@ -0,0 +1,79 @@
+import worldMapCleanAsset from "../assets/world-map-clean.svg";
+import "../styles/region-world-map.css";
+
+export type RegionKey =
+  | "us-east-1"
+  | "us-west-2"
+  | "eu-west-1"
+  | "eu-central-1"
+  | "ap-southeast-1"
+  | "local";
+
+type RegionAnchor = {
+  x: number;
+  y: number;
+  label: string;
+};
+
+const REGION_ANCHORS: Record<RegionKey, RegionAnchor> = {
+  "us-east-1": { x: 28, y: 36, label: "US East" },
+  "us-west-2": { x: 18, y: 35, label: "US West" },
+  "eu-west-1": { x: 47, y: 31, label: "EU West" },
+  "eu-central-1": { x: 52, y: 30, label: "EU Central" },
+  "ap-southeast-1": { x: 77, y: 56, label: "AP Southeast" },
+  local: { x: 50, y: 84, label: "Local / Unassigned" },
+};
+
+export type RegionWorldMapProps = {
+  selectedRegion?: RegionKey | null;
+  highlightedRegion?: RegionKey | null;
+  onRegionSelect?: (region: RegionKey) => void;
+  showLocalAnchor?: boolean;
+  className?: string;
+};
+
+export function RegionWorldMap({
+  selectedRegion,
+  highlightedRegion,
+  onRegionSelect,
+  showLocalAnchor = true,
+  className,
+}: RegionWorldMapProps) {
+  const keys = (Object.keys(REGION_ANCHORS) as RegionKey[]).filter((key) => showLocalAnchor || key !== "local");
+
+  return (
+    <div className={["region-world-map", className].filter(Boolean).join(" ")}>
+      <img src={worldMapCleanAsset} alt="World map" className="region-world-map__asset" draggable={false} />
+      <svg viewBox="0 0 100 100" className="region-world-map__overlay" aria-hidden="true">
+        {keys.map((key) => {
+          const anchor = REGION_ANCHORS[key];
+          const selected = selectedRegion === key;
+          const highlighted = highlightedRegion === key;
+          return (
+            <g
+              key={key}
+              className="region-world-map__dot-group"
+              style={{ transform: `translate(${anchor.x}px, ${anchor.y}px)` }}
+              onClick={() => onRegionSelect?.(key)}
+            >
+              <circle
+                className="region-world-map__dot-pulse"
+                r={selected || highlighted ? 2.5 : 1.8}
+                opacity={selected || highlighted ? 0.35 : 0.16}
+              />
+              <circle
+                className="region-world-map__dot-core"
+                r={selected ? 1.25 : highlighted ? 1.15 : 1}
+                data-selected={selected ? "true" : "false"}
+                data-highlighted={highlighted ? "true" : "false"}
+              />
+              <title>{anchor.label}</title>
+            </g>
+          );
+        })}
+      </svg>
+    </div>
+  );
+}
+
+export { REGION_ANCHORS };
diff --git a/dashboard/src/styles/region-world-map.css b/dashboard/src/styles/region-world-map.css
new file mode 100644
index 0000000..df4a9d3
--- /dev/null
+++ b/dashboard/src/styles/region-world-map.css
@@ -0,0 +1,67 @@
+.region-world-map {
+  position: relative;
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
+  border-radius: 14px;
+  overflow: hidden;
+  background: var(--map-bg, color-mix(in oklab, var(--surface, #0f172a) 84%, #0b1220));
+  border: 1px solid var(--map-border, color-mix(in oklab, var(--text, #cbd5e1) 18%, transparent));
+}
+
+.region-world-map__asset {
+  display: block;
+  width: 100%;
+  height: auto;
+  opacity: 0.95;
+  filter: saturate(0.9) contrast(0.95);
+}
+
+.region-world-map__overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.region-world-map__dot-group {
+  cursor: pointer;
+}
+
+.region-world-map__dot-pulse {
+  fill: var(--map-accent-soft, color-mix(in oklab, var(--accent, #38bdf8) 35%, transparent));
+}
+
+.region-world-map__dot-core {
+  fill: var(--map-accent, var(--accent, #38bdf8));
+  stroke: var(--map-dot-stroke, rgba(255, 255, 255, 0.9));
+  stroke-width: 0.25;
+  transition: transform 120ms ease, fill 120ms ease, opacity 120ms ease;
+  transform-origin: center;
+}
+
+.region-world-map__dot-core[data-highlighted="true"] {
+  fill: var(--map-accent-highlight, #22d3ee);
+}
+
+.region-world-map__dot-core[data-selected="true"] {
+  fill: var(--map-accent-selected, #0ea5e9);
+}
+
+.region-world-map__dot-group:hover .region-world-map__dot-core {
+  transform: scale(1.08);
+}
+
+:root[data-theme="light"] .region-world-map,
+:root[data-theme="altius-light"] .region-world-map {
+  --map-bg: color-mix(in oklab, #ffffff 92%, #dbeafe);
+  --map-border: color-mix(in oklab, #0f172a 10%, transparent);
+  --map-dot-stroke: rgba(15, 23, 42, 0.25);
+}
+
+:root[data-theme="altius"],
+:root[data-theme="dark"] {
+  --map-bg: color-mix(in oklab, #111827 88%, #020617);
+  --map-border: color-mix(in oklab, #cbd5e1 14%, transparent);
+  --map-dot-stroke: rgba(241, 245, 249, 0.72);
+}