@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/pages/workforce-map-view.mjs

@@ -0,0 +1,953 @@
+import { Badge } from "../badge.mjs";
+import { Spinner } from "../spinner.mjs";
+import { HoverTooltip } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs.mjs";
+import { Input } from "../input.mjs";
+import { Avatar, AvatarFallback } from "../avatar.mjs";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group.mjs";
+import { useOptionalFragmentViewer } from "../fragment-viewer/context.mjs";
+import { ImageZoom } from "../image-zoom.mjs";
+import { TimeScrubber } from "../time-scrubber.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { AlertTriangle, Box, Building2, Ghost, Grid2x2, Maximize2, Orbit, PanelLeftClose, PanelLeftOpen, PersonStanding, Search, Sparkles, Square, Users, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/workforce-map-view.tsx
+const MARKER_ACTIVE = "#22c55e";
+const MARKER_INACTIVE = "#f59e0b";
+const LEVEL_NAMES = [
+	"00 begane grond",
+	"01 eerste verdieping",
+	"02 tweede verdieping",
+	"03 derde verdieping",
+	"04 vierde verdieping",
+	"05 vijfde verdieping",
+	"06 zesde verdieping",
+	"07 zevende verdieping",
+	"08 achtste verdieping",
+	"09 negende verdieping",
+	"10 tiende verdieping",
+	"11 elfde verdieping",
+	"12 twaalfde verdieping",
+	"13 dertiende verdieping",
+	"14 veertiende verdieping",
+	"15 vijftiende verdieping",
+	"16 zestiende verdieping",
+	"17 zeventiende verdieping",
+	"18 achttiende verdieping",
+	"19 negentiende verdieping",
+	"20 twintigste verdieping",
+	"21 eenentwintigste verdieping",
+	"22 tweeentwintigste verdieping",
+	"23 drieentwintigste verdieping",
+	"24 vierentwintigste verdieping",
+	"25 vijfentwintigste verdieping",
+	"26 zesentwintigste verdieping",
+	"27 zevenentwintigste verdieping",
+	"28 achtentwintigste verdieping",
+	"29 negenentwintigste verdieping",
+	"30 dertigste verdieping",
+	"31 eenendertigste verdieping",
+	"32 tweeendertigste verdieping",
+	"33 drieendertigste verdieping",
+	"34 vierendertigste verdieping"
+];
+const TRADES = [
+	{
+		name: "Direct-Helper",
+		count: 118
+	},
+	{
+		name: "Direct-Scaffolder",
+		count: 74
+	},
+	{
+		name: "Electrician",
+		count: 63
+	},
+	{
+		name: "Steel Fixer",
+		count: 52
+	},
+	{
+		name: "Mason",
+		count: 47
+	},
+	{
+		name: "Indirect-Driver",
+		count: 31
+	},
+	{
+		name: "Welder",
+		count: 27
+	}
+];
+const CREWS = [
+	{
+		name: "TR-TAMIMI",
+		count: 64
+	},
+	{
+		name: "TR-RED CAMEL",
+		count: 58
+	},
+	{
+		name: "TR-UNITED",
+		count: 49
+	},
+	{
+		name: "DSCO",
+		count: 41
+	},
+	{
+		name: "TR-FALCON",
+		count: 38
+	}
+];
+const WORKER_NAMES = [
+	"Rajesh Kumar",
+	"Bikash Thapa",
+	"Arun Nair",
+	"Santosh Rana",
+	"Deepak Sharma",
+	"Imran Khan",
+	"Suresh Patel",
+	"Nabin Gurung",
+	"Vijay Singh",
+	"Manoj Yadav",
+	"Prakash Rai",
+	"Amit Verma",
+	"Ram Bahadur",
+	"Krishna Magar",
+	"Ahmed Al-Rashid",
+	"Jorge Mendoza",
+	"Ravi Patel",
+	"Fatima Noor",
+	"Dmitri Ivanov",
+	"Chen Wei",
+	"Omar Farouk",
+	"Layla Hassan",
+	"Samuel Okafor",
+	"Tej Pakhrin"
+];
+const WORKER_TRADES = [
+	"Direct-Helper",
+	"Direct-Scaffolder",
+	"Electrician",
+	"Steel Fixer",
+	"Mason",
+	"Indirect-Driver",
+	"Welder"
+];
+function hashStr(s) {
+	let h = 0;
+	for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) >>> 0;
+	return h;
+}
+/** A deterministic worker roster for a level — stable across renders, seeded from the level name. */
+function levelWorkers(levelName, count) {
+	const h = hashStr(levelName);
+	return Array.from({ length: count }, (_, i) => ({
+		id: `${levelName}-${i}`,
+		name: WORKER_NAMES[(h * 3 + i * 7) % WORKER_NAMES.length],
+		trade: WORKER_TRADES[(h + i) % WORKER_TRADES.length],
+		status: (h + i) % 8 === 0 ? "inactive" : "active"
+	}));
+}
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
+}
+const SAMPLE_FLOOR_PLAN = "/images/floor-plan.png";
+/** A schematic fallback plan, drawn deterministically from the floor name (used if the image fails). */
+function SchematicPlan({ name }) {
+	const seed = [...name].reduce((sum, c) => sum + c.charCodeAt(0), 0);
+	const W = 240;
+	const H = 150;
+	const m = 10;
+	const corridorTop = 64;
+	const corridorBot = 90;
+	const topRooms = 3 + seed % 3;
+	const botRooms = 3 + (seed >> 2) % 3;
+	const dividers = (count) => Array.from({ length: count - 1 }, (_, i) => m + 220 * (i + 1) / count);
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: `0 0 ${W} ${H}`,
+		className: "wwc:h-auto wwc:w-full wwc:text-muted-foreground/70",
+		fill: "none",
+		stroke: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: m,
+				y: m,
+				width: 220,
+				height: 130,
+				rx: 3,
+				className: "wwc:fill-card",
+				strokeWidth: 2.5
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: m,
+				y1: corridorTop,
+				x2: 230,
+				y2: corridorTop,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: m,
+				y1: corridorBot,
+				x2: 230,
+				y2: corridorBot,
+				strokeWidth: 1.5
+			}),
+			dividers(topRooms).map((x) => /* @__PURE__ */ jsx("line", {
+				x1: x,
+				y1: m,
+				x2: x,
+				y2: corridorTop,
+				strokeWidth: 1.5
+			}, `t${x}`)),
+			dividers(botRooms).map((x) => /* @__PURE__ */ jsx("line", {
+				x1: x,
+				y1: corridorBot,
+				x2: x,
+				y2: 140,
+				strokeWidth: 1.5
+			}, `b${x}`))
+		]
+	});
+}
+/** The 2D floor plan for a level — the sample blueprint via the shared ImageZoom (click to enlarge),
+*  falling back to a schematic if it 404s. */
+function FloorPlan2D({ name, className }) {
+	const [failed, setFailed] = useState(false);
+	if (failed) return /* @__PURE__ */ jsx("div", {
+		className: cn("wwc:overflow-hidden wwc:rounded-md wwc:border wwc:border-border wwc:bg-card", className),
+		children: /* @__PURE__ */ jsx(SchematicPlan, { name })
+	});
+	return /* @__PURE__ */ jsx(ImageZoom, {
+		src: SAMPLE_FLOOR_PLAN,
+		alt: `Floor plan of ${name}`,
+		title: /* @__PURE__ */ jsxs("span", {
+			className: "wwc:flex wwc:items-center wwc:gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Building2, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }),
+				name,
+				" — floor plan"
+			]
+		}),
+		onError: () => setFailed(true),
+		className: cn("wwc:rounded-md wwc:border wwc:border-border wwc:bg-card", className)
+	});
+}
+/** Right-hand menu: the clicked level's worker count and the roster on it. */
+function LevelDetailsPanel({ name, count, onClose }) {
+	const workers = useMemo(() => levelWorkers(name, count), [name, count]);
+	const active = workers.filter((w) => w.status === "active").length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:max-h-[60vh] wwc:min-h-0 wwc:w-full wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:shadow-lg",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:border-border wwc:px-3 wwc:py-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2",
+				children: [/* @__PURE__ */ jsx(Building2, { className: "wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					className: "wwc:truncate wwc:text-sm wwc:font-semibold",
+					children: name
+				})]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				icon: true,
+				"aria-label": "Close level details",
+				className: "wwc:h-6 wwc:w-6 wwc:shrink-0",
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(X, { className: "wwc:h-4 wwc:w-4" })
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:shrink-0 wwc:border-b wwc:border-border wwc:px-4 wwc:py-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground/70",
+						children: "Floor plan"
+					}), /* @__PURE__ */ jsx(FloorPlan2D, {
+						name,
+						className: "wwc:mt-2"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:shrink-0 wwc:border-b wwc:border-border wwc:px-4 wwc:py-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-baseline wwc:gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-2xl wwc:font-bold wwc:tabular-nums",
+							children: count
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wwc:text-xs wwc:text-muted-foreground",
+							children: "workers on this level"
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "wwc:mt-1 wwc:flex wwc:gap-3 wwc:text-xs wwc:text-muted-foreground",
+						children: [/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:font-semibold wwc:text-green-600",
+							children: active
+						}), " active"] }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:font-semibold wwc:text-amber-600",
+							children: count - active
+						}), " inactive"] })]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:min-h-0 wwc:flex-1 wwc:overflow-auto wwc:p-2",
+					children: workers.map((w) => /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2 wwc:rounded wwc:px-2 wwc:py-1.5 wwc:transition-colors wwc:hover:bg-muted/50",
+						children: [
+							/* @__PURE__ */ jsx(Avatar, {
+								className: "wwc:h-7 wwc:w-7",
+								children: /* @__PURE__ */ jsx(AvatarFallback, {
+									className: "wwc:text-[10px]",
+									children: initials(w.name)
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "wwc:truncate wwc:text-sm wwc:font-medium",
+									children: w.name
+								}), /* @__PURE__ */ jsx("span", {
+									className: "wwc:truncate wwc:text-xs wwc:text-muted-foreground",
+									children: w.trade
+								})]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: cn("wwc:h-2 wwc:w-2 wwc:shrink-0 wwc:rounded-full", w.status === "active" ? "wwc:bg-green-500" : "wwc:bg-amber-500"),
+								"aria-label": w.status
+							})
+						]
+					}, w.id))
+				})
+			]
+		})]
+	});
+}
+/** A compact single-line "name — count" row, optionally selectable (used by the Level tab). */
+function CountRow({ name, count, active, onClick }) {
+	const body = /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:rounded wwc:px-2 wwc:py-1", onClick && "wwc:transition-colors wwc:hover:bg-muted/60", active && "wwc:bg-muted"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("wwc:truncate wwc:text-sm", active && "wwc:font-semibold"),
+			children: name
+		}), /* @__PURE__ */ jsx(Badge, {
+			variant: active ? "secondary" : "neutralSoft",
+			className: "wwc:h-5 wwc:tabular-nums",
+			children: count
+		})]
+	});
+	return onClick ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-level": name,
+		onClick,
+		className: "wwc:block wwc:w-full wwc:text-left",
+		children: body
+	}) : body;
+}
+/** The collapsible left menu: a compact headcount strip and Level / Trade / Crew tabs. */
+function WorkersPanel({ onClose, levels, activeLevel, onSelectLevel }) {
+	const [tab, setTab] = useState("level");
+	const [query, setQuery] = useState("");
+	const filteredLevels = levels.filter((l) => l.name.toLowerCase().includes(query.trim().toLowerCase()));
+	const levelListRef = useRef(null);
+	useEffect(() => {
+		if (!activeLevel) return;
+		(levelListRef.current?.querySelector(`[data-level="${activeLevel}"]`))?.scrollIntoView({ block: "nearest" });
+	}, [activeLevel]);
+	const total = levels.reduce((sum, l) => sum + l.count, 0);
+	const active = Math.round(total * .93);
+	const day = Math.round(total * .97);
+	const headStats = [
+		{
+			label: "Active",
+			value: active,
+			tone: "wwc:text-green-600"
+		},
+		{
+			label: "Inactive",
+			value: total - active,
+			tone: "wwc:text-amber-600"
+		},
+		{
+			label: "Day",
+			value: day
+		},
+		{
+			label: "Night",
+			value: total - day
+		}
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:max-h-[60vh] wwc:min-h-0 wwc:w-full wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:shadow-lg",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:border-border wwc:px-3 wwc:py-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-2",
+					children: [/* @__PURE__ */ jsx(Users, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-sm wwc:font-semibold",
+						children: "Workers in Building"
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: true,
+					"aria-label": "Collapse panel",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(PanelLeftClose, {})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:shrink-0 wwc:border-b wwc:border-border wwc:px-3 wwc:py-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-baseline wwc:gap-1.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xl wwc:font-bold wwc:tabular-nums",
+						children: total.toLocaleString()
+					}), /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: "on site"
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "wwc:mt-1 wwc:flex wwc:flex-wrap wwc:gap-x-3 wwc:gap-y-0.5 wwc:text-xs wwc:text-muted-foreground",
+					children: headStats.map((s) => /* @__PURE__ */ jsxs("span", { children: [
+						/* @__PURE__ */ jsx("span", {
+							className: cn("wwc:font-semibold wwc:tabular-nums", s.tone ?? "wwc:text-foreground"),
+							children: s.value.toLocaleString()
+						}),
+						" ",
+						s.label
+					] }, s.label))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Tabs, {
+				value: tab,
+				onValueChange: setTab,
+				variant: "underline",
+				size: "sm",
+				className: "wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col",
+				children: [
+					/* @__PURE__ */ jsxs(TabsList, {
+						className: "wwc:shrink-0 wwc:px-3",
+						children: [
+							/* @__PURE__ */ jsx(TabsTrigger, {
+								value: "level",
+								className: "wwc:flex-1 wwc:py-1.5 wwc:text-xs",
+								children: "Level"
+							}),
+							/* @__PURE__ */ jsx(TabsTrigger, {
+								value: "trade",
+								className: "wwc:flex-1 wwc:py-1.5 wwc:text-xs",
+								children: "Trade"
+							}),
+							/* @__PURE__ */ jsx(TabsTrigger, {
+								value: "crew",
+								className: "wwc:flex-1 wwc:py-1.5 wwc:text-xs",
+								children: "Crew"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs(TabsContent, {
+						value: "level",
+						className: "wwc:mt-0 wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col wwc:p-0",
+						children: [
+							activeLevel ? /* @__PURE__ */ jsxs("div", {
+								className: "wwc:shrink-0 wwc:border-b wwc:border-border wwc:bg-primary/5 wwc:px-3 wwc:py-1.5 wwc:text-xs wwc:text-muted-foreground",
+								children: [
+									"Isolating ",
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:font-medium wwc:text-foreground",
+										children: activeLevel
+									}),
+									" — click it again to exit."
+								]
+							}) : null,
+							/* @__PURE__ */ jsx("div", {
+								className: "wwc:shrink-0 wwc:p-2 wwc:pb-1",
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "wwc:relative",
+									children: [/* @__PURE__ */ jsx(Search, { className: "wwc:pointer-events-none wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:h-3.5 wwc:w-3.5 wwc:-translate-y-1/2 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+										value: query,
+										onChange: (e) => setQuery(e.target.value),
+										placeholder: "Search levels…",
+										className: "wwc:h-8 wwc:pl-8"
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: levelListRef,
+								className: "wwc:min-h-0 wwc:flex-1 wwc:overflow-auto wwc:px-2 wwc:pb-2",
+								children: filteredLevels.length === 0 ? /* @__PURE__ */ jsx("p", {
+									className: "wwc:px-2 wwc:py-4 wwc:text-center wwc:text-sm wwc:text-muted-foreground",
+									children: "No levels match."
+								}) : filteredLevels.map((level) => /* @__PURE__ */ jsx(CountRow, {
+									name: level.name,
+									count: level.count,
+									active: level.name === activeLevel,
+									onClick: () => onSelectLevel(level.name)
+								}, level.name))
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(TabsContent, {
+						value: "trade",
+						className: "wwc:mt-0 wwc:min-h-0 wwc:flex-1 wwc:p-2",
+						children: TRADES.map((trade) => /* @__PURE__ */ jsx(CountRow, {
+							name: trade.name,
+							count: trade.count
+						}, trade.name))
+					}),
+					/* @__PURE__ */ jsx(TabsContent, {
+						value: "crew",
+						className: "wwc:mt-0 wwc:min-h-0 wwc:flex-1 wwc:p-2",
+						children: CREWS.map((crew) => /* @__PURE__ */ jsx(CountRow, {
+							name: crew.name,
+							count: crew.count
+						}, crew.name))
+					})
+				]
+			})
+		]
+	});
+}
+const levelCount = (i) => 55 + (i * 37 + 13) % 95;
+function dayFactor(t) {
+	const h = t.getHours() + t.getMinutes() / 60;
+	if (h < 5.5 || h > 19.5) return .04;
+	const ramp = Math.min(1, (h - 5.5) / 1.5);
+	const taper = Math.min(1, (19.5 - h) / 2.5);
+	const lunch = h > 12 && h < 13 ? .6 : 1;
+	return Math.max(.04, Math.min(1, ramp * taper * lunch));
+}
+/** Small deterministic PRNG so worker scatter is stable across renders. */
+function rng(seed) {
+	let s = seed >>> 0 || 1;
+	return () => {
+		s = Math.imul(s, 1664525) + 1013904223 >>> 0;
+		return s / 4294967296;
+	};
+}
+/**
+* Place each storey's workers *inside its own footprint* — the real per-floor world box, so upper-floor
+* workers sit in the tower rather than out over the podium void, at floor height rather than floating.
+* World-space (the marker mesh lives in the world scene), seeded so positions don't jump.
+*/
+function buildWorkerMarkers(storeys, bounds, footprints) {
+	const out = [];
+	storeys.forEach((storey, i) => {
+		const count = levelCount(i);
+		const box = footprints[storey.id] ?? bounds;
+		const [minX, minY, minZ] = box.min;
+		const [maxX, , maxZ] = box.max;
+		const insetX = (maxX - minX) * .2;
+		const insetZ = (maxZ - minZ) * .2;
+		const x0 = minX + insetX;
+		const x1 = maxX - insetX;
+		const z0 = minZ + insetZ;
+		const z1 = maxZ - insetZ;
+		const y = minY + 1;
+		const r = rng(hashStr(storey.id) ^ 2654435769);
+		for (let k = 0; k < count; k++) {
+			const x = x0 + r() * (x1 - x0);
+			const z = z0 + r() * (z1 - z0);
+			out.push({
+				id: `${storey.id}#${k}`,
+				storeyId: storey.id,
+				position: [
+					x,
+					y,
+					z
+				],
+				status: Math.floor(r() * 100) % 12 === 0 ? "inactive" : "active",
+				presence: (k + .5) / count
+			});
+		}
+	});
+	return out;
+}
+/** Map View surface — the collapsible workers menu beside the injected 3D/map stage. */
+function WorkforceMapView({ stage }) {
+	const [open, setOpen] = useState(true);
+	const [viewMode, setViewMode] = useState("3d");
+	const viewer = useOptionalFragmentViewer();
+	const [localActive, setLocalActive] = useState(null);
+	const storeyCount = viewer?.state.storeys.length ?? 0;
+	const viewerReady = viewer?.state.ready ?? false;
+	useEffect(() => {
+		if (viewer && viewerReady && storeyCount === 0) viewer.api.loadStoreys();
+	}, [
+		viewer,
+		viewerReady,
+		storeyCount
+	]);
+	const storeyKey = viewer?.state.storeys.map((s) => s.name).join("|") ?? "";
+	const levels = useMemo(() => {
+		return (storeyKey ? storeyKey.split("|") : LEVEL_NAMES).map((name, i) => ({
+			name,
+			count: levelCount(i)
+		}));
+	}, [storeyKey]);
+	const [selectedDate, setSelectedDate] = useState(() => {
+		const s = /* @__PURE__ */ new Date();
+		s.setHours(0, 0, 0, 0);
+		return s;
+	});
+	const day = useMemo(() => ({
+		start: selectedDate,
+		end: new Date(selectedDate.getTime() + 864e5)
+	}), [selectedDate]);
+	const [currentTime, setCurrentTime] = useState(() => /* @__PURE__ */ new Date());
+	const maxTime = useMemo(() => {
+		const now = /* @__PURE__ */ new Date();
+		return selectedDate.getFullYear() === now.getFullYear() && selectedDate.getMonth() === now.getMonth() && selectedDate.getDate() === now.getDate() ? now : day.end;
+	}, [selectedDate, day]);
+	const changeDate = (d) => {
+		const start = new Date(d);
+		start.setHours(0, 0, 0, 0);
+		setSelectedDate(start);
+		const mins = currentTime.getHours() * 60 + currentTime.getMinutes();
+		setCurrentTime(new Date(start.getTime() + mins * 60 * 1e3));
+	};
+	const [playing, setPlaying] = useState(false);
+	const goToNow = () => {
+		const now = /* @__PURE__ */ new Date();
+		const start = new Date(now);
+		start.setHours(0, 0, 0, 0);
+		setSelectedDate(start);
+		setCurrentTime(now);
+		setPlaying(false);
+	};
+	const timeFactor = dayFactor(currentTime);
+	const scaledLevels = useMemo(() => levels.map((l) => ({
+		name: l.name,
+		count: Math.round(l.count * timeFactor)
+	})), [levels, timeFactor]);
+	const totalNow = scaledLevels.reduce((sum, l) => sum + l.count, 0);
+	const baseTotal = useMemo(() => levels.reduce((sum, l) => sum + l.count, 0), [levels]);
+	const activity = useMemo(() => {
+		const out = [];
+		const cutoff = maxTime.getTime();
+		for (let m = 0; m <= 1440; m += 20) {
+			const t = new Date(day.start.getTime() + m * 60 * 1e3);
+			const hhmm = `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
+			if (t.getTime() > cutoff) {
+				out.push({
+					time: t,
+					value: 0,
+					title: `${hhmm} — no data yet`
+				});
+				continue;
+			}
+			const total = Math.round(baseTotal * dayFactor(t));
+			const active = Math.round(total * .93);
+			const inactive = total - active;
+			out.push({
+				time: t,
+				value: total,
+				title: `${hhmm} — ${active.toLocaleString()} active · ${inactive.toLocaleString()} inactive`,
+				segments: [{
+					value: active,
+					className: "wwc:bg-green-400/70"
+				}, {
+					value: inactive,
+					className: "wwc:bg-amber-400/70"
+				}]
+			});
+		}
+		return out;
+	}, [
+		day,
+		baseTotal,
+		maxTime
+	]);
+	const [showWorkers, setShowWorkers] = useState(true);
+	const [shading, setShading] = useState(false);
+	const [workers, setWorkers] = useState([]);
+	const [markerRadius, setMarkerRadius] = useState(.3);
+	useEffect(() => {
+		if (!viewer || storeyCount === 0) {
+			setWorkers([]);
+			return;
+		}
+		let cancelled = false;
+		let tries = 0;
+		const build = async () => {
+			if (cancelled || !viewer) return;
+			const b = viewer.api.bounds();
+			if (!b) {
+				if (tries++ < 40) setTimeout(build, 200);
+				return;
+			}
+			const footprints = await viewer.api.storeyFootprints();
+			if (cancelled) return;
+			setWorkers(buildWorkerMarkers(viewer.state.storeys, b, footprints));
+			setMarkerRadius(Math.max(.2, Math.min(.5, (b.max[0] - b.min[0]) / 300)));
+		};
+		build();
+		return () => {
+			cancelled = true;
+		};
+	}, [storeyKey]);
+	const activeStorey = viewer?.state.activeStorey ?? null;
+	useEffect(() => {
+		if (!viewer) return;
+		if (!showWorkers) {
+			viewer.api.setMarkers([], {
+				occluded: false,
+				radius: markerRadius
+			});
+			return;
+		}
+		const visible = workers.filter((w) => w.presence <= timeFactor && (activeStorey ? w.storeyId === activeStorey : true));
+		viewer.api.setMarkers(visible.map((w) => ({
+			id: w.id,
+			position: w.position,
+			color: w.status === "active" ? MARKER_ACTIVE : MARKER_INACTIVE
+		})), {
+			occluded: false,
+			radius: markerRadius
+		});
+	}, [
+		workers,
+		activeStorey,
+		showWorkers,
+		markerRadius,
+		timeFactor
+	]);
+	const activeLevel = viewer ? viewer.state.activeStorey : localActive;
+	const selectLevel = (name) => {
+		if (viewer) {
+			if (viewer.state.activeStorey === name) viewer.api.closeStorey();
+			else viewer.api.openStorey(name);
+		} else setLocalActive((prev) => prev === name ? null : name);
+	};
+	const clearLevel = () => {
+		if (viewer) {
+			if (viewer.state.activeStorey) viewer.api.closeStorey();
+		} else setLocalActive(null);
+	};
+	const navRef = useRef({
+		levels,
+		activeLevel,
+		viewer,
+		setLocalActive
+	});
+	navRef.current = {
+		levels,
+		activeLevel,
+		viewer,
+		setLocalActive
+	};
+	useEffect(() => {
+		const onKey = (e) => {
+			if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+			const target = e.target;
+			if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) return;
+			const { levels: ls, activeLevel: cur, viewer: v } = navRef.current;
+			const names = ls.map((l) => l.name);
+			if (names.length === 0) return;
+			const idx = cur ? names.indexOf(cur) : -1;
+			const next = e.key === "ArrowDown" ? idx < 0 ? 0 : Math.min(names.length - 1, idx + 1) : idx < 0 ? names.length - 1 : Math.max(0, idx - 1);
+			if (next === idx) return;
+			e.preventDefault();
+			if (v) v.api.openStorey(names[next]);
+			else navRef.current.setLocalActive(names[next]);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, []);
+	const activeLevelData = activeLevel ? scaledLevels.find((l) => l.name === activeLevel) : void 0;
+	const modelStatus = viewer?.state.status;
+	const modelError = modelStatus === "error";
+	const modelLoading = !!viewer && !modelError && (modelStatus !== "ready" || storeyCount === 0 || workers.length === 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:relative wwc:min-h-0 wwc:min-w-0 wwc:flex-1 wwc:overflow-hidden",
+		children: [
+			stage,
+			open ? /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:left-3 wwc:top-3 wwc:z-20 wwc:w-72",
+				children: /* @__PURE__ */ jsx(WorkersPanel, {
+					onClose: () => setOpen(false),
+					levels: scaledLevels,
+					activeLevel,
+					onSelectLevel: selectLevel
+				})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:left-3 wwc:top-3 wwc:z-20",
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "wwc:gap-1.5 wwc:shadow-sm",
+					onClick: () => setOpen(true),
+					children: [/* @__PURE__ */ jsx(PanelLeftOpen, { className: "wwc:h-4 wwc:w-4" }), "Workers"]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:absolute wwc:left-1/2 wwc:top-3 wwc:z-20 wwc:flex wwc:-translate-x-1/2 wwc:items-center wwc:gap-2",
+				children: [/* @__PURE__ */ jsxs(ToggleGroup, {
+					type: "single",
+					value: viewMode,
+					onValueChange: (v) => v && setViewMode(v),
+					variant: "outline",
+					size: "sm",
+					className: "wwc:rounded-md wwc:border wwc:border-border wwc:bg-card wwc:p-0.5 wwc:shadow-md",
+					children: [/* @__PURE__ */ jsxs(ToggleGroupItem, {
+						value: "3d",
+						"aria-label": "3D view",
+						className: "wwc:gap-1.5",
+						children: [/* @__PURE__ */ jsx(Box, { className: "wwc:h-4 wwc:w-4" }), "3D"]
+					}), /* @__PURE__ */ jsxs(ToggleGroupItem, {
+						value: "2d",
+						"aria-label": "2D view — coming soon",
+						disabled: true,
+						className: "wwc:gap-1.5",
+						children: [
+							/* @__PURE__ */ jsx(Square, { className: "wwc:h-4 wwc:w-4" }),
+							"2D",
+							/* @__PURE__ */ jsx(Badge, {
+								variant: "secondary",
+								className: "wwc:h-4 wwc:px-1 wwc:text-[9px]",
+								children: "Soon"
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:gap-0.5 wwc:rounded-md wwc:border wwc:border-border wwc:bg-card wwc:p-0.5 wwc:shadow-md",
+					children: [
+						viewer && /* @__PURE__ */ jsxs(Fragment$1, { children: [[
+							{
+								key: "orbit",
+								label: "Orbit",
+								Icon: Orbit,
+								active: viewer.state.navigation === "Orbit",
+								onClick: () => viewer.api.setNavigation("Orbit")
+							},
+							{
+								key: "fit",
+								label: "Fit",
+								Icon: Maximize2,
+								active: false,
+								onClick: () => void viewer.api.fit()
+							},
+							{
+								key: "ortho",
+								label: "Ortho",
+								Icon: Grid2x2,
+								active: viewer.state.projection === "Orthographic",
+								onClick: () => void viewer.api.toggleProjection()
+							},
+							{
+								key: "shading",
+								label: "Shading",
+								Icon: Sparkles,
+								active: shading,
+								onClick: () => {
+									const next = !shading;
+									setShading(next);
+									viewer.api.setPostproduction(next);
+								}
+							},
+							{
+								key: "ghost",
+								label: "Ghost",
+								Icon: Ghost,
+								active: viewer.state.ghost,
+								onClick: () => void viewer.api.setGhost(!viewer.state.ghost)
+							}
+						].map(({ key, label, Icon, active, onClick }) => /* @__PURE__ */ jsx(HoverTooltip, {
+							content: label,
+							side: "bottom",
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: active ? "secondary" : "ghost",
+								size: "sm",
+								icon: true,
+								"aria-label": label,
+								className: "wwc:h-8 wwc:w-8 wwc:text-muted-foreground",
+								disabled: !viewerReady,
+								onClick,
+								children: /* @__PURE__ */ jsx(Icon, { className: "wwc:h-4 wwc:w-4" })
+							})
+						}, key)), /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "wwc:mx-0.5 wwc:h-5 wwc:w-px wwc:bg-border"
+						})] }),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: showWorkers ? "Hide workers" : "Show workers",
+							side: "bottom",
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: showWorkers ? "secondary" : "ghost",
+								size: "sm",
+								icon: true,
+								"aria-label": "Toggle workers on model",
+								className: "wwc:h-8 wwc:w-8 wwc:text-muted-foreground",
+								onClick: () => setShowWorkers(!showWorkers),
+								children: /* @__PURE__ */ jsx(Users, { className: "wwc:h-4 wwc:w-4" })
+							})
+						}),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "3D walk — coming soon",
+							side: "bottom",
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								icon: true,
+								"aria-label": "3D walk — coming soon",
+								disabled: true,
+								className: "wwc:h-8 wwc:w-8 wwc:text-muted-foreground",
+								children: /* @__PURE__ */ jsx(PersonStanding, { className: "wwc:h-4 wwc:w-4" })
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:inset-x-3 wwc:bottom-3 wwc:z-10",
+				children: /* @__PURE__ */ jsx(TimeScrubber, {
+					start: day.start,
+					end: day.end,
+					variant: "barGraph",
+					data: activity,
+					value: currentTime,
+					onValueChange: setCurrentTime,
+					max: maxTime,
+					date: selectedDate,
+					onDateChange: changeDate,
+					playing,
+					onPlayingChange: setPlaying,
+					onNow: goToNow,
+					valueLabel: `${totalNow.toLocaleString()} on site`,
+					className: "wwc:bg-card"
+				})
+			}),
+			activeLevelData && /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:right-3 wwc:top-3 wwc:z-20 wwc:w-80",
+				children: /* @__PURE__ */ jsx(LevelDetailsPanel, {
+					name: activeLevelData.name,
+					count: activeLevelData.count,
+					onClose: clearLevel
+				})
+			}),
+			(modelLoading || modelError) && /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:inset-0 wwc:z-30 wwc:flex wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-3 wwc:bg-background/80 wwc:backdrop-blur-sm",
+				children: modelError ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AlertTriangle, { className: "wwc:h-8 wwc:w-8 wwc:text-destructive" }), /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-sm wwc:text-muted-foreground",
+					children: "Couldn't load the model."
+				})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { className: "wwc:h-8 wwc:w-8 wwc:text-primary" }), /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-sm wwc:text-muted-foreground",
+					children: "Loading model…"
+				})] })
+			})
+		]
+	});
+}
+//#endregion
+export { WorkforceMapView };
+
+//# sourceMappingURL=workforce-map-view.mjs.map