@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/blocks/incident-manager/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../../components/avatar/index.cjs.js`),r=require(`../../components/badge/index.cjs.js`),i=require(`../../components/button/index.cjs.js`),a=require(`../../components/card/index.cjs.js`),o=require(`../../components/input/index.cjs.js`),s=require(`../../components/select/index.cjs.js`),c=require(`../../components/scroll-area/index.cjs.js`);let l=require(`react`);l=e.__toESM(l);let u=require(`lucide-react`),d=require(`react/jsx-runtime`);var f={critical:{label:`Critical`,color:`text-red-500`,bgColor:`bg-red-500`},high:{label:`High`,color:`text-orange-500`,bgColor:`bg-orange-500`},medium:{label:`Medium`,color:`text-yellow-500`,bgColor:`bg-yellow-500`},low:{label:`Low`,color:`text-blue-500`,bgColor:`bg-blue-500`}},p={triggered:{label:`Triggered`,color:`text-red-500`,icon:u.AlertCircle},acknowledged:{label:`Acknowledged`,color:`text-orange-500`,icon:u.Bell},investigating:{label:`Investigating`,color:`text-yellow-500`,icon:u.Search},identified:{label:`Identified`,color:`text-blue-500`,icon:u.Activity},resolved:{label:`Resolved`,color:`text-green-500`,icon:u.CheckCircle2},closed:{label:`Closed`,color:`text-gray-500`,icon:u.XCircle}};function m(e,t){let n=(t||new Date).getTime()-e.getTime(),r=Math.floor(n/6e4),i=Math.floor(r/60),a=Math.floor(i/24);return a>0?`${a}d ${i%24}h`:i>0?`${i}h ${r%60}m`:`${r}m`}function h(e){return e.toLocaleTimeString(`fr-FR`,{hour:`2-digit`,minute:`2-digit`})}function g({incident:e,onAcknowledge:o,onResolve:s,onSelect:c}){let l=f[e.severity],h=p[e.status],g=h.icon,_=![`resolved`,`closed`].includes(e.status);return(0,d.jsx)(a.Card,{className:t.cn(`cursor-pointer transition-all hover:shadow-md`,e.severity===`critical`&&_&&`border-red-500/50 bg-red-500/5`,e.severity===`high`&&_&&`border-orange-500/30`),onClick:c,children:(0,d.jsx)(a.CardContent,{className:`p-4`,children:(0,d.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,d.jsx)(`div`,{className:t.cn(`p-2 rounded-lg shrink-0`,`${l.bgColor}/10`),children:(0,d.jsx)(u.AlertTriangle,{className:t.cn(`h-5 w-5`,l.color)})}),(0,d.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,d.jsx)(r.Badge,{className:t.cn(`text-white text-xs`,l.bgColor),children:l.label}),(0,d.jsxs)(r.Badge,{variant:`outline`,className:t.cn(`text-xs`,h.color),children:[(0,d.jsx)(g,{className:`h-3 w-3 mr-1`}),h.label]}),e.service&&(0,d.jsx)(r.Badge,{variant:`secondary`,className:`text-xs`,children:e.service})]}),(0,d.jsx)(`h4`,{className:`font-semibold mt-2 truncate`,children:e.title}),e.description&&(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground mt-1 line-clamp-2`,children:e.description}),(0,d.jsxs)(`div`,{className:`flex items-center gap-4 mt-3 text-xs text-muted-foreground`,children:[(0,d.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(u.Clock,{className:`h-3 w-3`}),m(e.createdAt,e.resolvedAt)]}),e.affectedUsers!==void 0&&(0,d.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(u.Users,{className:`h-3 w-3`}),e.affectedUsers,` affected`]}),(0,d.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(u.MessageSquare,{className:`h-3 w-3`}),e.events.length]})]}),e.responders.length>0&&(0,d.jsx)(`div`,{className:`flex items-center gap-2 mt-3`,children:(0,d.jsxs)(`div`,{className:`flex -space-x-2`,children:[e.responders.slice(0,3).map(e=>(0,d.jsxs)(n.Avatar,{className:`h-6 w-6 border-2 border-background`,children:[(0,d.jsx)(n.AvatarImage,{src:e.avatar}),(0,d.jsx)(n.AvatarFallback,{className:`text-xs`,children:e.name.slice(0,2).toUpperCase()})]},e.id)),e.responders.length>3&&(0,d.jsxs)(`div`,{className:`h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background`,children:[`+`,e.responders.length-3]})]})})]}),_&&(0,d.jsxs)(`div`,{className:`flex flex-col gap-1 shrink-0`,children:[e.status===`triggered`&&o&&(0,d.jsx)(i.Button,{size:`sm`,variant:`outline`,className:`h-7 text-xs`,onClick:e=>{e.stopPropagation(),o()},children:`Ack`}),e.status!==`triggered`&&e.status!==`resolved`&&s&&(0,d.jsx)(i.Button,{size:`sm`,variant:`outline`,className:`h-7 text-xs text-green-500`,onClick:e=>{e.stopPropagation(),s()},children:`Resolve`})]})]})})})}function _({incidents:e}){let t=e.filter(e=>![`resolved`,`closed`].includes(e.status)),n=t.filter(e=>e.severity===`critical`),r=l.useMemo(()=>{let t=e.filter(e=>e.resolvedAt);if(t.length===0)return 0;let n=t.reduce((e,t)=>e+(t.resolvedAt.getTime()-t.createdAt.getTime()),0);return Math.round(n/t.length/6e4)},[e]);return(0,d.jsxs)(`div`,{className:`grid grid-cols-4 gap-4`,children:[(0,d.jsx)(a.Card,{children:(0,d.jsxs)(a.CardContent,{className:`p-4 text-center`,children:[(0,d.jsx)(`div`,{className:`text-3xl font-bold text-red-500`,children:t.length}),(0,d.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Active Incidents`})]})}),(0,d.jsx)(a.Card,{children:(0,d.jsxs)(a.CardContent,{className:`p-4 text-center`,children:[(0,d.jsx)(`div`,{className:`text-3xl font-bold text-orange-500`,children:n.length}),(0,d.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Critical`})]})}),(0,d.jsx)(a.Card,{children:(0,d.jsxs)(a.CardContent,{className:`p-4 text-center`,children:[(0,d.jsxs)(`div`,{className:`text-3xl font-bold`,children:[r,`m`]}),(0,d.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Avg MTTR`})]})}),(0,d.jsx)(a.Card,{children:(0,d.jsxs)(a.CardContent,{className:`p-4 text-center`,children:[(0,d.jsx)(`div`,{className:`text-3xl font-bold text-green-500`,children:e.filter(e=>e.status===`resolved`).length}),(0,d.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:`Resolved Today`})]})})]})}function v({incidents:e,onCreateIncident:m,onAcknowledge:v,onResolve:y,onEscalate:b,onAssign:x,className:S}){let[C,w]=l.useState(``),[T,E]=l.useState(`all`),[D,O]=l.useState(`active`),[k,A]=l.useState(null),j=l.useMemo(()=>e.filter(e=>!(C&&!e.title.toLowerCase().includes(C.toLowerCase())||T!==`all`&&e.severity!==T||D===`active`&&[`resolved`,`closed`].includes(e.status)||D===`resolved`&&![`resolved`,`closed`].includes(e.status))).sort((e,t)=>{let n={critical:0,high:1,medium:2,low:3},r=n[e.severity]-n[t.severity];return r===0?t.createdAt.getTime()-e.createdAt.getTime():r}),[e,C,T,D]);return(0,d.jsxs)(`div`,{className:t.cn(`flex flex-col gap-6`,S),children:[(0,d.jsx)(_,{incidents:e}),(0,d.jsxs)(`div`,{className:`flex gap-6`,children:[(0,d.jsxs)(`div`,{className:`flex-1 space-y-4`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,d.jsxs)(`div`,{className:`relative flex-1 max-w-sm`,children:[(0,d.jsx)(u.Search,{className:`absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground`}),(0,d.jsx)(o.Input,{placeholder:`Search incidents...`,value:C,onChange:e=>w(e.target.value),className:`pl-9`})]}),(0,d.jsxs)(s.Select,{value:T,onValueChange:e=>E(e),children:[(0,d.jsx)(s.SelectTrigger,{className:`w-32`,children:(0,d.jsx)(s.SelectValue,{placeholder:`Severity`})}),(0,d.jsxs)(s.SelectContent,{children:[(0,d.jsx)(s.SelectItem,{value:`all`,children:`All Severity`}),(0,d.jsx)(s.SelectItem,{value:`critical`,children:`Critical`}),(0,d.jsx)(s.SelectItem,{value:`high`,children:`High`}),(0,d.jsx)(s.SelectItem,{value:`medium`,children:`Medium`}),(0,d.jsx)(s.SelectItem,{value:`low`,children:`Low`})]})]}),(0,d.jsxs)(s.Select,{value:D,onValueChange:e=>O(e),children:[(0,d.jsx)(s.SelectTrigger,{className:`w-32`,children:(0,d.jsx)(s.SelectValue,{placeholder:`Status`})}),(0,d.jsxs)(s.SelectContent,{children:[(0,d.jsx)(s.SelectItem,{value:`active`,children:`Active`}),(0,d.jsx)(s.SelectItem,{value:`resolved`,children:`Resolved`}),(0,d.jsx)(s.SelectItem,{value:`all`,children:`All`})]})]}),m&&(0,d.jsxs)(i.Button,{onClick:m,children:[(0,d.jsx)(u.Plus,{className:`h-4 w-4 mr-1`}),`Create Incident`]})]}),(0,d.jsx)(c.ScrollArea,{className:`h-[600px]`,children:(0,d.jsx)(`div`,{className:`space-y-3 pr-4`,children:j.length===0?(0,d.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-48 text-muted-foreground`,children:[(0,d.jsx)(u.Shield,{className:`h-12 w-12 mb-4 text-green-500`}),(0,d.jsx)(`p`,{className:`text-lg font-medium`,children:`No incidents`}),(0,d.jsx)(`p`,{className:`text-sm`,children:`All systems are operational`})]}):j.map(e=>(0,d.jsx)(g,{incident:e,onAcknowledge:v?()=>v(e):void 0,onResolve:y?()=>y(e):void 0,onSelect:()=>A(e)},e.id))})})]}),k&&(0,d.jsxs)(a.Card,{className:`w-96 shrink-0`,children:[(0,d.jsxs)(a.CardHeader,{className:`pb-3`,children:[(0,d.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,d.jsx)(r.Badge,{className:t.cn(`text-white`,f[k.severity].bgColor),children:f[k.severity].label}),(0,d.jsx)(i.Button,{variant:`ghost`,size:`sm`,onClick:()=>A(null),children:(0,d.jsx)(u.XCircle,{className:`h-4 w-4`})})]}),(0,d.jsx)(a.CardTitle,{className:`mt-2`,children:k.title}),(0,d.jsxs)(`div`,{className:`flex items-center gap-2 mt-2`,children:[(0,d.jsx)(r.Badge,{variant:`outline`,className:p[k.status].color,children:p[k.status].label}),k.service&&(0,d.jsx)(r.Badge,{variant:`secondary`,children:k.service})]})]}),(0,d.jsxs)(a.CardContent,{className:`space-y-4`,children:[k.description&&(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:k.description}),k.impact&&(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground mb-1`,children:`Impact`}),(0,d.jsx)(`p`,{className:`text-sm`,children:k.impact})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground mb-2`,children:`Timeline`}),(0,d.jsx)(`div`,{className:`space-y-2`,children:k.events.slice(0,5).map(e=>(0,d.jsxs)(`div`,{className:`flex items-start gap-2 text-xs`,children:[(0,d.jsx)(`span`,{className:`text-muted-foreground shrink-0`,children:h(e.timestamp)}),(0,d.jsx)(`span`,{children:e.content})]},e.id))})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground mb-2`,children:`Responders`}),(0,d.jsx)(`div`,{className:`space-y-2`,children:k.responders.map(e=>(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsxs)(n.Avatar,{className:`h-6 w-6`,children:[(0,d.jsx)(n.AvatarImage,{src:e.avatar}),(0,d.jsx)(n.AvatarFallback,{className:`text-xs`,children:e.name.slice(0,2).toUpperCase()})]}),(0,d.jsx)(`span`,{className:`text-sm`,children:e.name}),(0,d.jsx)(r.Badge,{variant:`outline`,className:`text-xs ml-auto`,children:e.role})]},e.id))})]}),(0,d.jsxs)(`div`,{className:`flex flex-col gap-2 pt-2 border-t`,children:[k.slackChannel&&(0,d.jsxs)(i.Button,{variant:`outline`,size:`sm`,className:`justify-start`,children:[(0,d.jsx)(u.MessageSquare,{className:`h-4 w-4 mr-2`}),`Join #`,k.slackChannel]}),k.runbookUrl&&(0,d.jsxs)(i.Button,{variant:`outline`,size:`sm`,className:`justify-start`,children:[(0,d.jsx)(u.ExternalLink,{className:`h-4 w-4 mr-2`}),`View Runbook`]}),b&&![`resolved`,`closed`].includes(k.status)&&(0,d.jsxs)(i.Button,{variant:`outline`,size:`sm`,className:`justify-start text-orange-500`,onClick:()=>b(k),children:[(0,d.jsx)(u.Phone,{className:`h-4 w-4 mr-2`}),`Escalate`]})]})]})]})]})]})}var y=[{id:`1`,title:`Database connection pool exhausted`,description:`Production database is experiencing connection pool exhaustion, causing request timeouts`,severity:`critical`,status:`investigating`,service:`api-gateway`,createdAt:new Date(Date.now()-45*6e4),acknowledgedAt:new Date(Date.now()-40*6e4),impact:`50% of API requests failing with 504 errors`,affectedUsers:12500,slackChannel:`incident-db-001`,runbookUrl:`https://runbooks.example.com/db-pool`,responders:[{id:`1`,name:`John Doe`,role:`Incident Commander`,status:`engaged`},{id:`2`,name:`Jane Smith`,role:`DBA`,status:`engaged`}],events:[{id:`e1`,type:`status_change`,timestamp:new Date(Date.now()-45*6e4),content:`Incident triggered by alerting system`},{id:`e2`,type:`assignment`,timestamp:new Date(Date.now()-43*6e4),content:`John Doe assigned as IC`,user:`System`},{id:`e3`,type:`status_change`,timestamp:new Date(Date.now()-40*6e4),content:`Incident acknowledged`,user:`John Doe`},{id:`e4`,type:`comment`,timestamp:new Date(Date.now()-35*6e4),content:`Investigating connection pool settings`,user:`Jane Smith`},{id:`e5`,type:`status_change`,timestamp:new Date(Date.now()-30*6e4),content:`Status changed to investigating`,user:`John Doe`}]},{id:`2`,title:`High latency on payment service`,description:`Payment processing latency increased to >2s, above SLA threshold`,severity:`high`,status:`acknowledged`,service:`payment-service`,createdAt:new Date(Date.now()-20*6e4),acknowledgedAt:new Date(Date.now()-15*6e4),affectedUsers:3200,responders:[{id:`3`,name:`Alice Johnson`,role:`On-Call Engineer`,status:`engaged`}],events:[{id:`e6`,type:`status_change`,timestamp:new Date(Date.now()-20*6e4),content:`Incident triggered`},{id:`e7`,type:`status_change`,timestamp:new Date(Date.now()-15*6e4),content:`Acknowledged by Alice Johnson`}]},{id:`3`,title:`Elevated error rate on search API`,severity:`medium`,status:`triggered`,service:`search-service`,createdAt:new Date(Date.now()-5*6e4),responders:[],events:[{id:`e8`,type:`status_change`,timestamp:new Date(Date.now()-5*6e4),content:`Incident triggered by alerting system`}]},{id:`4`,title:`Memory leak in recommendation engine`,description:`Gradual memory increase detected, auto-scaling keeping up but needs investigation`,severity:`low`,status:`resolved`,service:`recommendation-engine`,createdAt:new Date(Date.now()-4*36e5),acknowledgedAt:new Date(Date.now()-3.5*36e5),resolvedAt:new Date(Date.now()-2*36e5),responders:[{id:`4`,name:`Bob Wilson`,role:`Backend Engineer`,status:`available`}],events:[{id:`e9`,type:`status_change`,timestamp:new Date(Date.now()-4*36e5),content:`Incident triggered`},{id:`e10`,type:`status_change`,timestamp:new Date(Date.now()-2*36e5),content:`Resolved - deployed fix v2.3.1`}]}];exports.IncidentManager=v,exports.defaultIncidents=y;

package/dist/blocks/incident-manager/index.es.js

@@ -0,0 +1,608 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Avatar as t, AvatarFallback as n, AvatarImage as r } from "../../components/avatar/index.es.js";
+import { Badge as i } from "../../components/badge/index.es.js";
+import { Button as a } from "../../components/button/index.es.js";
+import { Card as o, CardContent as s, CardHeader as c, CardTitle as l } from "../../components/card/index.es.js";
+import { Input as u } from "../../components/input/index.es.js";
+import { Select as d, SelectContent as f, SelectItem as p, SelectTrigger as m, SelectValue as h } from "../../components/select/index.es.js";
+import { ScrollArea as g } from "../../components/scroll-area/index.es.js";
+import * as _ from "react";
+import { Activity as v, AlertCircle as y, AlertTriangle as b, Bell as x, CheckCircle2 as S, Clock as C, ExternalLink as w, MessageSquare as T, Phone as E, Plus as D, Search as O, Shield as k, Users as A, XCircle as j } from "lucide-react";
+import { jsx as M, jsxs as N } from "react/jsx-runtime";
+//#region src/blocks/incident-manager/index.tsx
+var P = {
+	critical: {
+		label: "Critical",
+		color: "text-red-500",
+		bgColor: "bg-red-500"
+	},
+	high: {
+		label: "High",
+		color: "text-orange-500",
+		bgColor: "bg-orange-500"
+	},
+	medium: {
+		label: "Medium",
+		color: "text-yellow-500",
+		bgColor: "bg-yellow-500"
+	},
+	low: {
+		label: "Low",
+		color: "text-blue-500",
+		bgColor: "bg-blue-500"
+	}
+}, F = {
+	triggered: {
+		label: "Triggered",
+		color: "text-red-500",
+		icon: y
+	},
+	acknowledged: {
+		label: "Acknowledged",
+		color: "text-orange-500",
+		icon: x
+	},
+	investigating: {
+		label: "Investigating",
+		color: "text-yellow-500",
+		icon: O
+	},
+	identified: {
+		label: "Identified",
+		color: "text-blue-500",
+		icon: v
+	},
+	resolved: {
+		label: "Resolved",
+		color: "text-green-500",
+		icon: S
+	},
+	closed: {
+		label: "Closed",
+		color: "text-gray-500",
+		icon: j
+	}
+};
+function I(e, t) {
+	let n = (t || /* @__PURE__ */ new Date()).getTime() - e.getTime(), r = Math.floor(n / 6e4), i = Math.floor(r / 60), a = Math.floor(i / 24);
+	return a > 0 ? `${a}d ${i % 24}h` : i > 0 ? `${i}h ${r % 60}m` : `${r}m`;
+}
+function L(e) {
+	return e.toLocaleTimeString("fr-FR", {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function R({ incident: c, onAcknowledge: l, onResolve: u, onSelect: d }) {
+	let f = P[c.severity], p = F[c.status], m = p.icon, h = !["resolved", "closed"].includes(c.status);
+	return /* @__PURE__ */ M(o, {
+		className: e("cursor-pointer transition-all hover:shadow-md", c.severity === "critical" && h && "border-red-500/50 bg-red-500/5", c.severity === "high" && h && "border-orange-500/30"),
+		onClick: d,
+		children: /* @__PURE__ */ M(s, {
+			className: "p-4",
+			children: /* @__PURE__ */ N("div", {
+				className: "flex items-start gap-3",
+				children: [
+					/* @__PURE__ */ M("div", {
+						className: e("p-2 rounded-lg shrink-0", `${f.bgColor}/10`),
+						children: /* @__PURE__ */ M(b, { className: e("h-5 w-5", f.color) })
+					}),
+					/* @__PURE__ */ N("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ N("div", {
+								className: "flex items-center gap-2 flex-wrap",
+								children: [
+									/* @__PURE__ */ M(i, {
+										className: e("text-white text-xs", f.bgColor),
+										children: f.label
+									}),
+									/* @__PURE__ */ N(i, {
+										variant: "outline",
+										className: e("text-xs", p.color),
+										children: [/* @__PURE__ */ M(m, { className: "h-3 w-3 mr-1" }), p.label]
+									}),
+									c.service && /* @__PURE__ */ M(i, {
+										variant: "secondary",
+										className: "text-xs",
+										children: c.service
+									})
+								]
+							}),
+							/* @__PURE__ */ M("h4", {
+								className: "font-semibold mt-2 truncate",
+								children: c.title
+							}),
+							c.description && /* @__PURE__ */ M("p", {
+								className: "text-sm text-muted-foreground mt-1 line-clamp-2",
+								children: c.description
+							}),
+							/* @__PURE__ */ N("div", {
+								className: "flex items-center gap-4 mt-3 text-xs text-muted-foreground",
+								children: [
+									/* @__PURE__ */ N("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ M(C, { className: "h-3 w-3" }), I(c.createdAt, c.resolvedAt)]
+									}),
+									c.affectedUsers !== void 0 && /* @__PURE__ */ N("span", {
+										className: "flex items-center gap-1",
+										children: [
+											/* @__PURE__ */ M(A, { className: "h-3 w-3" }),
+											c.affectedUsers,
+											" affected"
+										]
+									}),
+									/* @__PURE__ */ N("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ M(T, { className: "h-3 w-3" }), c.events.length]
+									})
+								]
+							}),
+							c.responders.length > 0 && /* @__PURE__ */ M("div", {
+								className: "flex items-center gap-2 mt-3",
+								children: /* @__PURE__ */ N("div", {
+									className: "flex -space-x-2",
+									children: [c.responders.slice(0, 3).map((e) => /* @__PURE__ */ N(t, {
+										className: "h-6 w-6 border-2 border-background",
+										children: [/* @__PURE__ */ M(r, { src: e.avatar }), /* @__PURE__ */ M(n, {
+											className: "text-xs",
+											children: e.name.slice(0, 2).toUpperCase()
+										})]
+									}, e.id)), c.responders.length > 3 && /* @__PURE__ */ N("div", {
+										className: "h-6 w-6 rounded-full bg-muted flex items-center justify-center text-xs border-2 border-background",
+										children: ["+", c.responders.length - 3]
+									})]
+								})
+							})
+						]
+					}),
+					h && /* @__PURE__ */ N("div", {
+						className: "flex flex-col gap-1 shrink-0",
+						children: [c.status === "triggered" && l && /* @__PURE__ */ M(a, {
+							size: "sm",
+							variant: "outline",
+							className: "h-7 text-xs",
+							onClick: (e) => {
+								e.stopPropagation(), l();
+							},
+							children: "Ack"
+						}), c.status !== "triggered" && c.status !== "resolved" && u && /* @__PURE__ */ M(a, {
+							size: "sm",
+							variant: "outline",
+							className: "h-7 text-xs text-green-500",
+							onClick: (e) => {
+								e.stopPropagation(), u();
+							},
+							children: "Resolve"
+						})]
+					})
+				]
+			})
+		})
+	});
+}
+function z({ incidents: e }) {
+	let t = e.filter((e) => !["resolved", "closed"].includes(e.status)), n = t.filter((e) => e.severity === "critical"), r = _.useMemo(() => {
+		let t = e.filter((e) => e.resolvedAt);
+		if (t.length === 0) return 0;
+		let n = t.reduce((e, t) => e + (t.resolvedAt.getTime() - t.createdAt.getTime()), 0);
+		return Math.round(n / t.length / 6e4);
+	}, [e]);
+	return /* @__PURE__ */ N("div", {
+		className: "grid grid-cols-4 gap-4",
+		children: [
+			/* @__PURE__ */ M(o, { children: /* @__PURE__ */ N(s, {
+				className: "p-4 text-center",
+				children: [/* @__PURE__ */ M("div", {
+					className: "text-3xl font-bold text-red-500",
+					children: t.length
+				}), /* @__PURE__ */ M("div", {
+					className: "text-sm text-muted-foreground",
+					children: "Active Incidents"
+				})]
+			}) }),
+			/* @__PURE__ */ M(o, { children: /* @__PURE__ */ N(s, {
+				className: "p-4 text-center",
+				children: [/* @__PURE__ */ M("div", {
+					className: "text-3xl font-bold text-orange-500",
+					children: n.length
+				}), /* @__PURE__ */ M("div", {
+					className: "text-sm text-muted-foreground",
+					children: "Critical"
+				})]
+			}) }),
+			/* @__PURE__ */ M(o, { children: /* @__PURE__ */ N(s, {
+				className: "p-4 text-center",
+				children: [/* @__PURE__ */ N("div", {
+					className: "text-3xl font-bold",
+					children: [r, "m"]
+				}), /* @__PURE__ */ M("div", {
+					className: "text-sm text-muted-foreground",
+					children: "Avg MTTR"
+				})]
+			}) }),
+			/* @__PURE__ */ M(o, { children: /* @__PURE__ */ N(s, {
+				className: "p-4 text-center",
+				children: [/* @__PURE__ */ M("div", {
+					className: "text-3xl font-bold text-green-500",
+					children: e.filter((e) => e.status === "resolved").length
+				}), /* @__PURE__ */ M("div", {
+					className: "text-sm text-muted-foreground",
+					children: "Resolved Today"
+				})]
+			}) })
+		]
+	});
+}
+function B({ incidents: v, onCreateIncident: y, onAcknowledge: b, onResolve: x, onEscalate: S, onAssign: C, className: A }) {
+	let [I, B] = _.useState(""), [V, H] = _.useState("all"), [U, W] = _.useState("active"), [G, K] = _.useState(null), q = _.useMemo(() => v.filter((e) => !(I && !e.title.toLowerCase().includes(I.toLowerCase()) || V !== "all" && e.severity !== V || U === "active" && ["resolved", "closed"].includes(e.status) || U === "resolved" && !["resolved", "closed"].includes(e.status))).sort((e, t) => {
+		let n = {
+			critical: 0,
+			high: 1,
+			medium: 2,
+			low: 3
+		}, r = n[e.severity] - n[t.severity];
+		return r === 0 ? t.createdAt.getTime() - e.createdAt.getTime() : r;
+	}), [
+		v,
+		I,
+		V,
+		U
+	]);
+	return /* @__PURE__ */ N("div", {
+		className: e("flex flex-col gap-6", A),
+		children: [/* @__PURE__ */ M(z, { incidents: v }), /* @__PURE__ */ N("div", {
+			className: "flex gap-6",
+			children: [/* @__PURE__ */ N("div", {
+				className: "flex-1 space-y-4",
+				children: [/* @__PURE__ */ N("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ N("div", {
+							className: "relative flex-1 max-w-sm",
+							children: [/* @__PURE__ */ M(O, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ M(u, {
+								placeholder: "Search incidents...",
+								value: I,
+								onChange: (e) => B(e.target.value),
+								className: "pl-9"
+							})]
+						}),
+						/* @__PURE__ */ N(d, {
+							value: V,
+							onValueChange: (e) => H(e),
+							children: [/* @__PURE__ */ M(m, {
+								className: "w-32",
+								children: /* @__PURE__ */ M(h, { placeholder: "Severity" })
+							}), /* @__PURE__ */ N(f, { children: [
+								/* @__PURE__ */ M(p, {
+									value: "all",
+									children: "All Severity"
+								}),
+								/* @__PURE__ */ M(p, {
+									value: "critical",
+									children: "Critical"
+								}),
+								/* @__PURE__ */ M(p, {
+									value: "high",
+									children: "High"
+								}),
+								/* @__PURE__ */ M(p, {
+									value: "medium",
+									children: "Medium"
+								}),
+								/* @__PURE__ */ M(p, {
+									value: "low",
+									children: "Low"
+								})
+							] })]
+						}),
+						/* @__PURE__ */ N(d, {
+							value: U,
+							onValueChange: (e) => W(e),
+							children: [/* @__PURE__ */ M(m, {
+								className: "w-32",
+								children: /* @__PURE__ */ M(h, { placeholder: "Status" })
+							}), /* @__PURE__ */ N(f, { children: [
+								/* @__PURE__ */ M(p, {
+									value: "active",
+									children: "Active"
+								}),
+								/* @__PURE__ */ M(p, {
+									value: "resolved",
+									children: "Resolved"
+								}),
+								/* @__PURE__ */ M(p, {
+									value: "all",
+									children: "All"
+								})
+							] })]
+						}),
+						y && /* @__PURE__ */ N(a, {
+							onClick: y,
+							children: [/* @__PURE__ */ M(D, { className: "h-4 w-4 mr-1" }), "Create Incident"]
+						})
+					]
+				}), /* @__PURE__ */ M(g, {
+					className: "h-[600px]",
+					children: /* @__PURE__ */ M("div", {
+						className: "space-y-3 pr-4",
+						children: q.length === 0 ? /* @__PURE__ */ N("div", {
+							className: "flex flex-col items-center justify-center h-48 text-muted-foreground",
+							children: [
+								/* @__PURE__ */ M(k, { className: "h-12 w-12 mb-4 text-green-500" }),
+								/* @__PURE__ */ M("p", {
+									className: "text-lg font-medium",
+									children: "No incidents"
+								}),
+								/* @__PURE__ */ M("p", {
+									className: "text-sm",
+									children: "All systems are operational"
+								})
+							]
+						}) : q.map((e) => /* @__PURE__ */ M(R, {
+							incident: e,
+							onAcknowledge: b ? () => b(e) : void 0,
+							onResolve: x ? () => x(e) : void 0,
+							onSelect: () => K(e)
+						}, e.id))
+					})
+				})]
+			}), G && /* @__PURE__ */ N(o, {
+				className: "w-96 shrink-0",
+				children: [/* @__PURE__ */ N(c, {
+					className: "pb-3",
+					children: [
+						/* @__PURE__ */ N("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ M(i, {
+								className: e("text-white", P[G.severity].bgColor),
+								children: P[G.severity].label
+							}), /* @__PURE__ */ M(a, {
+								variant: "ghost",
+								size: "sm",
+								onClick: () => K(null),
+								children: /* @__PURE__ */ M(j, { className: "h-4 w-4" })
+							})]
+						}),
+						/* @__PURE__ */ M(l, {
+							className: "mt-2",
+							children: G.title
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "flex items-center gap-2 mt-2",
+							children: [/* @__PURE__ */ M(i, {
+								variant: "outline",
+								className: F[G.status].color,
+								children: F[G.status].label
+							}), G.service && /* @__PURE__ */ M(i, {
+								variant: "secondary",
+								children: G.service
+							})]
+						})
+					]
+				}), /* @__PURE__ */ N(s, {
+					className: "space-y-4",
+					children: [
+						G.description && /* @__PURE__ */ M("p", {
+							className: "text-sm text-muted-foreground",
+							children: G.description
+						}),
+						G.impact && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("div", {
+							className: "text-xs font-medium text-muted-foreground mb-1",
+							children: "Impact"
+						}), /* @__PURE__ */ M("p", {
+							className: "text-sm",
+							children: G.impact
+						})] }),
+						/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("div", {
+							className: "text-xs font-medium text-muted-foreground mb-2",
+							children: "Timeline"
+						}), /* @__PURE__ */ M("div", {
+							className: "space-y-2",
+							children: G.events.slice(0, 5).map((e) => /* @__PURE__ */ N("div", {
+								className: "flex items-start gap-2 text-xs",
+								children: [/* @__PURE__ */ M("span", {
+									className: "text-muted-foreground shrink-0",
+									children: L(e.timestamp)
+								}), /* @__PURE__ */ M("span", { children: e.content })]
+							}, e.id))
+						})] }),
+						/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("div", {
+							className: "text-xs font-medium text-muted-foreground mb-2",
+							children: "Responders"
+						}), /* @__PURE__ */ M("div", {
+							className: "space-y-2",
+							children: G.responders.map((e) => /* @__PURE__ */ N("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ N(t, {
+										className: "h-6 w-6",
+										children: [/* @__PURE__ */ M(r, { src: e.avatar }), /* @__PURE__ */ M(n, {
+											className: "text-xs",
+											children: e.name.slice(0, 2).toUpperCase()
+										})]
+									}),
+									/* @__PURE__ */ M("span", {
+										className: "text-sm",
+										children: e.name
+									}),
+									/* @__PURE__ */ M(i, {
+										variant: "outline",
+										className: "text-xs ml-auto",
+										children: e.role
+									})
+								]
+							}, e.id))
+						})] }),
+						/* @__PURE__ */ N("div", {
+							className: "flex flex-col gap-2 pt-2 border-t",
+							children: [
+								G.slackChannel && /* @__PURE__ */ N(a, {
+									variant: "outline",
+									size: "sm",
+									className: "justify-start",
+									children: [
+										/* @__PURE__ */ M(T, { className: "h-4 w-4 mr-2" }),
+										"Join #",
+										G.slackChannel
+									]
+								}),
+								G.runbookUrl && /* @__PURE__ */ N(a, {
+									variant: "outline",
+									size: "sm",
+									className: "justify-start",
+									children: [/* @__PURE__ */ M(w, { className: "h-4 w-4 mr-2" }), "View Runbook"]
+								}),
+								S && !["resolved", "closed"].includes(G.status) && /* @__PURE__ */ N(a, {
+									variant: "outline",
+									size: "sm",
+									className: "justify-start text-orange-500",
+									onClick: () => S(G),
+									children: [/* @__PURE__ */ M(E, { className: "h-4 w-4 mr-2" }), "Escalate"]
+								})
+							]
+						})
+					]
+				})]
+			})]
+		})]
+	});
+}
+var V = [
+	{
+		id: "1",
+		title: "Database connection pool exhausted",
+		description: "Production database is experiencing connection pool exhaustion, causing request timeouts",
+		severity: "critical",
+		status: "investigating",
+		service: "api-gateway",
+		createdAt: /* @__PURE__ */ new Date(Date.now() - 45 * 6e4),
+		acknowledgedAt: /* @__PURE__ */ new Date(Date.now() - 40 * 6e4),
+		impact: "50% of API requests failing with 504 errors",
+		affectedUsers: 12500,
+		slackChannel: "incident-db-001",
+		runbookUrl: "https://runbooks.example.com/db-pool",
+		responders: [{
+			id: "1",
+			name: "John Doe",
+			role: "Incident Commander",
+			status: "engaged"
+		}, {
+			id: "2",
+			name: "Jane Smith",
+			role: "DBA",
+			status: "engaged"
+		}],
+		events: [
+			{
+				id: "e1",
+				type: "status_change",
+				timestamp: /* @__PURE__ */ new Date(Date.now() - 45 * 6e4),
+				content: "Incident triggered by alerting system"
+			},
+			{
+				id: "e2",
+				type: "assignment",
+				timestamp: /* @__PURE__ */ new Date(Date.now() - 43 * 6e4),
+				content: "John Doe assigned as IC",
+				user: "System"
+			},
+			{
+				id: "e3",
+				type: "status_change",
+				timestamp: /* @__PURE__ */ new Date(Date.now() - 40 * 6e4),
+				content: "Incident acknowledged",
+				user: "John Doe"
+			},
+			{
+				id: "e4",
+				type: "comment",
+				timestamp: /* @__PURE__ */ new Date(Date.now() - 35 * 6e4),
+				content: "Investigating connection pool settings",
+				user: "Jane Smith"
+			},
+			{
+				id: "e5",
+				type: "status_change",
+				timestamp: /* @__PURE__ */ new Date(Date.now() - 30 * 6e4),
+				content: "Status changed to investigating",
+				user: "John Doe"
+			}
+		]
+	},
+	{
+		id: "2",
+		title: "High latency on payment service",
+		description: "Payment processing latency increased to >2s, above SLA threshold",
+		severity: "high",
+		status: "acknowledged",
+		service: "payment-service",
+		createdAt: /* @__PURE__ */ new Date(Date.now() - 20 * 6e4),
+		acknowledgedAt: /* @__PURE__ */ new Date(Date.now() - 15 * 6e4),
+		affectedUsers: 3200,
+		responders: [{
+			id: "3",
+			name: "Alice Johnson",
+			role: "On-Call Engineer",
+			status: "engaged"
+		}],
+		events: [{
+			id: "e6",
+			type: "status_change",
+			timestamp: /* @__PURE__ */ new Date(Date.now() - 20 * 6e4),
+			content: "Incident triggered"
+		}, {
+			id: "e7",
+			type: "status_change",
+			timestamp: /* @__PURE__ */ new Date(Date.now() - 15 * 6e4),
+			content: "Acknowledged by Alice Johnson"
+		}]
+	},
+	{
+		id: "3",
+		title: "Elevated error rate on search API",
+		severity: "medium",
+		status: "triggered",
+		service: "search-service",
+		createdAt: /* @__PURE__ */ new Date(Date.now() - 5 * 6e4),
+		responders: [],
+		events: [{
+			id: "e8",
+			type: "status_change",
+			timestamp: /* @__PURE__ */ new Date(Date.now() - 5 * 6e4),
+			content: "Incident triggered by alerting system"
+		}]
+	},
+	{
+		id: "4",
+		title: "Memory leak in recommendation engine",
+		description: "Gradual memory increase detected, auto-scaling keeping up but needs investigation",
+		severity: "low",
+		status: "resolved",
+		service: "recommendation-engine",
+		createdAt: /* @__PURE__ */ new Date(Date.now() - 4 * 36e5),
+		acknowledgedAt: /* @__PURE__ */ new Date(Date.now() - 3.5 * 36e5),
+		resolvedAt: /* @__PURE__ */ new Date(Date.now() - 2 * 36e5),
+		responders: [{
+			id: "4",
+			name: "Bob Wilson",
+			role: "Backend Engineer",
+			status: "available"
+		}],
+		events: [{
+			id: "e9",
+			type: "status_change",
+			timestamp: /* @__PURE__ */ new Date(Date.now() - 4 * 36e5),
+			content: "Incident triggered"
+		}, {
+			id: "e10",
+			type: "status_change",
+			timestamp: /* @__PURE__ */ new Date(Date.now() - 2 * 36e5),
+			content: "Resolved - deployed fix v2.3.1"
+		}]
+	}
+];
+//#endregion
+export { B as IncidentManager, V as defaultIncidents };

package/dist/blocks/index.d.ts

@@ -15,7 +15,10 @@ export type { WakaHeaderProps, HeaderAction, HeaderFilter, HeaderNotification, H
 export * from './dashboard';
 export * from './settings';
 export * from './profile';
+export * from './profile-list';
 export * from './user-management';
+export * from './avatar-upload';
+export * from './team-form';
 export * from './activity-timeline';
 export * from './calendar-view';
 export { WakaChat, defaultChatUser, defaultChatConversations, defaultChatMessages, WakaChatWidget, useChatWidget, type MessageStatus as ChatBlockMessageStatus, type ChatUser as ChatBlockUser, type ChatMessage, type ChatConversation, type WakaChatProps, type WakaChatWidgetProps, type UseChatWidgetOptions, } from './chat';
@@ -56,3 +59,6 @@ export { SignatureDatabaseManager, type UpdateStatus as SignatureUpdateStatus, t
 export { ScanPolicyEditor, defaultScanPolicy, type DetectionAction, type ScanPolicy, type ScanPolicyEditorProps, } from './scan-policy-editor';
 export { ThreatAlertBanner, defaultThreatAlerts, type AlertSeverity as ThreatAlertSeverity, type ThreatAction, type ThreatAlert, type ThreatAlertBannerProps, } from './threat-alert-banner';
 export { ScanReportGenerator, type ReportFormat, type ReportType, type ReportConfig, type ReportPreview, type ScanReportGeneratorProps, } from './scan-report-generator';
+export * from './api-keys-manager';
+export { SidePushLayout } from './_shared/identity/SidePushLayout';
+export type { SidePushLayoutProps } from './_shared/identity/SidePushLayout';