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

package/dist/pages/core-org-overview.mjs

@@ -0,0 +1,718 @@
+import { Badge } from "../badge.mjs";
+import { Button } from "../button.mjs";
+import { Card } from "../card.mjs";
+import { ScrollArea } from "../scroll-area.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs.mjs";
+import { Input } from "../input.mjs";
+import { Separator } from "../separator.mjs";
+import { PushPanel, PushPanelContainer, PushPanelContent, PushPanelHeader, PushPanelHeaderActions, PushPanelHeaderTitle, PushPanelMain, PushPanelProvider, PushPanelTitle, PushPanelTrigger, usePushPanel } from "../push-panel.mjs";
+import { Progress } from "../progress.mjs";
+import { KPIBar } from "../kpi-bar.mjs";
+import { MAPBOX_TOKEN } from "../mapbox-token.mjs";
+import { MapControls } from "../map-controls.mjs";
+import { getProjectsByOrg } from "../data/mock-data.mjs";
+import { AlertTriangle, ArrowDown, ArrowUp, Calendar, CheckCircle2, ChevronLeft, ChevronRight, Clock, MapPin, Minus, Search, Users, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import mapboxgl from "mapbox-gl";
+import "mapbox-gl/dist/mapbox-gl.css";
+//#region src/pages/core-org-overview.tsx
+function FloatingExpandButtonLeft() {
+	const { open } = usePushPanel();
+	if (open) return null;
+	return /* @__PURE__ */ jsx(PushPanelTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			icon: true,
+			className: "wwc:absolute wwc:left-3 wwc:top-1/2 wwc:-translate-y-1/2 wwc:z-10 wwc:h-10 wwc:w-10 wwc:rounded-full wwc:bg-background wwc:shadow-md",
+			children: /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:h-5 wwc:w-5" })
+		})
+	});
+}
+function useMapResize(mapRef) {
+	const { open } = usePushPanel();
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			mapRef.current?.resize();
+		}, 350);
+		return () => clearTimeout(timer);
+	}, [open, mapRef]);
+}
+function MapResizeHandler({ mapRef }) {
+	useMapResize(mapRef);
+	return null;
+}
+function StatusIcon({ status }) {
+	switch (status) {
+		case "on-track": return /* @__PURE__ */ jsx(CheckCircle2, {
+			className: "wwc:h-4 wwc:w-4",
+			style: { color: "var(--chart-1)" }
+		});
+		case "at-risk": return /* @__PURE__ */ jsx(AlertTriangle, {
+			className: "wwc:h-4 wwc:w-4",
+			style: { color: "var(--chart-4)" }
+		});
+		case "delayed": return /* @__PURE__ */ jsx(Clock, { className: "wwc:h-4 wwc:w-4 wwc:text-destructive" });
+		default: return null;
+	}
+}
+function getStatusBadgeVariant(status) {
+	switch (status) {
+		case "on-track": return "default";
+		case "at-risk": return "secondary";
+		case "delayed": return "destructive";
+		default: return "outline";
+	}
+}
+function ProjectDetailsPanel({ project, onClose, onOpenProject }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:px-4 wwc:h-14 wwc:border-b wwc:shrink-0",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "wwc:text-base wwc:font-semibold wwc:text-foreground wwc:truncate",
+			children: "Project Details"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			icon: true,
+			className: "wwc:shrink-0",
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(X, { className: "wwc:h-4 wwc:w-4" })
+		})]
+	}), /* @__PURE__ */ jsx(PushPanelContent, {
+		className: "wwc:p-0",
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			className: "wwc:h-full",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-6 wwc:p-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:space-y-4",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "wwc:aspect-video wwc:w-full wwc:overflow-hidden wwc:rounded-lg wwc:bg-muted",
+								children: project.thumbnail ? /* @__PURE__ */ jsx("img", {
+									src: project.thumbnail,
+									alt: project.name,
+									className: "wwc:h-full wwc:w-full wwc:object-cover"
+								}) : /* @__PURE__ */ jsx("div", {
+									className: "wwc:flex wwc:h-full wwc:w-full wwc:items-center wwc:justify-center",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "wwc:text-4xl wwc:font-bold wwc:text-muted-foreground",
+										children: project.name.charAt(0)
+									})
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+								className: "wwc:text-lg wwc:font-semibold",
+								children: project.name
+							}), /* @__PURE__ */ jsx("div", {
+								className: "wwc:mt-2 wwc:flex wwc:items-center wwc:gap-2",
+								children: /* @__PURE__ */ jsxs(Badge, {
+									variant: getStatusBadgeVariant(project.status),
+									children: [/* @__PURE__ */ jsx(StatusIcon, { status: project.status }), /* @__PURE__ */ jsx("span", {
+										className: "wwc:ml-1 wwc:capitalize",
+										children: project.status?.replace("-", " ") || "Unknown"
+									})]
+								})
+							})] }),
+							project.description && /* @__PURE__ */ jsx("p", {
+								className: "wwc:text-sm wwc:text-muted-foreground",
+								children: project.description
+							}),
+							onOpenProject && /* @__PURE__ */ jsx(Button, {
+								className: "wwc:w-full",
+								onClick: () => onOpenProject(project),
+								children: "Open Project"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:space-y-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:justify-between",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:text-sm wwc:font-medium",
+								children: "Readiness"
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "wwc:text-sm wwc:font-bold",
+								children: [project.readiness || 0, "%"]
+							})]
+						}), /* @__PURE__ */ jsx(Progress, {
+							value: project.readiness || 0,
+							className: "wwc:h-2"
+						})]
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsxs(Tabs, {
+						defaultValue: "overview",
+						className: "wwc:w-full",
+						children: [
+							/* @__PURE__ */ jsxs(TabsList, {
+								className: "wwc:w-full",
+								children: [
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "overview",
+										className: "wwc:flex-1",
+										children: "Overview"
+									}),
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "team",
+										className: "wwc:flex-1",
+										children: "Team"
+									}),
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "timeline",
+										className: "wwc:flex-1",
+										children: "Timeline"
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "overview",
+								className: "wwc:mt-4 wwc:space-y-4",
+								children: [project.coordinates && /* @__PURE__ */ jsx(Card, {
+									className: "wwc:p-3",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:items-start wwc:gap-3",
+										children: [/* @__PURE__ */ jsx(MapPin, { className: "wwc:mt-0.5 wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+											className: "wwc:text-sm wwc:font-medium",
+											children: "Location"
+										}), /* @__PURE__ */ jsxs("p", {
+											className: "wwc:text-xs wwc:text-muted-foreground",
+											children: [
+												project.coordinates[1].toFixed(4),
+												"°N, ",
+												project.coordinates[0].toFixed(4),
+												"°E"
+											]
+										})] })]
+									})
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "wwc:grid wwc:grid-cols-2 wwc:gap-3",
+									children: [/* @__PURE__ */ jsxs(Card, {
+										className: "wwc:p-3",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "wwc:text-xs wwc:text-muted-foreground",
+											children: "Phase"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "wwc:text-sm wwc:font-medium",
+											children: "Construction"
+										})]
+									}), /* @__PURE__ */ jsxs(Card, {
+										className: "wwc:p-3",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "wwc:text-xs wwc:text-muted-foreground",
+											children: "Priority"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "wwc:text-sm wwc:font-medium",
+											children: "High"
+										})]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "team",
+								className: "wwc:mt-4 wwc:space-y-4",
+								children: [/* @__PURE__ */ jsx(Card, {
+									className: "wwc:p-3",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:items-start wwc:gap-3",
+										children: [/* @__PURE__ */ jsx(Users, { className: "wwc:mt-0.5 wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+											className: "wwc:text-sm wwc:font-medium",
+											children: "Project Team"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "wwc:text-xs wwc:text-muted-foreground",
+											children: "12 members assigned"
+										})] })]
+									})
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "wwc:space-y-2",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "wwc:flex wwc:items-center wwc:justify-between wwc:rounded-md wwc:border wwc:p-2",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "wwc:flex wwc:items-center wwc:gap-2",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "wwc:h-8 wwc:w-8 wwc:rounded-full wwc:bg-primary/10 wwc:flex wwc:items-center wwc:justify-center wwc:text-xs wwc:font-medium",
+												children: "PM"
+											}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+												className: "wwc:text-sm wwc:font-medium",
+												children: "Project Manager"
+											}), /* @__PURE__ */ jsx("p", {
+												className: "wwc:text-xs wwc:text-muted-foreground",
+												children: "Ahmed Al-Rashid"
+											})] })]
+										})
+									}), /* @__PURE__ */ jsx("div", {
+										className: "wwc:flex wwc:items-center wwc:justify-between wwc:rounded-md wwc:border wwc:p-2",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "wwc:flex wwc:items-center wwc:gap-2",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "wwc:h-8 wwc:w-8 wwc:rounded-full wwc:bg-primary/10 wwc:flex wwc:items-center wwc:justify-center wwc:text-xs wwc:font-medium",
+												children: "LE"
+											}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+												className: "wwc:text-sm wwc:font-medium",
+												children: "Lead Engineer"
+											}), /* @__PURE__ */ jsx("p", {
+												className: "wwc:text-xs wwc:text-muted-foreground",
+												children: "Sarah Johnson"
+											})] })]
+										})
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "timeline",
+								className: "wwc:mt-4 wwc:space-y-4",
+								children: [/* @__PURE__ */ jsx(Card, {
+									className: "wwc:p-3",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:items-start wwc:gap-3",
+										children: [/* @__PURE__ */ jsx(Calendar, { className: "wwc:mt-0.5 wwc:h-4 wwc:w-4 wwc:text-muted-foreground" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+											className: "wwc:text-sm wwc:font-medium",
+											children: "Timeline"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "wwc:text-xs wwc:text-muted-foreground",
+											children: "Q1 2024 - Q4 2026"
+										})] })]
+									})
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "wwc:space-y-3",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "wwc:flex wwc:gap-3",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "wwc:flex wwc:flex-col wwc:items-center",
+												children: [/* @__PURE__ */ jsx("div", { className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-chart-1" }), /* @__PURE__ */ jsx("div", { className: "wwc:h-full wwc:w-px wwc:bg-border" })]
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "wwc:pb-4",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "wwc:text-sm wwc:font-medium",
+													children: "Design Phase"
+												}), /* @__PURE__ */ jsx("p", {
+													className: "wwc:text-xs wwc:text-muted-foreground",
+													children: "Completed - Q1 2024"
+												})]
+											})]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "wwc:flex wwc:gap-3",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "wwc:flex wwc:flex-col wwc:items-center",
+												children: [/* @__PURE__ */ jsx("div", { className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-primary" }), /* @__PURE__ */ jsx("div", { className: "wwc:h-full wwc:w-px wwc:bg-border" })]
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "wwc:pb-4",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "wwc:text-sm wwc:font-medium",
+													children: "Construction"
+												}), /* @__PURE__ */ jsx("p", {
+													className: "wwc:text-xs wwc:text-muted-foreground",
+													children: "In Progress - Q2 2024"
+												})]
+											})]
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "wwc:flex wwc:gap-3",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "wwc:flex wwc:flex-col wwc:items-center",
+												children: /* @__PURE__ */ jsx("div", { className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-muted" })
+											}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+												className: "wwc:text-sm wwc:font-medium",
+												children: "Completion"
+											}), /* @__PURE__ */ jsx("p", {
+												className: "wwc:text-xs wwc:text-muted-foreground",
+												children: "Target - Q4 2026"
+											})] })]
+										})
+									]
+								})]
+							})
+						]
+					})
+				]
+			})
+		})
+	})] });
+}
+function RightPanelContent({ selectedProject, onCloseDetails, onOpenProject }) {
+	const [displayedProject, setDisplayedProject] = useState(null);
+	const [isAnimating, setIsAnimating] = useState(false);
+	useEffect(() => {
+		if (selectedProject !== displayedProject) {
+			setIsAnimating(true);
+			const timer = setTimeout(() => {
+				setDisplayedProject(selectedProject);
+				setIsAnimating(false);
+			}, 150);
+			return () => clearTimeout(timer);
+		}
+	}, [selectedProject, displayedProject]);
+	if (!displayedProject) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: `wwc:h-full wwc:flex wwc:flex-col wwc:transition-opacity wwc:duration-150 wwc:ease-in-out ${isAnimating ? "wwc:opacity-0" : "wwc:opacity-100"}`,
+		children: /* @__PURE__ */ jsx(ProjectDetailsPanel, {
+			project: displayedProject,
+			onClose: onCloseDetails,
+			onOpenProject
+		})
+	});
+}
+/** Organization dashboard with project cards, interactive map, and KPI summary. */
+function OrgOverview({ selectedOrg, onOpenProject }) {
+	const [searchQuery, setSearchQuery] = useState("");
+	const [mapStyle, setMapStyle] = useState("mapbox://styles/mapbox/outdoors-v12");
+	const [selectedProjectForDetails, setSelectedProjectForDetails] = useState(null);
+	const mapContainerRef = useRef(null);
+	const mapRef = useRef(null);
+	const projects = getProjectsByOrg(selectedOrg.id);
+	const totalSafetyAlerts = projects.reduce((acc, p) => acc + (p.safetyAlerts || 0), 0);
+	const filteredProjects = projects.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()) || project.description?.toLowerCase().includes(searchQuery.toLowerCase()));
+	const mapCenter = [46.31, 24.585];
+	const markersRef = useRef([]);
+	const handleProjectSelect = (project) => {
+		setSelectedProjectForDetails(project);
+		if (project.coordinates && mapRef.current) mapRef.current.flyTo({
+			center: project.coordinates,
+			zoom: 15,
+			duration: 1500
+		});
+	};
+	const handleCloseDetails = () => {
+		setSelectedProjectForDetails(null);
+	};
+	const getShortName = (name) => {
+		return {
+			"Six Flags Qiddiya City": "Six Flags",
+			"Aquarabia Qiddiya City": "Aquarabia",
+			"Gaming & Esports District": "Gaming",
+			"Speed Park Track": "Speed Park",
+			"Prince Mohammed bin Salman Stadium": "Stadium",
+			"Qiddiya City Golf Course": "Golf",
+			"Mercedes-AMG World of Performance": "AMG",
+			"Performing Arts Centre": "Arts Centre",
+			"Playmaker Studios": "Studios"
+		}[name] || name.split(" ")[0];
+	};
+	const getCssVariable = (varName) => {
+		return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+	};
+	const getMarkerColor = (project) => {
+		switch (project.scheduleHealth) {
+			case "on-track": return getCssVariable("--chart-1") || "#22c55e";
+			case "at-risk": return getCssVariable("--chart-4") || "#f97316";
+			case "critical": return getCssVariable("--destructive") || "#ef4444";
+			default: return getCssVariable("--chart-1") || "#22c55e";
+		}
+	};
+	useEffect(() => {
+		if (!mapContainerRef.current || mapRef.current) return;
+		mapboxgl.accessToken = MAPBOX_TOKEN;
+		mapRef.current = new mapboxgl.Map({
+			container: mapContainerRef.current,
+			style: mapStyle,
+			center: mapCenter,
+			zoom: 6
+		});
+		mapRef.current.on("load", () => {
+			addMarkers(true);
+		});
+		return () => {
+			markersRef.current.forEach((marker) => marker.remove());
+			markersRef.current = [];
+			mapRef.current?.remove();
+			mapRef.current = null;
+		};
+	}, []);
+	const addMarkers = (animateToFit = false) => {
+		if (!mapRef.current) return;
+		markersRef.current.forEach((marker) => marker.remove());
+		markersRef.current = [];
+		const bounds = new mapboxgl.LngLatBounds();
+		projects.forEach((project) => {
+			if (!project.coordinates || !mapRef.current) return;
+			const shortName = getShortName(project.name);
+			const color = getMarkerColor(project);
+			bounds.extend(project.coordinates);
+			const el = document.createElement("div");
+			el.className = "custom-marker";
+			el.innerHTML = `
+        <div style="
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: ${color};
+          color: black;
+          padding: 6px 10px;
+          border-radius: 20px;
+          font-size: 12px;
+          font-weight: 600;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+          cursor: pointer;
+          white-space: nowrap;
+          transform: translate(-50%, -100%);
+          position: relative;
+        ">
+          <div style="
+            width: 8px;
+            height: 8px;
+            background: black;
+            border-radius: 50%;
+            flex-shrink: 0;
+          "></div>
+          ${shortName}
+          <div style="
+            position: absolute;
+            bottom: -6px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 6px solid transparent;
+            border-right: 6px solid transparent;
+            border-top: 6px solid ${color};
+          "></div>
+        </div>
+      `;
+			el.addEventListener("click", () => {
+				handleProjectSelect(project);
+			});
+			const marker = new mapboxgl.Marker({
+				element: el,
+				anchor: "bottom"
+			}).setLngLat(project.coordinates).addTo(mapRef.current);
+			markersRef.current.push(marker);
+		});
+		if (!bounds.isEmpty() && mapRef.current) {
+			if (animateToFit) setTimeout(() => {
+				mapRef.current?.fitBounds(bounds, {
+					padding: {
+						top: 60,
+						bottom: 40,
+						left: 40,
+						right: 40
+					},
+					maxZoom: 14,
+					duration: 2e3
+				});
+			}, 500);
+			else mapRef.current.fitBounds(bounds, {
+				padding: {
+					top: 60,
+					bottom: 40,
+					left: 40,
+					right: 40
+				},
+				maxZoom: 14
+			});
+		}
+	};
+	useEffect(() => {
+		if (mapRef.current) mapRef.current.setStyle(mapStyle);
+	}, [mapStyle]);
+	return /* @__PURE__ */ jsxs(PushPanelProvider, {
+		defaultOpen: true,
+		side: "left",
+		children: [/* @__PURE__ */ jsx(MapResizeHandler, { mapRef }), /* @__PURE__ */ jsxs(PushPanelContainer, {
+			className: "wwc:h-[calc(100vh-8rem)]",
+			children: [/* @__PURE__ */ jsxs(PushPanelMain, {
+				className: "wwc:relative wwc:flex",
+				children: [
+					/* @__PURE__ */ jsx(FloatingExpandButtonLeft, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex-1 wwc:flex wwc:flex-col wwc:min-w-0",
+						children: [/* @__PURE__ */ jsx(KPIBar, { groups: [
+							[{
+								value: projects.length,
+								label: "Projects"
+							}],
+							[
+								{
+									value: projects.filter((p) => p.scheduleHealth === "on-track").length,
+									label: "On Track",
+									dot: "success",
+									hideLabelBelow: "sm"
+								},
+								{
+									value: projects.filter((p) => p.scheduleHealth === "at-risk").length,
+									label: "At Risk",
+									dot: "warning",
+									hideLabelBelow: "sm"
+								},
+								{
+									value: projects.filter((p) => p.scheduleHealth === "critical").length,
+									label: "Critical",
+									dot: "danger",
+									hideLabelBelow: "sm"
+								}
+							],
+							[{
+								value: projects.reduce((acc, p) => acc + (p.workforceDensity || 0), 0).toLocaleString(),
+								label: "on-site today",
+								icon: Users,
+								hideLabelBelow: "md"
+							}],
+							[{
+								value: totalSafetyAlerts,
+								label: "alerts (24h)",
+								icon: AlertTriangle,
+								tone: totalSafetyAlerts > 0 ? "danger" : "default",
+								hideLabelBelow: "md"
+							}]
+						] }), /* @__PURE__ */ jsxs("div", {
+							className: "wwc:relative wwc:flex-1 wwc:min-h-0",
+							children: [/* @__PURE__ */ jsx("div", {
+								ref: mapContainerRef,
+								className: "wwc:h-full wwc:w-full"
+							}), /* @__PURE__ */ jsx(MapControls, {
+								mapRef,
+								mapStyle,
+								onMapStyleChange: setMapStyle
+							})]
+						})]
+					}),
+					selectedProjectForDetails && /* @__PURE__ */ jsx("div", {
+						className: "wwc:w-[320px] wwc:border-l wwc:bg-background wwc:flex wwc:flex-col wwc:shrink-0",
+						children: /* @__PURE__ */ jsx(RightPanelContent, {
+							selectedProject: selectedProjectForDetails,
+							onCloseDetails: handleCloseDetails,
+							onOpenProject
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsxs(PushPanel, {
+				width: 340,
+				className: "wwc:border-r",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:border-b",
+					children: [/* @__PURE__ */ jsxs(PushPanelHeader, {
+						className: "wwc:border-b-0",
+						children: [/* @__PURE__ */ jsxs(PushPanelHeaderTitle, { children: [/* @__PURE__ */ jsx(PushPanelTitle, { children: "Projects" }), /* @__PURE__ */ jsx(Badge, {
+							variant: "secondary",
+							className: "wwc:ml-2",
+							children: filteredProjects.length
+						})] }), /* @__PURE__ */ jsx(PushPanelHeaderActions, { children: /* @__PURE__ */ jsx(PushPanelTrigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								icon: true,
+								children: /* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:h-4 wwc:w-4" })
+							})
+						}) })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "wwc:px-4 wwc:pb-3",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "wwc:relative",
+							children: [/* @__PURE__ */ jsx(Search, { className: "wwc:absolute wwc:left-2.5 wwc:top-1/2 wwc:h-4 wwc:w-4 wwc:-translate-y-1/2 wwc:text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+								placeholder: "Search projects...",
+								value: searchQuery,
+								onChange: (e) => setSearchQuery(e.target.value),
+								className: "wwc:h-9 wwc:pl-9"
+							})]
+						})
+					})]
+				}), /* @__PURE__ */ jsx(PushPanelContent, {
+					className: "wwc:p-0",
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						className: "wwc:h-full",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "wwc:space-y-3 wwc:p-4",
+							children: filteredProjects.map((project) => /* @__PURE__ */ jsx(Card, {
+								className: `wwc:cursor-pointer wwc:overflow-hidden wwc:transition-all wwc:hover:shadow-md ${selectedProjectForDetails?.id === project.id ? "wwc:ring-2 wwc:ring-primary" : ""}`,
+								onClick: () => handleProjectSelect(project),
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "wwc:p-3 wwc:space-y-3",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:gap-3",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "wwc:h-16 wwc:w-24 wwc:shrink-0 wwc:overflow-hidden wwc:rounded-md wwc:bg-muted",
+											children: project.thumbnail ? /* @__PURE__ */ jsx("img", {
+												src: project.thumbnail,
+												alt: project.name,
+												className: "wwc:h-full wwc:w-full wwc:object-cover"
+											}) : /* @__PURE__ */ jsx("div", {
+												className: "wwc:flex wwc:h-full wwc:w-full wwc:items-center wwc:justify-center wwc:bg-muted",
+												children: /* @__PURE__ */ jsx("span", {
+													className: "wwc:text-lg wwc:font-bold wwc:text-muted-foreground",
+													children: project.name.charAt(0)
+												})
+											})
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "wwc:min-w-0 wwc:flex-1",
+											children: [/* @__PURE__ */ jsx("h3", {
+												className: "wwc:text-sm wwc:font-semibold wwc:text-foreground wwc:line-clamp-1",
+												children: project.name
+											}), project.description && /* @__PURE__ */ jsx("p", {
+												className: "wwc:mt-1 wwc:text-xs wwc:text-muted-foreground wwc:line-clamp-2",
+												children: project.description
+											})]
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "wwc:grid wwc:grid-cols-4 wwc:gap-1 wwc:pt-2 wwc:border-t",
+										children: [
+											/* @__PURE__ */ jsxs("div", {
+												className: "wwc:text-center",
+												children: [/* @__PURE__ */ jsxs("div", {
+													className: "wwc:flex wwc:items-center wwc:justify-center wwc:gap-0.5",
+													children: [/* @__PURE__ */ jsxs("span", {
+														className: `wwc:text-sm wwc:font-bold ${project.scheduleHealth === "on-track" ? "wwc:text-green-600" : project.scheduleHealth === "at-risk" ? "wwc:text-amber-600" : "wwc:text-red-600"}`,
+														children: [project.schedulePercent, "%"]
+													}), project.scheduleHealth === "on-track" ? /* @__PURE__ */ jsx(ArrowUp, { className: "wwc:h-3 wwc:w-3 wwc:text-green-600" }) : project.scheduleHealth === "at-risk" ? /* @__PURE__ */ jsx(Minus, { className: "wwc:h-3 wwc:w-3 wwc:text-amber-600" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "wwc:h-3 wwc:w-3 wwc:text-red-600" })]
+												}), /* @__PURE__ */ jsx("p", {
+													className: "wwc:text-[10px] wwc:text-muted-foreground",
+													children: "Schedule"
+												})]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "wwc:text-center",
+												children: [/* @__PURE__ */ jsxs("div", {
+													className: "wwc:flex wwc:items-center wwc:justify-center wwc:gap-0.5",
+													children: [/* @__PURE__ */ jsx("span", {
+														className: `wwc:text-sm wwc:font-bold ${project.costHealth === "on-track" ? "wwc:text-green-600" : project.costHealth === "at-risk" ? "wwc:text-amber-600" : "wwc:text-red-600"}`,
+														children: project.cpi?.toFixed(2) || "1.00"
+													}), project.costHealth === "on-track" ? /* @__PURE__ */ jsx(ArrowUp, { className: "wwc:h-3 wwc:w-3 wwc:text-green-600" }) : project.costHealth === "at-risk" ? /* @__PURE__ */ jsx(Minus, { className: "wwc:h-3 wwc:w-3 wwc:text-amber-600" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "wwc:h-3 wwc:w-3 wwc:text-red-600" })]
+												}), /* @__PURE__ */ jsx("p", {
+													className: "wwc:text-[10px] wwc:text-muted-foreground",
+													children: "CPI"
+												})]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "wwc:text-center",
+												children: [/* @__PURE__ */ jsxs("div", {
+													className: "wwc:flex wwc:items-center wwc:justify-center wwc:gap-0.5",
+													children: [/* @__PURE__ */ jsx("span", {
+														className: `wwc:text-sm wwc:font-bold ${project.safetyStatus === "safe" ? "wwc:text-green-600" : project.safetyStatus === "warning" ? "wwc:text-amber-600" : "wwc:text-red-600"}`,
+														children: project.ltiFreeDay || 0
+													}), project.safetyStatus === "safe" ? /* @__PURE__ */ jsx(ArrowUp, { className: "wwc:h-3 wwc:w-3 wwc:text-green-600" }) : project.safetyStatus === "warning" ? /* @__PURE__ */ jsx(Minus, { className: "wwc:h-3 wwc:w-3 wwc:text-amber-600" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "wwc:h-3 wwc:w-3 wwc:text-red-600" })]
+												}), /* @__PURE__ */ jsx("p", {
+													className: "wwc:text-[10px] wwc:text-muted-foreground",
+													children: "LTI-Free"
+												})]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "wwc:text-center",
+												children: [/* @__PURE__ */ jsx("div", {
+													className: "wwc:flex wwc:items-center wwc:justify-center",
+													children: /* @__PURE__ */ jsx("span", {
+														className: "wwc:text-sm wwc:font-bold wwc:text-foreground",
+														children: project.workforceDensity?.toLocaleString() || 0
+													})
+												}), /* @__PURE__ */ jsx("p", {
+													className: "wwc:text-[10px] wwc:text-muted-foreground",
+													children: "Workers"
+												})]
+											})
+										]
+									})]
+								})
+							}, project.id))
+						})
+					})
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { OrgOverview };
+
+//# sourceMappingURL=core-org-overview.mjs.map