@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-kanban/index.es.js

@@ -0,0 +1,326 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuItem as i, DropdownMenuTrigger as a } from "../dropdown-menu/index.es.js";
+import { Input as o } from "../input/index.es.js";
+import { ScrollArea as s } from "../scroll-area/index.es.js";
+import * as c from "react";
+import { GripVertical as l, MoreHorizontal as u, Plus as d, X as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/waka-kanban/index.tsx
+var h = {
+	low: "bg-gray-100 text-gray-700 border-gray-200",
+	medium: "bg-blue-100 text-blue-700 border-blue-200",
+	high: "bg-orange-100 text-orange-700 border-orange-200",
+	urgent: "bg-red-100 text-red-700 border-red-200"
+};
+function g({ card: n, columnId: r, onCardClick: i, onCardDelete: a, renderCard: o, onDragStart: s }) {
+	return o ? /* @__PURE__ */ p("div", {
+		draggable: !0,
+		onDragStart: (e) => s(e, n.id, r),
+		className: "cursor-grab active:cursor-grabbing",
+		children: o(n, r)
+	}) : /* @__PURE__ */ m("div", {
+		draggable: !0,
+		onDragStart: (e) => s(e, n.id, r),
+		onClick: () => i?.(n, r),
+		className: e("group bg-card border rounded-lg p-3 shadow-sm cursor-grab active:cursor-grabbing", "hover:border-primary/50 hover:shadow-md transition-all duration-200"),
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex-1 min-w-0",
+					children: [
+						n.labels && n.labels.length > 0 && /* @__PURE__ */ p("div", {
+							className: "flex flex-wrap gap-1 mb-2",
+							children: n.labels.map((e) => /* @__PURE__ */ p("span", {
+								className: "px-1.5 py-0.5 text-[10px] font-medium rounded",
+								style: {
+									backgroundColor: e.color + "20",
+									color: e.color
+								},
+								children: e.name
+							}, e.id))
+						}),
+						/* @__PURE__ */ p("h4", {
+							className: "font-medium text-sm truncate",
+							children: n.title
+						}),
+						n.description && /* @__PURE__ */ p("p", {
+							className: "text-xs text-muted-foreground mt-1 line-clamp-2",
+							children: n.description
+						})
+					]
+				}), /* @__PURE__ */ p(l, { className: "h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" })]
+			}),
+			(n.priority || n.assignee || n.dueDate) && /* @__PURE__ */ m("div", {
+				className: "flex items-center justify-between mt-3 pt-2 border-t",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2",
+					children: [n.priority && /* @__PURE__ */ p("span", {
+						className: e("px-1.5 py-0.5 text-[10px] font-medium rounded border", h[n.priority]),
+						children: n.priority
+					}), n.dueDate && /* @__PURE__ */ p("span", {
+						className: "text-[10px] text-muted-foreground",
+						children: n.dueDate.toLocaleDateString()
+					})]
+				}), n.assignee && /* @__PURE__ */ p("div", {
+					className: "h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center text-[10px] font-medium",
+					title: n.assignee.name,
+					children: n.assignee.avatar ? /* @__PURE__ */ p("img", {
+						src: n.assignee.avatar,
+						alt: n.assignee.name,
+						className: "h-full w-full rounded-full object-cover"
+					}) : n.assignee.name.charAt(0).toUpperCase()
+				})]
+			}),
+			a && /* @__PURE__ */ p(t, {
+				variant: "ghost",
+				size: "icon",
+				className: "absolute top-1 right-1 h-6 w-6 opacity-0 group-hover:opacity-100",
+				onClick: (e) => {
+					e.stopPropagation(), a(n.id, r);
+				},
+				children: /* @__PURE__ */ p(f, { className: "h-3 w-3" })
+			})
+		]
+	});
+}
+function _({ column: l, onCardMove: f, onCardAdd: h, onCardDelete: _, onCardClick: v, onColumnDelete: y, allowAddCard: b, allowColumnDrag: x, renderCard: S, draggedCard: C, setDraggedCard: w, onColumnDragStart: T }) {
+	let [E, D] = c.useState(!1), [O, k] = c.useState(""), [A, j] = c.useState(null), M = (e, t, n) => {
+		w({
+			id: t,
+			fromColumnId: n
+		}), e.dataTransfer.effectAllowed = "move";
+	}, N = (e, t) => {
+		e.preventDefault(), C && j(t);
+	}, P = () => {
+		j(null);
+	}, F = (e, t) => {
+		e.preventDefault(), C && f && f(C.id, C.fromColumnId, l.id, t), w(null), j(null);
+	}, I = (e) => {
+		e.preventDefault(), C && f && f(C.id, C.fromColumnId, l.id, l.cards.length), w(null), j(null);
+	}, L = () => {
+		O.trim() && h && (h(l.id, { title: O.trim() }), k(""), D(!1));
+	}, R = l.limit !== void 0 && l.cards.length >= l.limit;
+	return /* @__PURE__ */ m("div", {
+		className: "flex flex-col bg-muted/50 rounded-lg min-w-[280px] max-w-[320px] h-full",
+		onDragOver: (e) => e.preventDefault(),
+		onDrop: I,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: e("flex items-center justify-between p-3 border-b", x && "cursor-grab active:cursor-grabbing"),
+				draggable: x,
+				onDragStart: (e) => T(e, l.id),
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2",
+					children: [
+						l.color && /* @__PURE__ */ p("div", {
+							className: "w-3 h-3 rounded-full",
+							style: { backgroundColor: l.color }
+						}),
+						/* @__PURE__ */ p("h3", {
+							className: "font-semibold text-sm",
+							children: l.title
+						}),
+						/* @__PURE__ */ m("span", {
+							className: "text-xs text-muted-foreground bg-background px-1.5 py-0.5 rounded",
+							children: [l.cards.length, l.limit && `/${l.limit}`]
+						})
+					]
+				}), y && /* @__PURE__ */ m(n, { children: [/* @__PURE__ */ p(a, {
+					asChild: !0,
+					children: /* @__PURE__ */ p(t, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-6 w-6",
+						children: /* @__PURE__ */ p(u, { className: "h-4 w-4" })
+					})
+				}), /* @__PURE__ */ p(r, {
+					align: "end",
+					children: /* @__PURE__ */ p(i, {
+						className: "text-destructive",
+						onClick: () => y(l.id),
+						children: "Supprimer la colonne"
+					})
+				})] })]
+			}),
+			/* @__PURE__ */ p(s, {
+				className: "flex-1 p-2",
+				children: /* @__PURE__ */ m("div", {
+					className: "space-y-2",
+					children: [l.cards.map((e, t) => /* @__PURE__ */ m("div", {
+						onDragOver: (e) => N(e, t),
+						onDragLeave: P,
+						onDrop: (e) => F(e, t),
+						children: [A === t && C && /* @__PURE__ */ p("div", { className: "h-1 bg-primary rounded mb-2" }), /* @__PURE__ */ p(g, {
+							card: e,
+							columnId: l.id,
+							onCardClick: v,
+							onCardDelete: _,
+							renderCard: S,
+							onDragStart: M
+						})]
+					}, e.id)), C && A === null && /* @__PURE__ */ p("div", {
+						className: "h-20 border-2 border-dashed border-primary/30 rounded-lg",
+						onDragOver: (e) => {
+							e.preventDefault(), j(l.cards.length);
+						}
+					})]
+				})
+			}),
+			b && /* @__PURE__ */ p("div", {
+				className: "p-2 border-t",
+				children: E ? /* @__PURE__ */ m("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ p(o, {
+						value: O,
+						onChange: (e) => k(e.target.value),
+						placeholder: "Titre de la carte...",
+						autoFocus: !0,
+						onKeyDown: (e) => {
+							e.key === "Enter" && L(), e.key === "Escape" && D(!1);
+						}
+					}), /* @__PURE__ */ m("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ p(t, {
+							size: "sm",
+							onClick: L,
+							disabled: !O.trim(),
+							children: "Ajouter"
+						}), /* @__PURE__ */ p(t, {
+							size: "sm",
+							variant: "ghost",
+							onClick: () => D(!1),
+							children: "Annuler"
+						})]
+					})]
+				}) : /* @__PURE__ */ m(t, {
+					variant: "ghost",
+					className: "w-full justify-start text-muted-foreground",
+					onClick: () => D(!0),
+					disabled: R,
+					children: [/* @__PURE__ */ p(d, { className: "h-4 w-4 mr-1" }), "Ajouter une carte"]
+				})
+			})
+		]
+	});
+}
+function v({ columns: n, onCardMove: r, onColumnMove: i, onCardAdd: a, onCardDelete: s, onCardClick: l, onColumnAdd: u, onColumnDelete: f, allowAddCard: h = !0, allowAddColumn: g = !1, allowColumnDrag: v = !1, renderCard: y, height: b = "100%", className: x }) {
+	let [S, C] = c.useState(null), [w, T] = c.useState(null), [E, D] = c.useState(!1), [O, k] = c.useState(""), A = (e, t) => {
+		v && (T(t), e.dataTransfer.effectAllowed = "move");
+	}, j = (e, t) => {
+		e.preventDefault(), w && i && i(w, t), T(null);
+	}, M = () => {
+		O.trim() && u && (u({ title: O.trim() }), k(""), D(!1));
+	};
+	return /* @__PURE__ */ m("div", {
+		className: e("flex gap-4 overflow-x-auto p-4", x),
+		style: { height: b },
+		children: [n.map((e, t) => /* @__PURE__ */ p("div", {
+			onDragOver: (e) => e.preventDefault(),
+			onDrop: (e) => j(e, t),
+			children: /* @__PURE__ */ p(_, {
+				column: e,
+				onCardMove: r,
+				onCardAdd: a,
+				onCardDelete: s,
+				onCardClick: l,
+				onColumnDelete: f,
+				allowAddCard: h,
+				allowColumnDrag: v,
+				renderCard: y,
+				draggedCard: S,
+				setDraggedCard: C,
+				onColumnDragStart: A
+			})
+		}, e.id)), g && /* @__PURE__ */ p("div", {
+			className: "min-w-[280px]",
+			children: E ? /* @__PURE__ */ m("div", {
+				className: "bg-muted/50 rounded-lg p-3 space-y-2",
+				children: [/* @__PURE__ */ p(o, {
+					value: O,
+					onChange: (e) => k(e.target.value),
+					placeholder: "Titre de la colonne...",
+					autoFocus: !0,
+					onKeyDown: (e) => {
+						e.key === "Enter" && M(), e.key === "Escape" && D(!1);
+					}
+				}), /* @__PURE__ */ m("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ p(t, {
+						size: "sm",
+						onClick: M,
+						disabled: !O.trim(),
+						children: "Ajouter"
+					}), /* @__PURE__ */ p(t, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => D(!1),
+						children: "Annuler"
+					})]
+				})]
+			}) : /* @__PURE__ */ m(t, {
+				variant: "outline",
+				className: "w-full h-auto py-8 border-dashed",
+				onClick: () => D(!0),
+				children: [/* @__PURE__ */ p(d, { className: "h-4 w-4 mr-2" }), "Ajouter une colonne"]
+			})
+		})]
+	});
+}
+function y(e) {
+	let [t, n] = c.useState(e);
+	return {
+		columns: t,
+		setColumns: n,
+		moveCard: (e, t, r, i) => {
+			n((n) => {
+				let a = [...n], o = a.find((e) => e.id === t);
+				if (!o) return n;
+				let s = o.cards.findIndex((t) => t.id === e);
+				if (s === -1) return n;
+				let [c] = o.cards.splice(s, 1), l = a.find((e) => e.id === r);
+				return l ? (l.cards.splice(i, 0, c), a) : n;
+			});
+		},
+		moveColumn: (e, t) => {
+			n((n) => {
+				let r = [...n], i = r.findIndex((t) => t.id === e);
+				if (i === -1) return n;
+				let [a] = r.splice(i, 1);
+				return r.splice(t, 0, a), r;
+			});
+		},
+		addCard: (e, t) => {
+			n((n) => n.map((n) => n.id === e ? {
+				...n,
+				cards: [...n.cards, {
+					id: `card-${Date.now()}`,
+					title: t.title || "Nouvelle carte",
+					...t
+				}]
+			} : n));
+		},
+		deleteCard: (e, t) => {
+			n((n) => n.map((n) => n.id === t ? {
+				...n,
+				cards: n.cards.filter((t) => t.id !== e)
+			} : n));
+		},
+		addColumn: (e) => {
+			n((t) => [...t, {
+				id: `column-${Date.now()}`,
+				title: e.title || "Nouvelle colonne",
+				cards: [],
+				...e
+			}]);
+		},
+		deleteColumn: (e) => {
+			n((t) => t.filter((t) => t.id !== e));
+		}
+	};
+}
+//#endregion
+export { v as WakaKanban, v as default, y as useKanban };

package/dist/components/waka-kpi-dashboard/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={default:{accent:`text-muted-foreground`,bg:`bg-muted`,sparkline:`#71717a`,targetBg:`bg-muted`},primary:{accent:`text-primary`,bg:`bg-primary/10`,sparkline:`hsl(var(--primary))`,targetBg:`bg-primary/20`},success:{accent:`text-green-600`,bg:`bg-green-100 dark:bg-green-900/30`,sparkline:`#16a34a`,targetBg:`bg-green-200 dark:bg-green-800/50`},warning:{accent:`text-yellow-600`,bg:`bg-yellow-100 dark:bg-yellow-900/30`,sparkline:`#ca8a04`,targetBg:`bg-yellow-200 dark:bg-yellow-800/50`},destructive:{accent:`text-destructive`,bg:`bg-destructive/10`,sparkline:`hsl(var(--destructive))`,targetBg:`bg-destructive/20`},blue:{accent:`text-blue-600`,bg:`bg-blue-100 dark:bg-blue-900/30`,sparkline:`#2563eb`,targetBg:`bg-blue-200 dark:bg-blue-800/50`},purple:{accent:`text-purple-600`,bg:`bg-purple-100 dark:bg-purple-900/30`,sparkline:`#9333ea`,targetBg:`bg-purple-200 dark:bg-purple-800/50`}},o={"1x1":{colSpan:`col-span-1`,rowSpan:`row-span-1`,minHeight:`min-h-[140px]`},"2x1":{colSpan:`col-span-2`,rowSpan:`row-span-1`,minHeight:`min-h-[140px]`},"1x2":{colSpan:`col-span-1`,rowSpan:`row-span-2`,minHeight:`min-h-[296px]`},"2x2":{colSpan:`col-span-2`,rowSpan:`row-span-2`,minHeight:`min-h-[296px]`}};function s({data:e,color:n=`#71717a`,width:r=100,height:a=32,strokeWidth:o=1.5,showArea:s=!0,className:c}){if(!e||e.length<2)return null;let l=e.map(e=>e.value),u=Math.min(...l),d=Math.max(...l)-u||1,f=r-4,p=a-4,m=e.map((t,n)=>({x:2+n/(e.length-1)*f,y:2+p-(t.value-u)/d*p})),h=m.map((e,t)=>t===0?`M ${e.x} ${e.y}`:`L ${e.x} ${e.y}`).join(` `),g=`${h} L ${m[m.length-1].x} ${a-2} L 2 ${a-2} Z`;return(0,i.jsxs)(`svg`,{width:r,height:a,viewBox:`0 0 ${r} ${a}`,className:t.cn(`overflow-visible`,c),children:[s&&(0,i.jsx)(`path`,{d:g,fill:n,fillOpacity:.1}),(0,i.jsx)(`path`,{d:h,fill:`none`,stroke:n,strokeWidth:o,strokeLinecap:`round`,strokeLinejoin:`round`}),(0,i.jsx)(`circle`,{cx:m[m.length-1].x,cy:m[m.length-1].y,r:2.5,fill:n})]})}function c({direction:e,value:n,invert:a}){let o=a?e===`down`:e===`up`,s=a?e===`up`:e===`down`,c=e===`up`?r.TrendingUp:e===`down`?r.TrendingDown:r.Minus;return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1 text-xs font-medium`,o&&`text-green-600`,s&&`text-destructive`,e===`neutral`&&`text-muted-foreground`),children:[(0,i.jsx)(c,{className:`h-3.5 w-3.5`}),n&&(0,i.jsx)(`span`,{children:n})]})}function l({current:e,target:n,label:o,color:s}){let c=Math.min(e/n*100,100),l=a[s];return(0,i.jsxs)(`div`,{className:`mt-3 space-y-1`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between text-xs`,children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground flex items-center gap-1`,children:[(0,i.jsx)(r.Target,{className:`h-3 w-3`}),o||`Target`]}),(0,i.jsxs)(`span`,{className:t.cn(`font-medium`,l.accent),children:[c.toFixed(0),`%`]})]}),(0,i.jsx)(`div`,{className:t.cn(`h-1.5 rounded-full overflow-hidden`,l.bg),children:(0,i.jsx)(`div`,{className:t.cn(`h-full rounded-full transition-all duration-500`,c>=100?`bg-green-500`:l.targetBg.replace(`bg-`,`bg-`)),style:{width:`${c}%`,backgroundColor:c>=100?void 0:l.sparkline}})})]})}function u({size:e}){let t=e===`2x2`||e===`1x2`;return(0,i.jsxs)(`div`,{className:`animate-pulse p-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between mb-3`,children:[(0,i.jsx)(`div`,{className:`h-4 w-24 bg-muted rounded`}),(0,i.jsx)(`div`,{className:`h-6 w-6 bg-muted rounded`})]}),(0,i.jsx)(`div`,{className:`h-8 w-20 bg-muted rounded mb-2`}),(0,i.jsx)(`div`,{className:`h-3 w-16 bg-muted rounded mb-3`}),t&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`h-16 w-full bg-muted rounded mb-3`}),(0,i.jsx)(`div`,{className:`h-2 w-full bg-muted rounded`})]}),!t&&(0,i.jsx)(`div`,{className:`h-8 w-full bg-muted rounded`})]})}function d({kpi:e,onRefresh:d,onClick:f,draggable:p,onDragStart:m}){let[h,g]=n.useState(!1),_=e.size||`1x1`,v=e.color||`default`,y=o[_],b=a[v],x=async t=>{t.stopPropagation(),d&&!h&&(g(!0),await d(e.id),setTimeout(()=>g(!1),500))};if(e.loading)return(0,i.jsx)(`div`,{className:t.cn(`rounded-lg border bg-card shadow-sm`,y.colSpan,y.rowSpan,y.minHeight),children:(0,i.jsx)(u,{size:_})});let S=_===`2x2`||_===`1x2`,C=_===`2x1`||_===`2x2`;return(0,i.jsxs)(`div`,{className:t.cn(`group relative rounded-lg border bg-card shadow-sm p-4 transition-all duration-200`,`hover:shadow-md hover:border-primary/30`,f&&`cursor-pointer`,p&&`cursor-grab active:cursor-grabbing`,y.colSpan,y.rowSpan,y.minHeight),onClick:()=>f?.(e),draggable:p,onDragStart:t=>m?.(t,e.id),children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between mb-2`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 flex-1 min-w-0`,children:[e.icon&&(0,i.jsx)(`div`,{className:t.cn(`h-8 w-8 rounded-lg flex items-center justify-center flex-shrink-0`,b.bg),children:(0,i.jsx)(`div`,{className:t.cn(`h-4 w-4`,b.accent),children:e.icon})}),(0,i.jsx)(`h3`,{className:`text-sm font-medium text-muted-foreground truncate`,children:e.title})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`,children:[p&&(0,i.jsx)(r.GripVertical,{className:`h-4 w-4 text-muted-foreground`}),d&&(0,i.jsx)(`button`,{onClick:x,className:`p-1 rounded hover:bg-muted transition-colors`,disabled:h,children:(0,i.jsx)(r.RefreshCw,{className:t.cn(`h-3.5 w-3.5 text-muted-foreground`,h&&`animate-spin`)})}),(0,i.jsx)(`button`,{className:`p-1 rounded hover:bg-muted transition-colors`,children:(0,i.jsx)(r.MoreHorizontal,{className:`h-3.5 w-3.5 text-muted-foreground`})})]})]}),(0,i.jsxs)(`div`,{className:`flex items-baseline gap-2 mb-1`,children:[(0,i.jsx)(`span`,{className:t.cn(`font-bold tracking-tight`,S?`text-4xl`:`text-2xl`),children:e.value}),e.unit&&(0,i.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:e.unit})]}),e.trend&&(0,i.jsx)(`div`,{className:`mb-3`,children:(0,i.jsx)(c,{direction:e.trend,value:e.trendValue})}),e.sparklineData&&e.sparklineData.length>1&&(0,i.jsx)(`div`,{className:t.cn(`mt-auto`,S?`h-20`:`h-8`),children:(0,i.jsx)(s,{data:e.sparklineData,color:b.sparkline,width:C?280:120,height:S?80:32,strokeWidth:S?2:1.5,showArea:S})}),e.target&&(0,i.jsx)(l,{current:typeof e.value==`number`?e.value:parseFloat(String(e.value))||0,target:e.target.value,label:e.target.label,color:v}),e.lastUpdated&&(0,i.jsxs)(`div`,{className:`mt-2 text-[10px] text-muted-foreground`,children:[`Updated `,e.lastUpdated.toLocaleTimeString()]})]})}function f({kpis:e,columns:r=4,gap:a=`md`,draggable:o=!1,onReorder:s,onRefresh:c,onCardClick:l,loading:f=!1,renderCard:p,className:m}){let[h,g]=n.useState(e),[_,v]=n.useState(null),[y,b]=n.useState(null);n.useEffect(()=>{g(e)},[e]);let x={sm:`gap-2`,md:`gap-4`,lg:`gap-6`},S={2:`grid-cols-2`,3:`grid-cols-3`,4:`grid-cols-4`,6:`grid-cols-6`},C=(e,t)=>{v(t),e.dataTransfer.effectAllowed=`move`},w=(e,t)=>{e.preventDefault(),_&&_!==t&&b(t)},T=()=>{b(null)},E=(e,t)=>{if(e.preventDefault(),_&&_!==t){let e=[...h],n=e.findIndex(e=>e.id===_),r=e.findIndex(e=>e.id===t);if(n!==-1&&r!==-1){let[t]=e.splice(n,1);e.splice(r,0,t),g(e),s?.(e)}}v(null),b(null)},D=()=>{v(null),b(null)};return f?(0,i.jsx)(`div`,{className:t.cn(`grid auto-rows-min`,S[r],x[a],m),children:Array.from({length:8}).map((e,t)=>(0,i.jsx)(`div`,{className:`rounded-lg border bg-card shadow-sm col-span-1 row-span-1 min-h-[140px]`,children:(0,i.jsx)(u,{size:`1x1`})},t))}):(0,i.jsx)(`div`,{className:t.cn(`grid auto-rows-min`,S[r],x[a],m),children:h.map(e=>(0,i.jsx)(`div`,{onDragOver:t=>w(t,e.id),onDragLeave:T,onDrop:t=>E(t,e.id),onDragEnd:D,className:t.cn(`relative`,y===e.id&&`ring-2 ring-primary ring-offset-2 rounded-lg`,_===e.id&&`opacity-50`),children:p?p(e):(0,i.jsx)(d,{kpi:e,onRefresh:c,onClick:l,draggable:o,onDragStart:C})},e.id))})}function p(e={}){let{initialKPIs:t=[],refreshInterval:r,onRefresh:i}=e,[a,o]=n.useState(t),[s,c]=n.useState(!1),[l,u]=n.useState(new Set);return n.useEffect(()=>{if(!r||!i)return;let e=setInterval(async()=>{let e=await Promise.all(a.map(async e=>await i(e.id)||e));o(e)},r);return()=>clearInterval(e)},[r,i,a]),{kpis:a,setKPIs:o,loading:s,refreshKPI:n.useCallback(async e=>{if(i){u(t=>new Set(t).add(e)),o(t=>t.map(t=>t.id===e?{...t,loading:!0}:t));try{let t=await i(e);t&&o(n=>n.map(n=>n.id===e?{...t,loading:!1,lastUpdated:new Date}:n))}finally{u(t=>{let n=new Set(t);return n.delete(e),n}),o(t=>t.map(t=>t.id===e?{...t,loading:!1}:t))}}},[i]),refreshAll:n.useCallback(async()=>{if(i){c(!0);try{let e=await Promise.all(a.map(async e=>{let t=await i(e.id);return t?{...t,lastUpdated:new Date}:e}));o(e)}finally{c(!1)}}},[i,a]),updateKPI:n.useCallback((e,t)=>{o(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]),addKPI:n.useCallback(e=>{o(t=>[...t,e])},[]),removeKPI:n.useCallback(e=>{o(t=>t.filter(t=>t.id!==e))},[]),reorderKPIs:n.useCallback(e=>{o(e)},[]),calculateTrend:n.useCallback((e,t)=>{if(t===0)return{direction:`neutral`,value:`0%`};let n=(e-t)/t*100;return{direction:n>0?`up`:n<0?`down`:`neutral`,value:`${n>=0?`+`:``}${n.toFixed(1)}%`}},[]),isRefreshing:n.useCallback(e=>l.has(e),[l])}}exports.KPICard=d,exports.WakaKPIDashboard=f,exports.default=f,exports.useKPIDashboard=p;