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

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

@@ -0,0 +1,904 @@
+import { Badge } from "../badge.mjs";
+import { Button } from "../button.mjs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card.mjs";
+import { Banner } from "../banner.mjs";
+import { Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table.mjs";
+import { AlertTriangle, ArrowDown, ArrowUp, CheckCircle2, Clock, Loader2, Minus, UserX } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import ReactECharts from "echarts-for-react";
+//#region src/pages/core-analytics-overview.tsx
+function KPICard({ title, value, unit, subtitle, trend, trendLabel, icon: Icon, status }) {
+	return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, {
+		className: "wwc:p-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:items-start wwc:justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: title
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-baseline wwc:gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: `wwc:text-2xl wwc:font-bold ${status ? {
+								success: "wwc:text-green-600",
+								warning: "wwc:text-amber-600",
+								danger: "wwc:text-red-600"
+							}[status] : "wwc:text-foreground"}`,
+							children: value
+						}), unit && /* @__PURE__ */ jsx("span", {
+							className: "wwc:text-sm wwc:text-muted-foreground",
+							children: unit
+						})]
+					}),
+					subtitle && /* @__PURE__ */ jsx("p", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: subtitle
+					}),
+					(trend || trendLabel) && /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-1 wwc:pt-1",
+						children: [
+							trend === "up" && /* @__PURE__ */ jsx(ArrowUp, { className: "wwc:h-3 wwc:w-3 wwc:text-green-600" }),
+							trend === "down" && /* @__PURE__ */ jsx(ArrowDown, { className: "wwc:h-3 wwc:w-3 wwc:text-red-600" }),
+							trend === "stable" && /* @__PURE__ */ jsx(Minus, { className: "wwc:h-3 wwc:w-3 wwc:text-muted-foreground" }),
+							trendLabel && /* @__PURE__ */ jsx("span", {
+								className: `wwc:text-xs ${trend === "up" ? "wwc:text-green-600" : trend === "down" ? "wwc:text-red-600" : "wwc:text-muted-foreground"}`,
+								children: trendLabel
+							})
+						]
+					})
+				]
+			}), Icon && /* @__PURE__ */ jsx("div", {
+				className: "wwc:rounded-lg wwc:bg-muted wwc:p-2",
+				children: /* @__PURE__ */ jsx(Icon, { className: "wwc:h-4 wwc:w-4 wwc:text-muted-foreground" })
+			})]
+		})
+	}) });
+}
+const CONTRACTORS = [
+	{
+		name: "Sinohydro",
+		resolutionRate: 12,
+		open: 12,
+		overdue: 5,
+		total: 14,
+		avgResolutionHours: 96,
+		breakdown: [
+			{
+				category: "Salary",
+				count: 9
+			},
+			{
+				category: "Safety",
+				count: 2
+			},
+			{
+				category: "Living Conditions",
+				count: 2
+			},
+			{
+				category: "Other",
+				count: 1
+			}
+		]
+	},
+	{
+		name: "Samsung C&T",
+		resolutionRate: 45,
+		open: 6,
+		overdue: 2,
+		total: 11,
+		avgResolutionHours: 48,
+		breakdown: [
+			{
+				category: "Safety",
+				count: 4
+			},
+			{
+				category: "Salary",
+				count: 3
+			},
+			{
+				category: "Transport",
+				count: 2
+			},
+			{
+				category: "Other",
+				count: 2
+			}
+		]
+	},
+	{
+		name: "Al-Rashid",
+		resolutionRate: 78,
+		open: 3,
+		overdue: 1,
+		total: 14,
+		avgResolutionHours: 24,
+		breakdown: [
+			{
+				category: "Living Conditions",
+				count: 5
+			},
+			{
+				category: "Salary",
+				count: 4
+			},
+			{
+				category: "Safety",
+				count: 3
+			},
+			{
+				category: "Other",
+				count: 2
+			}
+		]
+	},
+	{
+		name: "Nesma",
+		resolutionRate: 85,
+		open: 2,
+		overdue: 0,
+		total: 13,
+		avgResolutionHours: 18,
+		breakdown: [
+			{
+				category: "Salary",
+				count: 5
+			},
+			{
+				category: "Transport",
+				count: 4
+			},
+			{
+				category: "Living Conditions",
+				count: 3
+			},
+			{
+				category: "Other",
+				count: 1
+			}
+		]
+	},
+	{
+		name: "Consolidated",
+		resolutionRate: 92,
+		open: 1,
+		overdue: 0,
+		total: 12,
+		avgResolutionHours: 12,
+		breakdown: [
+			{
+				category: "Safety",
+				count: 4
+			},
+			{
+				category: "Salary",
+				count: 3
+			},
+			{
+				category: "Living Conditions",
+				count: 3
+			},
+			{
+				category: "Other",
+				count: 2
+			}
+		]
+	},
+	{
+		name: "El Seif",
+		resolutionRate: 95,
+		open: 1,
+		overdue: 0,
+		total: 18,
+		avgResolutionHours: 8,
+		breakdown: [
+			{
+				category: "Living Conditions",
+				count: 6
+			},
+			{
+				category: "Safety",
+				count: 5
+			},
+			{
+				category: "Salary",
+				count: 4
+			},
+			{
+				category: "Other",
+				count: 3
+			}
+		]
+	}
+];
+const SORTED_CONTRACTORS = [...CONTRACTORS].sort((a, b) => a.resolutionRate - b.resolutionRate);
+const CATEGORY_TOTALS = CONTRACTORS.reduce((acc, c) => {
+	for (const b of c.breakdown) acc[b.category] = (acc[b.category] || 0) + b.count;
+	return acc;
+}, {});
+const CATEGORY_DATA = Object.entries(CATEGORY_TOTALS).sort((a, b) => b[1] - a[1]);
+const RECENT_COMPLAINTS = [
+	{
+		id: "WC-000041",
+		worker: "Md. Fazlul",
+		category: "Salary",
+		severity: "high",
+		status: "New",
+		sla: "overdue",
+		owner: "Unassigned",
+		priority: 1
+	},
+	{
+		id: "WC-000038",
+		worker: "Ahmed Raza",
+		category: "Safety",
+		severity: "high",
+		status: "Assigned",
+		sla: "overdue",
+		owner: "Sinohydro",
+		priority: 2
+	},
+	{
+		id: "WC-000045",
+		worker: "Ali Hussain",
+		category: "Accommodation",
+		severity: "high",
+		status: "New",
+		sla: "due-soon",
+		owner: "Unassigned",
+		priority: 3
+	},
+	{
+		id: "WC-000032",
+		worker: "Kamal Hossain",
+		category: "Salary",
+		severity: "medium",
+		status: "New",
+		sla: "due-soon",
+		owner: "Unassigned",
+		priority: 4
+	},
+	{
+		id: "WC-000044",
+		worker: "Raju Miah",
+		category: "Food",
+		severity: "medium",
+		status: "Investigating",
+		sla: "on-track",
+		owner: "Samsung C&T",
+		priority: 5
+	},
+	{
+		id: "WC-000039",
+		worker: "Noor Islam",
+		category: "Transport",
+		severity: "low",
+		status: "Assigned",
+		sla: "on-track",
+		owner: "Nesma",
+		priority: 6
+	},
+	{
+		id: "WC-000047",
+		worker: "Jamal Uddin",
+		category: "Salary",
+		severity: "high",
+		status: "Waiting",
+		sla: "due-soon",
+		owner: "Al-Rashid",
+		priority: 7
+	}
+];
+function getResolutionColor(rate) {
+	if (rate >= 80) return "#22c55e";
+	if (rate >= 40) return "#eab308";
+	return "#ef4444";
+}
+/**
+* @deprecated Preview/demo prototype — renders built-in sample data and mock handlers. Not a
+* supported production import: compose your page from the widgets this template uses, wired to your
+* own data (see the CoreAnalyticsOverview template docs in Storybook). Slated for removal from the public API in a
+* future major.
+*/
+function AnalyticsOverview() {
+	const [bannerDismissed, setBannerDismissed] = useState(false);
+	const [selectedName, setSelectedName] = useState(null);
+	const toggleFilter = (name) => {
+		setSelectedName((prev) => prev === name ? null : name);
+	};
+	const selectedContractor = selectedName ? CONTRACTORS.find((c) => c.name === selectedName) ?? null : null;
+	const dim = (name) => selectedName && selectedName !== name ? .15 : 1;
+	const performanceOption = useMemo(() => ({
+		tooltip: {
+			trigger: "axis",
+			axisPointer: { type: "shadow" },
+			formatter: (params) => {
+				const c = CONTRACTORS[params[0].dataIndex];
+				return `<b>${c.name}</b><br/>Resolution: ${c.resolutionRate}%<br/>Open: ${c.open}<br/>Overdue: ${c.overdue}`;
+			}
+		},
+		legend: {
+			data: [
+				{
+					name: "Low (<40%)",
+					itemStyle: { color: "#ef4444" }
+				},
+				{
+					name: "Medium (40-80%)",
+					itemStyle: { color: "#eab308" }
+				},
+				{
+					name: "High (>80%)",
+					itemStyle: { color: "#22c55e" }
+				}
+			],
+			bottom: 0,
+			left: "center",
+			itemWidth: 10,
+			itemHeight: 10,
+			textStyle: { fontSize: 11 }
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "14%",
+			top: "4%",
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			data: CONTRACTORS.map((c) => c.name),
+			axisLabel: {
+				rotate: 45,
+				interval: 0
+			}
+		},
+		yAxis: {
+			type: "value",
+			max: 100,
+			splitLine: { lineStyle: { type: "dashed" } }
+		},
+		series: [
+			{
+				name: "Low (<40%)",
+				type: "bar",
+				stack: "rate",
+				data: CONTRACTORS.map((c) => ({
+					value: c.resolutionRate < 40 ? c.resolutionRate : 0,
+					itemStyle: {
+						color: "#ef4444",
+						opacity: dim(c.name)
+					}
+				})),
+				barMaxWidth: 48,
+				label: {
+					show: true,
+					position: "inside",
+					formatter: (params) => params.value > 0 ? `${params.value}%` : "",
+					fontSize: 11,
+					fontWeight: "bold",
+					color: "#fff"
+				}
+			},
+			{
+				name: "Medium (40-80%)",
+				type: "bar",
+				stack: "rate",
+				data: CONTRACTORS.map((c) => ({
+					value: c.resolutionRate >= 40 && c.resolutionRate < 80 ? c.resolutionRate : 0,
+					itemStyle: {
+						color: "#eab308",
+						opacity: dim(c.name)
+					}
+				})),
+				barMaxWidth: 48,
+				label: {
+					show: true,
+					position: "inside",
+					formatter: (params) => params.value > 0 ? `${params.value}%` : "",
+					fontSize: 11,
+					fontWeight: "bold",
+					color: "#fff"
+				}
+			},
+			{
+				name: "High (>80%)",
+				type: "bar",
+				stack: "rate",
+				data: CONTRACTORS.map((c) => ({
+					value: c.resolutionRate >= 80 ? c.resolutionRate : 0,
+					itemStyle: {
+						color: "#22c55e",
+						opacity: dim(c.name)
+					}
+				})),
+				barMaxWidth: 48,
+				label: {
+					show: true,
+					position: "inside",
+					formatter: (params) => params.value > 0 ? `${params.value}%` : "",
+					fontSize: 11,
+					fontWeight: "bold",
+					color: "#fff"
+				}
+			}
+		]
+	}), [selectedName]);
+	const workloadOption = useMemo(() => ({
+		tooltip: {
+			trigger: "axis",
+			axisPointer: { type: "shadow" }
+		},
+		legend: {
+			data: ["Open", "Overdue"],
+			bottom: 0,
+			left: "center",
+			itemWidth: 10,
+			itemHeight: 10,
+			textStyle: { fontSize: 11 }
+		},
+		grid: {
+			left: "3%",
+			right: "4%",
+			bottom: "14%",
+			top: "4%",
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			data: CONTRACTORS.map((c) => c.name),
+			axisLabel: {
+				rotate: 45,
+				interval: 0
+			}
+		},
+		yAxis: {
+			type: "value",
+			splitLine: { lineStyle: { type: "dashed" } }
+		},
+		series: [{
+			name: "Open",
+			type: "bar",
+			stack: "total",
+			data: CONTRACTORS.map((c) => ({
+				value: c.open - c.overdue,
+				itemStyle: {
+					color: "#3b82f6",
+					opacity: dim(c.name)
+				}
+			})),
+			barMaxWidth: 48
+		}, {
+			name: "Overdue",
+			type: "bar",
+			stack: "total",
+			data: CONTRACTORS.map((c) => ({
+				value: c.overdue,
+				itemStyle: {
+					color: "#ef4444",
+					opacity: dim(c.name)
+				}
+			})),
+			barMaxWidth: 48
+		}]
+	}), [selectedName]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:space-y-8",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "wwc:flex wwc:items-center wwc:justify-between",
+			children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+				className: "wwc:text-3xl wwc:font-bold",
+				children: "Overview"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "wwc:text-muted-foreground wwc:mt-2",
+				children: "Operations overview with KPI cards, smart insights, and contractor performance."
+			})] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "wwc:border wwc:border-border wwc:rounded-xl wwc:overflow-hidden wwc:bg-background",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:p-6 wwc:space-y-4",
+				children: [
+					!bannerDismissed && /* @__PURE__ */ jsx(Banner, {
+						variant: "danger",
+						title: "System is at risk",
+						items: [
+							"12 complaints need action",
+							"5 have breached SLA",
+							"8 complaints are unassigned"
+						],
+						action: {
+							label: "Take Action",
+							onClick: () => {}
+						},
+						onDismiss: () => setBannerDismissed(true)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:grid wwc:grid-cols-6 wwc:gap-4",
+						children: [
+							/* @__PURE__ */ jsx(KPICard, {
+								title: "Needs Action",
+								value: 12,
+								trend: "down",
+								trendLabel: "+3 weekly",
+								icon: AlertTriangle,
+								status: "warning"
+							}),
+							/* @__PURE__ */ jsx(KPICard, {
+								title: "Overdue",
+								value: 5,
+								trend: "down",
+								trendLabel: "+2 daily",
+								icon: Clock,
+								status: "danger"
+							}),
+							/* @__PURE__ */ jsx(KPICard, {
+								title: "High Severity",
+								value: 3,
+								trend: "up",
+								trendLabel: "-1 weekly",
+								icon: AlertTriangle,
+								status: "danger"
+							}),
+							/* @__PURE__ */ jsx(KPICard, {
+								title: "Unassigned",
+								value: 8,
+								trend: "down",
+								trendLabel: "+4 weekly",
+								icon: UserX,
+								status: "danger"
+							}),
+							/* @__PURE__ */ jsx(KPICard, {
+								title: "In Progress",
+								value: 24,
+								trend: "up",
+								trendLabel: "-3 weekly",
+								icon: Loader2
+							}),
+							/* @__PURE__ */ jsx(KPICard, {
+								title: "Resolved",
+								value: 18,
+								trend: "up",
+								trendLabel: "+5 weekly",
+								icon: CheckCircle2,
+								status: "success"
+							})
+						]
+					}),
+					selectedName ? /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-[13px] wwc:text-muted-foreground",
+							children: "Filtered by:"
+						}), /* @__PURE__ */ jsxs(Badge, {
+							variant: "secondary",
+							className: "wwc:gap-1",
+							children: [selectedName, /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setSelectedName(null),
+								className: "wwc:ml-0.5 wwc:hover:text-foreground",
+								children: "×"
+							})]
+						})]
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:grid wwc:grid-cols-2 wwc:gap-4",
+						children: [/* @__PURE__ */ jsxs(Card, {
+							className: "wwc:shadow-none",
+							children: [/* @__PURE__ */ jsxs(CardHeader, {
+								className: "wwc:pb-2",
+								children: [/* @__PURE__ */ jsx(CardTitle, {
+									className: "wwc:text-base",
+									children: "Contractor Performance"
+								}), /* @__PURE__ */ jsx(CardDescription, { children: "Resolution rate by contractor. Click a bar to see breakdown." })]
+							}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ReactECharts, {
+								option: performanceOption,
+								style: { height: 320 },
+								onEvents: { click: (params) => {
+									if (params.dataIndex !== void 0) toggleFilter(CONTRACTORS[params.dataIndex].name);
+								} }
+							}) })]
+						}), /* @__PURE__ */ jsxs(Card, {
+							className: "wwc:shadow-none",
+							children: [/* @__PURE__ */ jsxs(CardHeader, {
+								className: "wwc:pb-2",
+								children: [/* @__PURE__ */ jsx(CardTitle, {
+									className: "wwc:text-base",
+									children: "Contractor Workload"
+								}), /* @__PURE__ */ jsx(CardDescription, { children: "Open complaints with overdue portion highlighted." })]
+							}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ReactECharts, {
+								option: workloadOption,
+								style: { height: 320 },
+								onEvents: { click: (params) => {
+									if (params.dataIndex !== void 0) toggleFilter(CONTRACTORS[params.dataIndex].name);
+								} }
+							}) })]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:grid wwc:grid-cols-2 wwc:gap-4",
+						children: [/* @__PURE__ */ jsxs(Card, {
+							className: "wwc:shadow-none",
+							children: [/* @__PURE__ */ jsxs(CardHeader, {
+								className: "wwc:pb-2",
+								children: [/* @__PURE__ */ jsx(CardTitle, {
+									className: "wwc:text-base",
+									children: "Contractor Details"
+								}), /* @__PURE__ */ jsx(CardDescription, { children: "Sorted by worst performance. Click a row to expand." })]
+							}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("table", {
+								className: "wwc:w-full wwc:text-[13px]",
+								children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+									className: "wwc:border-b wwc:border-border",
+									children: [
+										/* @__PURE__ */ jsx("th", {
+											className: "wwc:text-left wwc:py-2 wwc:pr-3 wwc:font-semibold wwc:text-foreground",
+											children: "Contractor"
+										}),
+										/* @__PURE__ */ jsx("th", {
+											className: "wwc:text-center wwc:py-2 wwc:px-2 wwc:font-semibold wwc:text-foreground",
+											children: "Total"
+										}),
+										/* @__PURE__ */ jsx("th", {
+											className: "wwc:text-center wwc:py-2 wwc:px-2 wwc:font-semibold wwc:text-foreground",
+											children: "Open"
+										}),
+										/* @__PURE__ */ jsx("th", {
+											className: "wwc:text-center wwc:py-2 wwc:px-2 wwc:font-semibold wwc:text-foreground",
+											children: "Overdue"
+										}),
+										/* @__PURE__ */ jsx("th", {
+											className: "wwc:text-center wwc:py-2 wwc:px-2 wwc:font-semibold wwc:text-foreground",
+											children: "Rate"
+										}),
+										/* @__PURE__ */ jsx("th", {
+											className: "wwc:text-center wwc:py-2 wwc:px-2 wwc:font-semibold wwc:text-foreground",
+											children: "Avg Time"
+										})
+									]
+								}) }), /* @__PURE__ */ jsx("tbody", { children: SORTED_CONTRACTORS.map((c) => {
+									const isExpanded = selectedName === c.name || !selectedName && false;
+									const topCat = c.breakdown.reduce((a, b) => a.count > b.count ? a : b);
+									const overduePercent = Math.round(c.overdue / c.total * 100);
+									return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", {
+										className: `wwc:border-b wwc:border-border wwc:cursor-pointer wwc:hover:bg-muted/50 wwc:transition-colors ${selectedName && selectedName !== c.name ? "wwc:opacity-30" : ""}`,
+										onClick: () => toggleFilter(c.name),
+										children: [
+											/* @__PURE__ */ jsx("td", {
+												className: "wwc:py-2.5 wwc:pr-3",
+												children: /* @__PURE__ */ jsxs("div", {
+													className: "wwc:flex wwc:items-center wwc:gap-2",
+													children: [/* @__PURE__ */ jsx("span", { className: `wwc:h-2 wwc:w-2 wwc:rounded-full ${c.resolutionRate < 40 ? "wwc:bg-red-500" : c.resolutionRate < 80 ? "wwc:bg-yellow-500" : "wwc:bg-green-500"}` }), /* @__PURE__ */ jsx("span", {
+														className: "wwc:font-medium",
+														children: c.name
+													})]
+												})
+											}),
+											/* @__PURE__ */ jsx("td", {
+												className: "wwc:text-center wwc:py-2.5 wwc:px-2",
+												children: c.total
+											}),
+											/* @__PURE__ */ jsx("td", {
+												className: "wwc:text-center wwc:py-2.5 wwc:px-2",
+												children: /* @__PURE__ */ jsx("span", {
+													className: c.open > 5 ? "wwc:text-red-600 wwc:font-semibold" : "",
+													children: c.open
+												})
+											}),
+											/* @__PURE__ */ jsx("td", {
+												className: "wwc:text-center wwc:py-2.5 wwc:px-2",
+												children: /* @__PURE__ */ jsx("span", {
+													className: c.overdue > 0 ? "wwc:text-red-600 wwc:font-semibold" : "wwc:text-muted-foreground",
+													children: c.overdue
+												})
+											}),
+											/* @__PURE__ */ jsx("td", {
+												className: "wwc:text-center wwc:py-2.5 wwc:px-2",
+												children: /* @__PURE__ */ jsxs("span", {
+													className: `wwc:font-semibold ${c.resolutionRate < 40 ? "wwc:text-red-600" : c.resolutionRate < 80 ? "wwc:text-amber-600" : "wwc:text-green-600"}`,
+													children: [c.resolutionRate, "%"]
+												})
+											}),
+											/* @__PURE__ */ jsxs("td", {
+												className: "wwc:text-center wwc:py-2.5 wwc:px-2 wwc:text-muted-foreground",
+												children: [c.avgResolutionHours, "h"]
+											})
+										]
+									}, c.name), isExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+										colSpan: 6,
+										className: "wwc:p-3 wwc:bg-muted/30",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "wwc:space-y-2",
+											children: [/* @__PURE__ */ jsx(Banner, {
+												variant: c.resolutionRate < 40 ? "danger" : "warning",
+												title: `${topCat.category} accounts for ${Math.round(topCat.count / c.total * 100)}% of complaints`,
+												description: `${c.open} open, ${c.overdue} overdue (${overduePercent}%). Avg resolution: ${c.avgResolutionHours}h.`
+											}), /* @__PURE__ */ jsx("div", {
+												className: "wwc:grid wwc:grid-cols-2 wwc:gap-3",
+												children: c.breakdown.map((b) => /* @__PURE__ */ jsxs("div", {
+													className: "wwc:flex wwc:items-center wwc:justify-between wwc:text-xs",
+													children: [/* @__PURE__ */ jsx("span", {
+														className: "wwc:text-muted-foreground",
+														children: b.category
+													}), /* @__PURE__ */ jsxs("div", {
+														className: "wwc:flex wwc:items-center wwc:gap-2",
+														children: [/* @__PURE__ */ jsx("div", {
+															className: "wwc:w-20 wwc:h-1.5 wwc:bg-muted wwc:rounded-full wwc:overflow-hidden",
+															children: /* @__PURE__ */ jsx("div", {
+																className: "wwc:h-full wwc:rounded-full",
+																style: {
+																	width: `${b.count / c.total * 100}%`,
+																	backgroundColor: getResolutionColor(c.resolutionRate)
+																}
+															})
+														}), /* @__PURE__ */ jsx("span", {
+															className: "wwc:font-medium wwc:w-4 wwc:text-right",
+															children: b.count
+														})]
+													})]
+												}, b.category))
+											})]
+										})
+									}) }, `${c.name}-detail`)] });
+								}) })]
+							}) })]
+						}), /* @__PURE__ */ jsxs(Card, {
+							className: "wwc:shadow-none",
+							children: [/* @__PURE__ */ jsxs(CardHeader, {
+								className: "wwc:pb-2",
+								children: [/* @__PURE__ */ jsx(CardTitle, {
+									className: "wwc:text-base",
+									children: selectedContractor ? `${selectedContractor.name} — Complaint Types` : "Complaint Types"
+								}), /* @__PURE__ */ jsx(CardDescription, { children: selectedContractor ? `Category breakdown for ${selectedContractor.name}.` : "Distribution across all contractors." })]
+							}), /* @__PURE__ */ jsx(CardContent, { children: (() => {
+								const pieData = selectedContractor ? selectedContractor.breakdown.sort((a, b) => b.count - a.count) : CATEGORY_DATA.map(([name, value]) => ({
+									category: name,
+									count: value
+								}));
+								const topCat = pieData[0];
+								const totalForPie = pieData.reduce((s, d) => s + d.count, 0);
+								const colors = [
+									"#ef4444",
+									"#3b82f6",
+									"#f59e0b",
+									"#8b5cf6",
+									"#22c55e",
+									"#64748b"
+								];
+								return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Banner, {
+									variant: "warning",
+									title: `${"category" in topCat ? topCat.category : ""} is the #1 complaint type`,
+									description: `${topCat.count} of ${totalForPie} complaints (${Math.round(topCat.count / totalForPie * 100)}%).`,
+									className: "wwc:mb-4"
+								}), /* @__PURE__ */ jsx(ReactECharts, {
+									option: {
+										tooltip: {
+											trigger: "item",
+											formatter: "{b}: {c} ({d}%)"
+										},
+										legend: {
+											bottom: 0,
+											left: "center",
+											itemWidth: 10,
+											itemHeight: 10,
+											textStyle: { fontSize: 11 }
+										},
+										series: [{
+											type: "pie",
+											radius: ["40%", "70%"],
+											center: ["50%", "42%"],
+											avoidLabelOverlap: true,
+											itemStyle: {
+												borderRadius: 4,
+												borderColor: "#fff",
+												borderWidth: 2
+											},
+											label: {
+												show: true,
+												formatter: "{b}\n{c}",
+												fontSize: 11
+											},
+											data: pieData.map((d, i) => ({
+												name: "category" in d ? d.category : "",
+												value: d.count,
+												itemStyle: { color: colors[i % colors.length] }
+											}))
+										}]
+									},
+									style: { height: 320 }
+								})] });
+							})() })]
+						})]
+					}),
+					/* @__PURE__ */ jsxs(Card, {
+						className: "wwc:shadow-none",
+						children: [/* @__PURE__ */ jsx(CardHeader, {
+							className: "wwc:pb-2",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:items-center wwc:justify-between",
+								children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(CardTitle, {
+									className: "wwc:text-base",
+									children: "Recent & Important"
+								}), /* @__PURE__ */ jsx(CardDescription, { children: "Top complaints prioritized by urgency." })] }), /* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									size: "sm",
+									children: "View All"
+								})]
+							})
+						}), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Table$1, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+							/* @__PURE__ */ jsx(TableHead, {
+								className: "wwc:w-[100px]",
+								children: "ID"
+							}),
+							/* @__PURE__ */ jsx(TableHead, { children: "Worker" }),
+							/* @__PURE__ */ jsx(TableHead, { children: "Category" }),
+							/* @__PURE__ */ jsx(TableHead, { children: "Severity" }),
+							/* @__PURE__ */ jsx(TableHead, { children: "Status" }),
+							/* @__PURE__ */ jsx(TableHead, { children: "SLA" }),
+							/* @__PURE__ */ jsx(TableHead, { children: "Owner" })
+						] }) }), /* @__PURE__ */ jsx(TableBody, { children: RECENT_COMPLAINTS.map((c) => /* @__PURE__ */ jsxs(TableRow, {
+							className: "wwc:cursor-pointer wwc:hover:bg-muted/50",
+							children: [
+								/* @__PURE__ */ jsxs(TableCell, {
+									className: "wwc:font-mono wwc:text-xs wwc:text-muted-foreground",
+									children: ["#", c.id]
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "wwc:font-medium",
+									children: c.worker
+								}),
+								/* @__PURE__ */ jsx(TableCell, { children: c.category }),
+								/* @__PURE__ */ jsxs(TableCell, { children: [
+									c.severity === "high" && /* @__PURE__ */ jsxs("span", {
+										className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:text-xs wwc:font-medium wwc:text-red-600",
+										children: [/* @__PURE__ */ jsx("span", { className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-red-500" }), "High"]
+									}),
+									c.severity === "medium" && /* @__PURE__ */ jsxs("span", {
+										className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:text-xs wwc:font-medium wwc:text-amber-600",
+										children: [/* @__PURE__ */ jsx("span", { className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-amber-500" }), "Medium"]
+									}),
+									c.severity === "low" && /* @__PURE__ */ jsxs("span", {
+										className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+										children: [/* @__PURE__ */ jsx("span", { className: "wwc:h-2 wwc:w-2 wwc:rounded-full wwc:bg-zinc-400" }), "Low"]
+									})
+								] }),
+								/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, {
+									variant: c.status === "New" ? "default" : c.status === "Resolved" ? "outline" : "secondary",
+									children: c.status
+								}) }),
+								/* @__PURE__ */ jsxs(TableCell, { children: [
+									c.sla === "overdue" && /* @__PURE__ */ jsx("span", {
+										className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:text-xs wwc:font-semibold wwc:text-red-600",
+										children: "⏰ Overdue"
+									}),
+									c.sla === "due-soon" && /* @__PURE__ */ jsx("span", {
+										className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:text-xs wwc:font-medium wwc:text-amber-600",
+										children: "⚠️ Due Soon"
+									}),
+									c.sla === "on-track" && /* @__PURE__ */ jsx("span", {
+										className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:text-xs wwc:text-green-600",
+										children: "✅ On Track"
+									})
+								] }),
+								/* @__PURE__ */ jsx(TableCell, { children: c.owner === "Unassigned" ? /* @__PURE__ */ jsx("span", {
+									className: "wwc:text-xs wwc:font-medium wwc:text-red-500",
+									children: "Unassigned"
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "wwc:text-xs",
+									children: c.owner
+								}) })
+							]
+						}, c.id)) })] }) })]
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { AnalyticsOverview };
+
+//# sourceMappingURL=core-analytics-overview.mjs.map