@microcosmmoney/portal-react 2.3.4 → 3.1.0

package/dist/components/organization/organization-page.js

@@ -4,32 +4,100 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MicrocosmOrganizationPage = MicrocosmOrganizationPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const auth_react_1 = require("@microcosmmoney/auth-react");
+/* ── Inline SVG Icons (lucide-style, 20x20 for section headers, 20x20 for stat icons) ── */
+const IconUsers = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+const IconNetwork = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("rect", { x: "16", y: "16", width: "6", height: "6", rx: "1" }), (0, jsx_runtime_1.jsx)("rect", { x: "2", y: "16", width: "6", height: "6", rx: "1" }), (0, jsx_runtime_1.jsx)("rect", { x: "9", y: "2", width: "6", height: "6", rx: "1" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 12V8" })] }));
+const IconBuilding = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 22v-4h6v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 14h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 14h.01" })] }));
+const IconCrown = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 21h14" })] }));
+const IconGlobe = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h20" })] }));
+const IconMap = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "m3 7 6-3 6 3 6-3v13l-6 3-6-3-6 3Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 4v13" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 7v13" })] }));
+const IconGrid = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 9h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 15h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3v18" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3v18" })] }));
+const IconPickaxe = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.531 12.469 6.619 20.38a1 1 0 1 1-3-3l7.912-7.912" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.686 4.314A12.5 12.5 0 0 0 5.461 2.958l-.834 2.22a5.25 5.25 0 0 0 4.626 7.065l.172-.003a5.25 5.25 0 0 0 5.022-3.89l.39-1.507a12.5 12.5 0 0 0 .849-2.53Z" })] }));
+const IconCompass = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("polygon", { points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" })] }));
+const IconUserCheck = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("polyline", { points: "16 11 18 13 22 9" })] }));
+const IconUserX = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("line", { x1: "17", x2: "22", y1: "8", y2: "13" }), (0, jsx_runtime_1.jsx)("line", { x1: "22", x2: "17", y1: "8", y2: "13" })] }));
+const IconLayers = ({ size = 20, className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" }), (0, jsx_runtime_1.jsx)("path", { d: "m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" }), (0, jsx_runtime_1.jsx)("path", { d: "m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" })] }));
+/* ── Helpers ── */
 const fmt = (n) => n.toLocaleString('en-US');
+const formatMCD = (value) => {
+    if (value >= 1000000)
+        return `${(value / 1000000).toFixed(1)}M`;
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(0)}K`;
+    return value.toLocaleString('en-US');
+};
 function Spinner() {
     return (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" });
 }
+/* ── Flip Card (matching portal dashboard standard) ── */
+function FlipCard({ front, back }) {
+    const [isFlipped, setIsFlipped] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { perspective: '1500px' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full cursor-pointer", onClick: () => setIsFlipped(!isFlipped), style: {
+                transformStyle: 'preserve-3d',
+                transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
+                transition: 'transform 0.7s cubic-bezier(0.4, 0, 0.2, 1)',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { className: "group relative overflow-hidden rounded-lg border border-neutral-700 bg-neutral-900 hover:border-cyan-400/50 transition-colors", style: {
+                        backfaceVisibility: 'hidden',
+                        display: isFlipped ? 'none' : undefined,
+                    }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 p-6", children: front }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-lg border border-cyan-400/30 bg-neutral-900", style: {
+                        backfaceVisibility: 'hidden',
+                        transform: 'rotateY(180deg)',
+                        display: isFlipped ? undefined : 'none',
+                    }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 p-6", children: back }) })] }) }));
+}
+/* ── Main Component ── */
 function MicrocosmOrganizationPage({ basePath = '', onNavigate }) {
-    const { data: summary, loading } = (0, auth_react_1.useOrganizationSummary)();
-    const s = summary;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white", children: "Organization" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm mt-1", children: "Ecosystem structure & user stats" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "USER_STATS" }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)(Spinner, {}) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: [
-                            { label: 'total_users', value: s?.total_users ?? 0, color: 'text-cyan-400' },
-                            { label: 'miners', value: s?.miners ?? 0, color: 'text-cyan-300' },
-                            { label: 'prospects', value: s?.prospects ?? 0, color: 'text-white' },
-                            { label: 'recruits', value: s?.recruits ?? 0, color: 'text-neutral-400' },
-                            { label: 'unassigned', value: s?.unassigned ?? 0, color: 'text-neutral-500' },
-                        ].map((stat) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-400 tracking-wider mb-1", children: stat.label }), (0, jsx_runtime_1.jsx)("div", { className: `text-2xl font-bold ${stat.color}`, children: fmt(stat.value) })] }, stat.label))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "TERRITORY_DISTRIBUTION" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3", children: [
-                            { label: 'Systems', value: s?.system_count ?? 0, icon: '🌐' },
-                            { label: 'Sectors', value: s?.sector_count ?? 0, icon: '🔷' },
-                            { label: 'Matrices', value: s?.matrix_count ?? 0, icon: '🔶' },
-                            { label: 'Stations', value: s?.station_count ?? 0, icon: '⬡' },
-                        ].map((t) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl mb-2", children: t.icon }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-white", children: fmt(t.value) }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mt-1", children: t.label })] }, t.label))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "VAULT_BALANCE" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl font-bold text-cyan-400", children: loading ? (0, jsx_runtime_1.jsx)(Spinner, {}) : fmt(s?.total_vault_balance ?? 0) }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-sm mt-1", children: "MCD in all territory vaults" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-bold mb-2", children: "Vault Mechanism" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc list-inside text-sm text-neutral-400 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "30% of mining companion yield flows to territory vault (MCD)" }), (0, jsx_runtime_1.jsx)("li", { children: "Daily distribution: 1% of vault balance to territory miners" }), (0, jsx_runtime_1.jsx)("li", { children: "Distribution proportional to mining activity" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "LEVEL_PROGRESSION" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3", children: [
-                            { level: 1, name: 'Recruit', req: 'Register' },
-                            { level: 2, name: 'Prospect', req: 'First mine' },
-                            { level: 3, name: 'Miner', req: '21d/30d mining' },
-                            { level: 4, name: 'Commander', req: 'Station NFT' },
-                            { level: 5, name: 'Pioneer', req: 'Matrix NFT' },
-                            { level: 6, name: 'Warden', req: 'Sector NFT' },
-                            { level: 7, name: 'Admiral', req: 'System NFT' },
-                        ].map((l) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3 text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-cyan-400 text-lg font-bold", children: ["Lv.", l.level] }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-bold mt-1", children: l.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 mt-1", children: l.req })] }, l.level))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "TERRITORY_ARCHITECTURE" }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-neutral-400 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-3 h-3 bg-cyan-200 rounded" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "System" }), " \u2014 Top-level domain (10 Sectors)"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 ml-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-3 h-3 bg-cyan-300 rounded" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Sector" }), " \u2014 Area governance (10 Matrices)"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 ml-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-3 h-3 bg-cyan-400 rounded" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Matrix" }), " \u2014 Regional group (10 Stations)"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 ml-12", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-3 h-3 bg-cyan-500 rounded" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Station" }), " \u2014 Base unit (1,000 users)"] })] }) })] })] }));
+    const { data: summary, loading: summaryLoading } = (0, auth_react_1.useOrganizationSummary)();
+    const { data: userStats, loading: userStatsLoading } = (0, auth_react_1.useDashboardUserStats)();
+    const loading = summaryLoading || userStatsLoading;
+    const org = summary;
+    const us = userStats;
+    // User stats from dashboard API
+    const totalUsers = us?.total_users ?? org?.total_members ?? 0;
+    const miners = us?.by_level?.miner ?? 0;
+    const prospects = us?.by_level?.prospect ?? 0;
+    const recruits = us?.by_level?.recruit ?? 0;
+    const unassigned = totalUsers - miners - prospects - recruits;
+    // Territory counts from org summary
+    const stationCount = org?.total_stations ?? 0;
+    const matrixCount = org?.total_matrices ?? 0;
+    const sectorCount = org?.total_sectors ?? 0;
+    const systemCount = org?.total_systems ?? 0;
+    // Vault
+    const totalVaultMCD = org?.total_vault_mcd ?? 0;
+    if (loading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto p-6 space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white tracking-wider", children: "Organization" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 mt-1", children: "Ecosystem structure & territory management" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-20", children: [(0, jsx_runtime_1.jsx)(Spinner, {}), (0, jsx_runtime_1.jsx)("span", { className: "ml-3 text-neutral-400 text-sm", children: "Loading organization data..." })] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto p-6 space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white tracking-wider", children: "Organization" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 mt-1", children: "Ecosystem structure & territory management" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconUsers, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "User Statistics" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "User Statistics" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: [
+                            { label: 'Total Users', value: totalUsers, icon: (0, jsx_runtime_1.jsx)(IconUsers, { size: 16, className: "text-cyan-400/70" }) },
+                            { label: 'Miner', value: miners, icon: (0, jsx_runtime_1.jsx)(IconPickaxe, { size: 16, className: "text-cyan-400/70" }) },
+                            { label: 'Prospect', value: prospects, icon: (0, jsx_runtime_1.jsx)(IconCompass, { size: 16, className: "text-cyan-400/70" }) },
+                            { label: 'Recruit', value: recruits, icon: (0, jsx_runtime_1.jsx)(IconUserCheck, { size: 16, className: "text-cyan-400/70" }) },
+                            { label: 'Unassigned', value: unassigned < 0 ? 0 : unassigned, icon: (0, jsx_runtime_1.jsx)(IconUserX, { size: 16, className: "text-cyan-400/70" }) },
+                        ].map(({ label, value, icon }) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-cyan-400/70 tracking-wider", children: label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold text-white font-mono", children: fmt(value) })] }, label))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsx)(FlipCard, { front: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconNetwork, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "Territory Distribution" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "Territory Distribution" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-3", children: [
+                                        { label: 'Station', count: stationCount, icon: (0, jsx_runtime_1.jsx)(IconBuilding, { size: 20, className: "text-cyan-400/70 mx-auto mb-2" }) },
+                                        { label: 'Matrix', count: matrixCount, icon: (0, jsx_runtime_1.jsx)(IconGrid, { size: 20, className: "text-cyan-400/70 mx-auto mb-2" }) },
+                                        { label: 'Sector', count: sectorCount, icon: (0, jsx_runtime_1.jsx)(IconMap, { size: 20, className: "text-cyan-400/70 mx-auto mb-2" }) },
+                                        { label: 'System', count: systemCount, icon: (0, jsx_runtime_1.jsx)(IconGlobe, { size: 20, className: "text-cyan-400/70 mx-auto mb-2" }) },
+                                    ].map(({ label, count, icon }) => ((0, jsx_runtime_1.jsxs)("div", { className: "text-center p-3 bg-neutral-800 rounded border border-neutral-700", children: [icon, (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold text-white font-mono", children: count }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-cyan-400/70 tracking-wider", children: label })] }, label))) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-xs text-neutral-500", children: "Four-tier architecture: System > Sector > Matrix > Station" })] }), back: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconNetwork, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "Territory System" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "Territory System" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-300 leading-relaxed", children: "The territory system is the organizational backbone of the Microcosm ecosystem, structuring all users into a hierarchical governance model." }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-neutral-400 leading-relaxed space-y-1.5", children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80 font-mono", children: "Station" }), " \u2014 Base unit housing up to 1,000 users"] }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80 font-mono", children: "Matrix" }), " \u2014 Regional group managing 10 Stations"] }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80 font-mono", children: "Sector" }), " \u2014 Area governance overseeing 10 Matrices"] }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80 font-mono", children: "System" }), " \u2014 Top-level domain containing 10 Sectors"] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 leading-relaxed", children: "Magistrates are territory managers elected through the auction system. They govern their territory and receive a share of mining companion yield." })] }) }), (0, jsx_runtime_1.jsx)(FlipCard, { front: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconBuilding, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "Vault Balance" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "Vault Balance" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-3xl font-bold text-cyan-300 font-mono", children: formatMCD(totalVaultMCD) }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-cyan-400/50 mt-1", children: "MCD" })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-xs text-neutral-500", children: "Daily distribution: 1% of vault balance distributed to territory miners" })] }), back: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconBuilding, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "Vault Mechanism" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "Vault Mechanism" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-300 leading-relaxed", children: "Each territory maintains a vault that accumulates MCD from mining companion yield and distributes it to active miners daily." }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-neutral-400 leading-relaxed space-y-1.5", children: [(0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80", children: "Source" }), " \u2014 30% of mining companion yield flows to territory vault as MCD"] }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80", children: "Distribution" }), " \u2014 1% of vault balance distributed daily to territory miners"] }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80", children: "Peg" }), " \u2014 MCD is pegged 1:1 to USDT/USDC"] }), (0, jsx_runtime_1.jsxs)("p", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400/80", children: "Transparency" }), " \u2014 All vault balances and distributions are on-chain verifiable"] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 leading-relaxed", children: "The vault creates a positive feedback loop: more mining activity increases the vault, which increases daily payouts, attracting more miners." })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4 flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconCrown, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "Level Progression" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "Level Progression" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-3", children: [
+                            { level: 1, en: 'Recruit', zh: '\u65B0\u5175', condition: 'Register account' },
+                            { level: 2, en: 'Prospect', zh: '\u63A2\u77FF\u8005', condition: 'First mining' },
+                            { level: 3, en: 'Miner', zh: '\u77FF\u5DE5', condition: '21d/30d mining' },
+                            { level: 4, en: 'Commander', zh: '\u6307\u6325\u5B98', condition: 'Station NFT' },
+                            { level: 5, en: 'Pioneer', zh: '\u5148\u9A71\u8005', condition: 'Matrix NFT' },
+                            { level: 6, en: 'Warden', zh: '\u5B88\u62A4\u8005', condition: 'Sector NFT' },
+                            { level: 7, en: 'Admiral', zh: '\u63D0\u7763', condition: 'System NFT' },
+                        ].map(({ level, en, zh, condition }) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-cyan-400 font-mono leading-none", children: level }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-neutral-200", children: en }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400", children: zh }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: condition })] })] }, level))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)(IconLayers, { size: 20, className: "text-cyan-400" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold text-cyan-400 tracking-wide", children: "Territory Architecture" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: "Territory Structure" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "hidden sm:flex items-center gap-3 text-[10px] font-mono text-neutral-500", children: [
+                                    { label: 'System', color: 'bg-purple-400' },
+                                    { label: 'Sector', color: 'bg-blue-400' },
+                                    { label: 'Matrix', color: 'bg-cyan-400' },
+                                    { label: 'Station', color: 'bg-emerald-400' },
+                                ].map(({ label, color }) => ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: `w-1.5 h-1.5 rounded-full ${color}` }), label] }, label))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative rounded-lg border border-neutral-800 overflow-hidden bg-neutral-950/50 p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 opacity-5", children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-full h-full", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("pattern", { id: "org-grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: (0, jsx_runtime_1.jsx)("path", { d: "M 40 0 L 0 0 0 40", fill: "none", stroke: "#22d3ee", strokeWidth: "0.5" }) }) }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#org-grid)" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 space-y-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border border-purple-500/40 bg-purple-500/10", children: [(0, jsx_runtime_1.jsx)(IconGlobe, { size: 16, className: "text-purple-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-bold text-purple-300 font-mono", children: "System" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-purple-400/60 ml-1", children: "100,000 users" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-1", children: (0, jsx_runtime_1.jsx)("div", { className: "w-px h-6 bg-gradient-to-b from-purple-500/40 to-blue-500/40" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center pb-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-neutral-600 font-mono", children: "10x" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-3", children: [[1, 2, 3].map((i) => ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-blue-500/40 bg-blue-500/10", children: [(0, jsx_runtime_1.jsx)(IconMap, { size: 14, className: "text-blue-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-blue-300 font-mono", children: "Sector" })] }, i))), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center px-3 py-2 rounded-lg border border-neutral-700 bg-neutral-800/50", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-500 font-mono", children: "... x10" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-1", children: (0, jsx_runtime_1.jsx)("div", { className: "w-px h-6 bg-gradient-to-b from-blue-500/40 to-cyan-500/40" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center pb-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-neutral-600 font-mono", children: "10x" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-3", children: [[1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-cyan-500/40 bg-cyan-500/10", children: [(0, jsx_runtime_1.jsx)(IconGrid, { size: 14, className: "text-cyan-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-cyan-300 font-mono", children: "Matrix" })] }, i))), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center px-3 py-2 rounded-lg border border-neutral-700 bg-neutral-800/50", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-500 font-mono", children: "... x10" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center py-1", children: (0, jsx_runtime_1.jsx)("div", { className: "w-px h-6 bg-gradient-to-b from-cyan-500/40 to-emerald-500/40" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center pb-1", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[9px] text-neutral-600 font-mono", children: "10x" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-3", children: [[1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-emerald-500/40 bg-emerald-500/10", children: [(0, jsx_runtime_1.jsx)(IconBuilding, { size: 14, className: "text-emerald-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-emerald-300 font-mono", children: "Station" })] }, i))), (0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center px-3 py-2 rounded-lg border border-neutral-700 bg-neutral-800/50", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-500 font-mono", children: "... x10" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center pt-4", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-600 font-mono", children: "Each station: 1,000 users capacity | Managed by Magistrate (via auction)" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 mt-6 grid grid-cols-2 md:grid-cols-4 gap-3", children: [
+                                    { type: 'System', color: 'border-purple-500/30 bg-purple-500/5', textColor: 'text-purple-300', desc: 'Top-level domain', capacity: '100,000', count: systemCount },
+                                    { type: 'Sector', color: 'border-blue-500/30 bg-blue-500/5', textColor: 'text-blue-300', desc: 'Area governance', capacity: '10,000', count: sectorCount },
+                                    { type: 'Matrix', color: 'border-cyan-500/30 bg-cyan-500/5', textColor: 'text-cyan-300', desc: 'Regional group', capacity: '1,000 x10', count: matrixCount },
+                                    { type: 'Station', color: 'border-emerald-500/30 bg-emerald-500/5', textColor: 'text-emerald-300', desc: 'Base unit', capacity: '1,000', count: stationCount },
+                                ].map(({ type, color, textColor, desc, capacity, count }) => ((0, jsx_runtime_1.jsxs)("div", { className: `rounded-lg border p-3 ${color}`, children: [(0, jsx_runtime_1.jsx)("div", { className: `text-sm font-bold font-mono ${textColor}`, children: type }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mt-0.5", children: desc }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between mt-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-neutral-500 font-mono", children: [capacity, " users"] }), (0, jsx_runtime_1.jsx)("span", { className: `text-lg font-bold font-mono ${textColor}`, children: count })] })] }, type))) })] })] })] }));
 }

package/dist/components/territory/territory-page.js

@@ -6,39 +6,136 @@ exports.MicrocosmTerritoryPage = MicrocosmTerritoryPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const auth_react_1 = require("@microcosmmoney/auth-react");
+/* ------------------------------------------------------------------ */
+/*  Inline SVG Icons (24x24 viewBox, stroke 2, round caps)            */
+/* ------------------------------------------------------------------ */
+const IconBuilding2 = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 6h4" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 10h4" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 14h4" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 18h4" })] }));
+const IconGrid3x3 = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 9h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 15h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3v18" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3v18" })] }));
+const IconMap = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 5.764v15" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3.236v15" })] }));
+const IconGlobe = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h20" })] }));
+const IconUsers = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+const IconVault = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 8v8" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 12h8" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 10h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 14h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 10h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 14h2" })] }));
+const IconZap = ({ className = '' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M13 2 3 14h9l-1 8 10-12h-9l1-8z" }) }));
+const IconSearch = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "8" }), (0, jsx_runtime_1.jsx)("path", { d: "m21 21-4.3-4.3" })] }));
+const IconArrowLeft = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "m12 19-7-7 7-7" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 12H5" })] }));
+const IconShield = ({ className = '' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67 0C8.5 20.5 5 18 5 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C15.5 3.8 18 5 20 5a1 1 0 0 1 1 1z" }) }));
+const IconCalendar = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 2v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 2v4" }), (0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 10h18" })] }));
+const IconImage = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "9", r: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })] }));
+const IconSettings = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "3" })] }));
+const IconEdit3 = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 20h9" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.855z" })] }));
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
 const fmt = (n) => n.toLocaleString('en-US');
+const TECH_BONUS = {
+    station: 10,
+    matrix: 20,
+    sector: 30,
+    system: 40,
+};
+const getTypeIcon = (type, className = 'w-5 h-5') => {
+    switch (type?.toLowerCase()) {
+        case 'station': return (0, jsx_runtime_1.jsx)(IconBuilding2, { className: className });
+        case 'matrix': return (0, jsx_runtime_1.jsx)(IconGrid3x3, { className: className });
+        case 'sector': return (0, jsx_runtime_1.jsx)(IconMap, { className: className });
+        case 'system': return (0, jsx_runtime_1.jsx)(IconGlobe, { className: className });
+        default: return (0, jsx_runtime_1.jsx)(IconSettings, { className: className });
+    }
+};
+const getTypeBadgeColor = (type) => {
+    switch (type?.toLowerCase()) {
+        case 'station': return 'border-cyan-400/40 text-cyan-400';
+        case 'matrix': return 'border-white/40 text-white';
+        case 'sector': return 'border-cyan-300/40 text-cyan-300';
+        case 'system': return 'border-cyan-200/40 text-cyan-200';
+        default: return 'border-neutral-600 text-neutral-400';
+    }
+};
+const UNIT_TYPE_LABELS = [
+    { key: 'all', label: 'All' },
+    { key: 'station', label: 'Station' },
+    { key: 'matrix', label: 'Matrix' },
+    { key: 'sector', label: 'Sector' },
+    { key: 'system', label: 'System' },
+];
+/* ------------------------------------------------------------------ */
+/*  Spinner / Skeleton                                                */
+/* ------------------------------------------------------------------ */
 function Spinner() {
     return (0, jsx_runtime_1.jsx)("span", { className: "inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin" });
 }
-function Modal({ open, onClose, children }) {
-    if (!open)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", onClick: onClose, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black/60" }), (0, jsx_runtime_1.jsx)("div", { className: "relative bg-neutral-900 border border-neutral-700 rounded-lg p-6 max-w-lg w-full mx-4 font-mono max-h-[90vh] overflow-y-auto", onClick: e => e.stopPropagation(), children: children })] }));
+function Skeleton({ className = '' }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: `animate-pulse bg-neutral-800 rounded-lg ${className}` });
 }
-const TYPE_COLORS = {
-    Station: 'bg-cyan-400/20 text-cyan-400',
-    Matrix: 'bg-white/20 text-white',
-    Sector: 'bg-cyan-300/20 text-cyan-300',
-    System: 'bg-cyan-400/30 text-cyan-200',
-};
+/* ------------------------------------------------------------------ */
+/*  Territory Card (list view)                                        */
+/* ------------------------------------------------------------------ */
+function TerritoryCard({ unit, onClick }) {
+    const unitType = (unit.unit_type || 'station');
+    const techBonus = TECH_BONUS[unitType.toLowerCase()] ?? 0;
+    const occupancy = unit.max_capacity && unit.max_capacity > 0
+        ? Math.round(((unit.member_count ?? 0) / unit.max_capacity) * 100)
+        : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 cursor-pointer transition-colors overflow-hidden", onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "aspect-[4/3] bg-neutral-800 relative flex items-center justify-center overflow-hidden", children: unit.image_url ? ((0, jsx_runtime_1.jsx)("img", { src: unit.image_url, alt: unit.unit_name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center text-neutral-600", children: [getTypeIcon(unitType, 'w-10 h-10'), (0, jsx_runtime_1.jsx)("span", { className: "text-xs mt-2 capitalize", children: unitType })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-2", style: { backgroundColor: '#0a0e14' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: `border px-1.5 py-0.5 rounded text-xs capitalize ${getTypeBadgeColor(unitType)}`, children: unitType }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-yellow-400", children: [(0, jsx_runtime_1.jsx)(IconZap, { className: "w-3 h-3 inline-block -mt-0.5 mr-0.5" }), "+", techBonus, "%"] }), unit.short_id && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-neutral-500 font-mono ml-auto", children: unit.short_id }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-white font-bold text-sm truncate", children: unit.unit_name }), unit.full_path && ((0, jsx_runtime_1.jsx)("p", { className: "text-neutral-500 text-xs font-mono truncate", children: unit.full_path }))] }), unit.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-xs line-clamp-2", children: unit.description })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 pt-2 border-t border-neutral-700/50 text-xs text-neutral-400", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconUsers, { className: "w-3.5 h-3.5" }), fmt(unit.member_count ?? 0)] }), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconVault, { className: "w-3.5 h-3.5" }), fmt(Math.round(unit.vault_balance ?? 0)), " MCD"] }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-auto", children: [occupancy, "%"] })] })] })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Detail View                                                       */
+/* ------------------------------------------------------------------ */
+function TerritoryDetailView({ territoryId, territory, onBack }) {
+    const { data: detailedStats, loading: statsLoading } = (0, auth_react_1.useTerritoryDetailedStats)(territoryId);
+    const { data: members, loading: membersLoading } = (0, auth_react_1.useTerritoryMembers)(territoryId);
+    const stats = detailedStats;
+    const memberList = Array.isArray(members) ? members : [];
+    const unitType = (territory?.unit_type || 'station');
+    const techBonus = TECH_BONUS[unitType.toLowerCase()] ?? 0;
+    const memberCount = territory?.member_count ?? stats?.stats?.member_count ?? 0;
+    const maxCapacity = territory?.max_capacity ?? stats?.stats?.max_capacity ?? 0;
+    const vaultBalance = territory?.vault_balance ?? stats?.stats?.vault_balance ?? 0;
+    const occupancy = maxCapacity > 0 ? Math.round((memberCount / maxCapacity) * 100) : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: onBack, className: "flex items-center gap-2 text-sm text-neutral-400 hover:text-white transition-colors bg-transparent border-none cursor-pointer", children: [(0, jsx_runtime_1.jsx)(IconArrowLeft, { className: "w-4 h-4" }), "Back to list"] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-24 h-24 bg-neutral-800 rounded-lg flex items-center justify-center overflow-hidden flex-shrink-0", children: territory?.image_url ? ((0, jsx_runtime_1.jsx)("img", { src: territory.image_url, alt: territory.unit_name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-neutral-600", children: getTypeIcon(unitType, 'w-10 h-10') })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 flex-wrap", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold text-white", children: territory?.unit_name ?? territoryId }), territory?.short_id && ((0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-500 font-mono", children: territory.short_id })), (0, jsx_runtime_1.jsxs)("span", { className: `border px-1.5 py-0.5 rounded text-xs capitalize ${getTypeBadgeColor(unitType)}`, children: [getTypeIcon(unitType, 'w-3 h-3 inline-block -mt-0.5 mr-1'), unitType] }), territory?.manager_display_name && ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1 text-xs text-emerald-400 border border-emerald-400/30 px-1.5 py-0.5 rounded", children: [(0, jsx_runtime_1.jsx)(IconShield, { className: "w-3 h-3" }), "Magistrate: ", territory.manager_display_name] }))] }), territory?.full_path && ((0, jsx_runtime_1.jsx)("p", { className: "text-neutral-500 text-sm font-mono mt-1", children: territory.full_path })), territory?.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm mt-2", children: territory.description }))] })] }) }), statsLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-24" }, i)) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconUsers, { className: "w-4 h-4 text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: "Members" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-2xl font-bold text-white font-mono", children: [fmt(memberCount), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-neutral-500 font-normal", children: ["/", fmt(maxCapacity)] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconVault, { className: "w-4 h-4 text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: "Vault MCD" })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-bold text-white font-mono", children: fmt(Math.round(vaultBalance)) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconZap, { className: "w-4 h-4 text-yellow-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: "Tech Bonus" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-2xl font-bold text-yellow-400 font-mono", children: ["+", stats?.tech_bonus ?? techBonus, "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)(IconSettings, { className: "w-4 h-4 text-neutral-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: "Occupancy" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-2xl font-bold text-white font-mono", children: [occupancy, "%"] })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-6", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-white font-semibold mb-4 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconEdit3, { className: "w-4 h-4 text-cyan-400" }), "KPI Progress"] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: "Occupancy Rate" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-white font-mono", children: [occupancy, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-2 bg-neutral-800 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-cyan-400 rounded-full transition-all duration-500", style: { width: `${Math.min(occupancy, 100)}%` } }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: "Vault Balance" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-white font-mono", children: [fmt(Math.round(vaultBalance)), " MCD"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-2 bg-neutral-800 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-cyan-400 rounded-full transition-all duration-500", style: { width: `${Math.min(vaultBalance > 0 ? Math.max(Math.log10(vaultBalance) * 10, 5) : 0, 100)}%` } }) })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-6", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-white font-semibold mb-3 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconVault, { className: "w-4 h-4 text-cyan-400" }), "Distribution Mechanism"] }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm leading-relaxed", children: "Each territory vault distributes 1% of its MCD balance daily to all active miners within the territory. The distribution is proportional to each miner's mining activity. Vault balances are replenished through companion yield from mining operations (30% of companion output as MCD) and monthly recycling cycles." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-4 border-b border-neutral-700/50", children: (0, jsx_runtime_1.jsxs)("h3", { className: "text-white font-semibold flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(IconUsers, { className: "w-4 h-4 text-cyan-400" }), "Members (", memberList.length, ")"] }) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: membersLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "p-6 flex justify-center", children: (0, jsx_runtime_1.jsx)(Spinner, {}) })) : memberList.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "p-8 text-center text-neutral-500 text-sm", children: "No members found" })) : ((0, jsx_runtime_1.jsxs)("table", { className: "w-full text-sm", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-neutral-700/50", children: [(0, jsx_runtime_1.jsx)("th", { className: "text-left px-4 py-3 text-neutral-400 font-medium", children: "Name / UID" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left px-4 py-3 text-neutral-400 font-medium", children: "Role" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left px-4 py-3 text-neutral-400 font-medium", children: "Email" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left px-4 py-3 text-neutral-400 font-medium", children: "Joined" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: memberList.map((member, idx) => ((0, jsx_runtime_1.jsxs)("tr", { className: "border-b border-neutral-800/50 hover:bg-neutral-800/30", children: [(0, jsx_runtime_1.jsxs)("td", { className: "px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white", children: member.display_name || member.username || 'Unknown' }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs font-mono", children: member.uid ? `${member.uid.slice(0, 12)}...` : '-' })] }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3", children: (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-300 capitalize", children: member.role || member.level_name || 'Miner' }) }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3", children: (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 font-mono text-xs", children: member.email ? (member.email.length > 20 ? member.email.slice(0, 20) + '...' : member.email) : '-' }) }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-neutral-400 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(IconCalendar, { className: "w-3 h-3" }), member.joined_at || member.created_at
+                                                            ? new Date(member.joined_at || member.created_at).toLocaleDateString()
+                                                            : '-'] }) })] }, member.uid || idx))) })] })) })] })] }));
+}
+/* ------------------------------------------------------------------ */
+/*  Main Component                                                    */
+/* ------------------------------------------------------------------ */
 function MicrocosmTerritoryPage({ basePath = '', onNavigate }) {
-    const { data: collection, loading: colLoading } = (0, auth_react_1.useTerritoryNFTCollection)();
-    const { data: wallets } = (0, auth_react_1.useWallets)();
-    const primaryWallet = Array.isArray(wallets) ? wallets.find((w) => w.is_primary)?.wallet_address : undefined;
-    const { data: myNfts, loading: nftsLoading } = (0, auth_react_1.useTerritoryNFTs)(primaryWallet);
-    const [selectedNft, setSelectedNft] = (0, react_1.useState)(null);
-    const [activeTab, setActiveTab] = (0, react_1.useState)('my');
-    const col = collection;
-    const nftList = Array.isArray(myNfts) ? myNfts : [];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white", children: "Territory" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm mt-1", children: "Territory NFT collection & management" })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3", children: [
-                    { label: 'stations', value: col?.station_count ?? 0 },
-                    { label: 'matrices', value: col?.matrix_count ?? 0 },
-                    { label: 'sectors', value: col?.sector_count ?? 0 },
-                    { label: 'total_minted', value: col?.total_minted ?? 0 },
-                ].map((s) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: s.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold text-white", children: colLoading ? (0, jsx_runtime_1.jsx)(Spinner, {}) : fmt(s.value) })] }, s.label))) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 bg-black p-0.5 rounded w-fit", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setActiveTab('my'), className: `px-3 py-1 text-xs font-mono rounded ${activeTab === 'my' ? 'bg-cyan-700 text-white' : 'text-neutral-500 hover:text-neutral-300'}`, children: ["My NFTs (", nftList.length, ")"] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab('all'), className: `px-3 py-1 text-xs font-mono rounded ${activeTab === 'all' ? 'bg-cyan-700 text-white' : 'text-neutral-500 hover:text-neutral-300'}`, children: "All NFTs" })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: nftsLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)(Spinner, {}) })) : activeTab === 'my' ? (nftList.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: nftList.map((nft) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedNft(nft), className: "bg-neutral-800 rounded-lg border border-neutral-700 hover:border-cyan-400/50 cursor-pointer transition-colors overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "aspect-square bg-neutral-700 flex items-center justify-center text-4xl", children: nft.image ? ((0, jsx_runtime_1.jsx)("img", { src: nft.image, alt: nft.name, className: "w-full h-full object-cover" })) : ('🏗') }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-bold truncate", children: nft.name || 'Territory NFT' }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2 mt-1", children: (0, jsx_runtime_1.jsx)("span", { className: `text-[10px] px-1.5 py-0.5 rounded ${TYPE_COLORS[nft.nft_type] ?? 'bg-neutral-700 text-neutral-400'}`, children: nft.nft_type || 'Station' }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 mt-1 font-mono", children: [nft.mint?.slice(0, 8), "..."] })] })] }, nft.mint))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-neutral-500 font-mono text-sm", children: "no territory NFTs owned" }))) : ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-neutral-500 font-mono text-sm", children: "Use search to find specific NFTs by mint address" })) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "TERRITORY_HIERARCHY" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3", children: [
-                            { name: 'Station', capacity: '1,000 users', desc: 'Base unit' },
-                            { name: 'Matrix', capacity: '10 Stations', desc: 'Regional group' },
-                            { name: 'Sector', capacity: '10 Matrices', desc: 'Area governance' },
-                            { name: 'System', capacity: '10 Sectors', desc: 'Top-level domain' },
-                        ].map((t) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: `text-sm font-bold ${TYPE_COLORS[t.name]?.split(' ')[1] ?? 'text-white'}`, children: t.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mt-1", children: t.capacity }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 mt-0.5", children: t.desc })] }, t.name))) })] }), (0, jsx_runtime_1.jsx)(Modal, { open: !!selectedNft, onClose: () => setSelectedNft(null), children: selectedNft && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "aspect-square bg-neutral-800 rounded-lg overflow-hidden flex items-center justify-center", children: selectedNft.image ? ((0, jsx_runtime_1.jsx)("img", { src: selectedNft.image, alt: selectedNft.name, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-6xl", children: "\uD83C\uDFD7" })) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold text-white", children: selectedNft.name }), (0, jsx_runtime_1.jsx)("span", { className: `text-xs px-2 py-0.5 rounded ${TYPE_COLORS[selectedNft.nft_type] ?? 'bg-neutral-700 text-neutral-400'}`, children: selectedNft.nft_type })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between p-2 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Mint" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white font-mono text-xs", children: selectedNft.mint })] }), selectedNft.owner && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between p-2 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Owner" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-mono text-xs", children: [selectedNft.owner.slice(0, 8), "...", selectedNft.owner.slice(-4)] })] })), selectedNft.unit_id && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between p-2 bg-neutral-800 rounded", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: "Unit ID" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white font-mono", children: selectedNft.unit_id })] }))] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setSelectedNft(null), className: "w-full py-2 border border-neutral-700 rounded text-neutral-400 hover:bg-neutral-800 bg-transparent text-sm", children: "Close" })] })) })] }));
+    const [selectedId, setSelectedId] = (0, react_1.useState)(null);
+    const [filterType, setFilterType] = (0, react_1.useState)('all');
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
+    const { data: summary, loading: summaryLoading } = (0, auth_react_1.useTerritorySummary)();
+    const { data: territories, loading: territoriesLoading } = (0, auth_react_1.useTerritories)(filterType === 'all' ? {} : { unitType: filterType });
+    const territoryList = Array.isArray(territories) ? territories : [];
+    const sum = summary;
+    // Client-side search filtering
+    const filteredTerritories = (0, react_1.useMemo)(() => {
+        if (!searchTerm.trim())
+            return territoryList;
+        const q = searchTerm.toLowerCase();
+        return territoryList.filter((t) => (t.unit_name && t.unit_name.toLowerCase().includes(q)) ||
+            (t.description && t.description.toLowerCase().includes(q)) ||
+            (t.short_id && t.short_id.toLowerCase().includes(q)) ||
+            (t.full_path && t.full_path.toLowerCase().includes(q)));
+    }, [territoryList, searchTerm]);
+    // Find selected territory object for detail view
+    const selectedTerritory = selectedId
+        ? territoryList.find((t) => t.unit_id === selectedId)
+        : undefined;
+    /* -- Detail view -- */
+    if (selectedId) {
+        return ((0, jsx_runtime_1.jsx)(TerritoryDetailView, { territoryId: selectedId, territory: selectedTerritory, onBack: () => setSelectedId(null) }));
+    }
+    /* -- List view -- */
+    // Loading skeleton for initial load
+    if (summaryLoading && territoriesLoading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between", children: (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-8 w-56" }) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-24" }, i)) }), (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-14" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [...Array(6)].map((_, i) => (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-72" }, i)) })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white", children: "Territory Management" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm mt-1", children: "Manage territories, view KPI and vault balances" })] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
+                    { label: 'Total Territories', value: sum?.total_stations ?? 0, icon: (0, jsx_runtime_1.jsx)(IconBuilding2, { className: "w-4 h-4 text-cyan-400" }), suffix: '' },
+                    { label: 'Total Members', value: sum?.total_members ?? 0, icon: (0, jsx_runtime_1.jsx)(IconUsers, { className: "w-4 h-4 text-neutral-400" }), suffix: '' },
+                    { label: 'Total Vault MCD', value: Math.round(sum?.total_vault_mcd ?? 0), icon: (0, jsx_runtime_1.jsx)(IconVault, { className: "w-4 h-4 text-neutral-400" }), suffix: ' MCD' },
+                    { label: 'Avg KPI', value: sum?.avg_kpi_score != null ? Math.round(sum.avg_kpi_score * 100) : 0, icon: (0, jsx_runtime_1.jsx)(IconEdit3, { className: "w-4 h-4 text-neutral-400" }), suffix: '%' },
+                ].map((s) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [s.icon, (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", children: s.label })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-bold text-white font-mono", children: summaryLoading ? (0, jsx_runtime_1.jsx)(Spinner, {}) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [fmt(s.value), s.suffix] }) })] }, s.label))) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [(0, jsx_runtime_1.jsx)(IconSearch, { className: "w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "Search territories...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full pl-10 pr-3 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-white text-sm placeholder:text-neutral-500 outline-none focus:border-cyan-400/50 transition-colors" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 flex-wrap", children: UNIT_TYPE_LABELS.map((ut) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setFilterType(ut.key), className: `px-3 py-2 text-sm rounded-lg border transition-colors ${filterType === ut.key
+                                    ? 'bg-cyan-700 text-white border-cyan-700'
+                                    : 'bg-transparent border-neutral-700 text-neutral-400 hover:text-neutral-200 hover:border-neutral-500'}`, children: ut.label }, ut.key))) })] }) }), territoriesLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [...Array(6)].map((_, i) => (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-72" }, i)) })) : filteredTerritories.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-12 text-center", children: [(0, jsx_runtime_1.jsx)(IconImage, { className: "w-12 h-12 mx-auto mb-4 text-neutral-600" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400", children: "No territories found" }), searchTerm && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-500 mt-1", children: "Try adjusting your search or filter criteria" }))] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: filteredTerritories.map((unit) => ((0, jsx_runtime_1.jsx)(TerritoryCard, { unit: unit, onClick: () => setSelectedId(unit.unit_id) }, unit.unit_id))) }))] }));
 }

package/dist/components/voting/voting-page.js

@@ -4,15 +4,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MicrocosmVotingPage = MicrocosmVotingPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* ── Inline SVG Icons (lucide style: 24x24, stroke 2, round caps) ── */
+const VoteIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 11.08V8l-6-6H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h6" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 2v6h6" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 21l-3-3 3-3" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 18h-6" })] }));
+const SwordsIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("polyline", { points: "14.5 17.5 3 6 3 3 6 3 17.5 14.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "13", y1: "19", x2: "19", y2: "13" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", y1: "16", x2: "20", y2: "20" }), (0, jsx_runtime_1.jsx)("line", { x1: "19", y1: "21", x2: "21", y2: "19" }), (0, jsx_runtime_1.jsx)("polyline", { points: "14.5 6.5 18 3 21 3 21 6 17.5 9.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "5", y1: "14", x2: "9", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "7", y1: "17", x2: "4", y2: "20" }), (0, jsx_runtime_1.jsx)("line", { x1: "3", y1: "19", x2: "5", y2: "21" })] }));
+const HeartIcon = ({ className }) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: (0, jsx_runtime_1.jsx)("path", { d: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" }) }));
+const ConstructionIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("rect", { x: "2", y: "6", width: "20", height: "8", rx: "1" }), (0, jsx_runtime_1.jsx)("path", { d: "M17 14v7" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 14v7" }), (0, jsx_runtime_1.jsx)("path", { d: "M17 3v3" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 3v3" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 14 2.3 6.3" }), (0, jsx_runtime_1.jsx)("path", { d: "m14 6 7.7 7.7" }), (0, jsx_runtime_1.jsx)("path", { d: "m8 6 8 8" })] }));
+const TargetIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "6" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "2" })] }));
+const ShieldIcon = ({ className }) => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: (0, jsx_runtime_1.jsx)("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) }));
+const UsersIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+const CoinsIcon = ({ className }) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "6" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 6h1v4" }), (0, jsx_runtime_1.jsx)("path", { d: "m16.71 13.88.7.71-2.82 2.82" })] }));
 function MicrocosmVotingPage({ basePath = '', onNavigate }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white", children: "Voting & Governance" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm mt-1", children: "Decentralized decision-making protocol" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] bg-cyan-400/20 text-cyan-400 px-2 py-0.5 rounded", children: "Under Construction" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "BUILD_GOAL" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-300 text-sm mb-4", children: "A decentralized governance system that aligns economic incentives with community decision-making, preventing Sybil attacks while ensuring fair representation." }), (0, jsx_runtime_1.jsx)("div", { className: "grid md:grid-cols-3 gap-3", children: [
-                            { title: 'Anti-Sybil', desc: 'Economic cost to vote prevents fake identity attacks', icon: '🛡' },
-                            { title: 'Incentive Alignment', desc: 'Voting costs create genuine commitment to outcomes', icon: '⚖️' },
-                            { title: 'Decentralized', desc: 'No central authority — community-driven decisions', icon: '🌐' },
-                        ].map((f) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl mb-2", children: f.icon }), (0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold text-sm", children: f.title }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mt-1", children: f.desc })] }, f.title))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid md:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl", children: "\uD83C\uDFAF" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold", children: "Betting Mode" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] bg-cyan-400/20 text-cyan-400 px-1.5 py-0.5 rounded", children: "Prediction" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 mb-4", children: "Participants stake MCC on their predicted outcome. Winners share the losing pool proportionally." }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mb-2", children: "Mechanism" }), (0, jsx_runtime_1.jsxs)("ol", { className: "list-decimal list-inside text-sm text-neutral-300 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "Stake MCC on a predicted outcome" }), (0, jsx_runtime_1.jsx)("li", { children: "Wait for resolution (oracle / admin)" }), (0, jsx_runtime_1.jsx)("li", { children: "Winners split the losing pool" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl", children: "\u2764\uFE0F" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-bold", children: "Welfare Mode" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] bg-red-400/20 text-red-400 px-1.5 py-0.5 rounded", children: "Public Good" })] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400 mb-4", children: "Participants vote with MCC. All staked tokens go to a foundation fund for ecosystem development." }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 mb-2", children: "Mechanism" }), (0, jsx_runtime_1.jsxs)("ol", { className: "list-decimal list-inside text-sm text-neutral-300 space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "Vote with MCC (quadratic or linear)" }), (0, jsx_runtime_1.jsx)("li", { children: "All votes fund the foundation" }), (0, jsx_runtime_1.jsx)("li", { children: "Majority decision executed" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-4", children: "VOTING_PARAMETERS" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-3", children: [
-                            { label: 'voting_currency', value: 'MCC', desc: 'Microcosm Coin' },
-                            { label: 'vote_weight', value: 'Quadratic', desc: 'sqrt(tokens) = votes' },
-                            { label: 'min_participation', value: 'Quorum', desc: 'Minimum voter threshold' },
-                            { label: 'foundation_fund', value: 'Reserve', desc: 'Ecosystem development' },
-                        ].map((p) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-400 tracking-wider mb-1", children: p.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold text-cyan-400", children: p.value }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 mt-1", children: p.desc })] }, p.label))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-3", children: "\uD83C\uDFD7" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 font-mono text-sm", children: "Voting system is under active development. Stay tuned for updates." })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto p-6 space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold text-white tracking-wider", children: "Community Voting" }), (0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center bg-cyan-400/20 text-cyan-400 border border-cyan-400/30 text-xs px-2.5 py-0.5 rounded-full font-medium", children: [(0, jsx_runtime_1.jsx)(ConstructionIcon, { className: "w-3 h-3 mr-1" }), "Under Construction"] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-neutral-400", children: "Token-driven community governance and decision-making mechanism" })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-neutral-400 text-sm mb-4", children: [(0, jsx_runtime_1.jsx)(TargetIcon, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsx)("span", { className: "tracking-wider", children: "Build Goal" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-neutral-300 text-sm leading-relaxed", children: "Microcosm community voting system uses a \"Capital Voting\" mechanism -- users vote with MCC Tokens, making every vote carry real economic weight." }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)(ShieldIcon, { className: "w-5 h-5 text-white mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium mb-1", children: "Anti-Sybil Attack" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs", children: "Voting requires real capital investment, effectively preventing ballot stuffing and fake votes" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)(CoinsIcon, { className: "w-5 h-5 text-white mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium mb-1", children: "Economic Game Theory" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs", children: "Voters bear economic consequences for their choices, promoting rational decision-making" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700 hover:border-cyan-400/50 transition-colors", children: [(0, jsx_runtime_1.jsx)(UsersIcon, { className: "w-5 h-5 text-white mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium mb-1", children: "Community Self-governance" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs", children: "Major decisions are made jointly by token-holding community, achieving decentralized governance" })] })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 rounded bg-neutral-800", children: (0, jsx_runtime_1.jsx)(SwordsIcon, { className: "w-5 h-5 text-white" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-medium", children: "Betting Mode Voting" }), (0, jsx_runtime_1.jsx)("span", { className: "inline-block bg-cyan-400/20 text-cyan-400 border border-cyan-400/30 text-xs px-2.5 py-0.5 rounded-full font-medium mt-1", children: "Betting Mode" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm leading-relaxed", children: "Voters invest MCC into their supported option. After voting ends, funds from the losing side are distributed equally among all voters on the winning side." }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-2", children: "Mechanism" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5 text-xs text-neutral-400", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500 mt-0.5", children: "1." }), (0, jsx_runtime_1.jsx)("span", { children: "Users vote for an option with MCC" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500 mt-0.5", children: "2." }), (0, jsx_runtime_1.jsx)("span", { children: "After voting closes, results are tallied, the side with more votes wins" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500 mt-0.5", children: "3." }), (0, jsx_runtime_1.jsx)("span", { children: "MCC from losing side distributed proportionally to winning voters" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "Use cases: Market predictions, community disputes, direction choices" })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg hover:border-cyan-400/50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-2 rounded bg-neutral-800", children: (0, jsx_runtime_1.jsx)(HeartIcon, { className: "w-5 h-5 text-red-400" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-medium", children: "Public Welfare Voting" }), (0, jsx_runtime_1.jsx)("span", { className: "inline-block bg-white/20 text-white border border-white/30 text-xs px-2.5 py-0.5 rounded-full font-medium mt-1", children: "Public Welfare Mode" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400 text-sm leading-relaxed", children: "Regardless of outcome, all MCC invested by voters goes to the foundation pool, funding third-party project development and ecosystem building." }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-2", children: "Mechanism" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-1.5 text-xs text-neutral-400", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500 mt-0.5", children: "1." }), (0, jsx_runtime_1.jsx)("span", { children: "Users vote for an option with MCC" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500 mt-0.5", children: "2." }), (0, jsx_runtime_1.jsx)("span", { children: "After voting closes, results are tallied, majority decision is executed" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-500 mt-0.5", children: "3." }), (0, jsx_runtime_1.jsx)("span", { children: "All voting funds (both sides) enter the foundation" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-500", children: "Use cases: Public proposals, ecosystem fund allocation, project support decisions" })] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-neutral-400 text-sm mb-4", children: [(0, jsx_runtime_1.jsx)(VoteIcon, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsx)("span", { className: "tracking-wider", children: "Voting Rules" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "voting_currency" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium", children: "MCC (Microcosm Coin)" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs mt-1", children: "Votes use MCC Token, invested funds are locked" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "vote_weight" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium", children: "1 MCC = 1 Vote" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs mt-1", children: "Voting weight proportional to invested amount" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "min_participation" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium", children: "Miner Level or Above" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs mt-1", children: "Must reach Miner rank to participate in voting" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-neutral-800 rounded border border-neutral-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 tracking-wider mb-1", children: "foundation_fund" }), (0, jsx_runtime_1.jsx)("div", { className: "text-white text-sm font-medium", children: "Support Third-party Projects" }), (0, jsx_runtime_1.jsx)("div", { className: "text-neutral-500 text-xs mt-1", children: "Public welfare voting funds used for ecosystem building" })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-8", children: [(0, jsx_runtime_1.jsx)(ConstructionIcon, { className: "w-10 h-10 text-neutral-700 mx-auto mb-3" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-500 text-sm", children: "Community voting feature is under development, stay tuned" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-500 text-xs mt-1", children: "Coming Soon" })] })] }));
 }