@burdenoff/microfe-admin 2026.511.1

package/dist/admin/components/ActivityFeed.js

@@ -0,0 +1,91 @@
+import { cn as e } from "../utils/cn.js";
+import { Card as t, CardContent as n, CardHeader as r, CardTitle as i, Skeleton as a } from "./ui.js";
+import { formatRelativeTime as o } from "../utils/formatters.js";
+import { Activity as s, AlertTriangle as c, Ban as l, CheckCircle as u, CreditCard as d, Mail as f, Plus as p, Rocket as m, Settings as h, Shield as g, UserPlus as _, XCircle as v } from "lucide-react";
+import { Link as y } from "react-router-dom";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/admin/components/ActivityFeed.tsx
+function S({ activities: e, maxItems: a = 10, loading: o, viewAllLink: s = "/activity", className: c }) {
+	let l = e.slice(0, a);
+	return /* @__PURE__ */ x(t, {
+		className: c,
+		children: [/* @__PURE__ */ x(r, {
+			className: "flex flex-row items-center justify-between",
+			children: [/* @__PURE__ */ b(i, {
+				className: "text-lg",
+				children: "Recent Activity"
+			}), /* @__PURE__ */ b(y, {
+				to: s,
+				className: "text-sm text-primary hover:underline",
+				children: "View All"
+			})]
+		}), /* @__PURE__ */ b(n, { children: o ? /* @__PURE__ */ b("div", {
+			className: "space-y-4",
+			children: Array.from({ length: 5 }).map((e, t) => /* @__PURE__ */ b(w, {}, t))
+		}) : l.length === 0 ? /* @__PURE__ */ b("p", {
+			className: "py-8 text-center text-sm text-muted-foreground",
+			children: "No recent activity"
+		}) : /* @__PURE__ */ b("div", {
+			className: "space-y-4",
+			children: l.map((e) => /* @__PURE__ */ b(C, { activity: e }, e.id))
+		}) })]
+	});
+}
+function C({ activity: t }) {
+	let n = T(t.type);
+	return /* @__PURE__ */ x("div", {
+		className: "flex items-start gap-3",
+		children: [/* @__PURE__ */ b("div", {
+			className: e("rounded-full p-2", {
+				info: "bg-info/10 text-info",
+				warning: "bg-warning/10 text-warning",
+				error: "bg-destructive/10 text-destructive",
+				success: "bg-success/10 text-success"
+			}[t.severity || "info"]),
+			children: n
+		}), /* @__PURE__ */ x("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ b("p", {
+				className: "text-sm font-medium text-foreground",
+				children: t.description
+			}), /* @__PURE__ */ x("div", {
+				className: "mt-1 flex items-center gap-2 text-xs text-muted-foreground",
+				children: [
+					/* @__PURE__ */ b("span", { children: t.actor }),
+					/* @__PURE__ */ b("span", { children: "-" }),
+					/* @__PURE__ */ b("span", { children: o(t.timestamp) })
+				]
+			})]
+		})]
+	});
+}
+function w() {
+	return /* @__PURE__ */ x("div", {
+		className: "flex items-start gap-3",
+		children: [/* @__PURE__ */ b(a, { className: "h-9 w-9 rounded-full" }), /* @__PURE__ */ x("div", {
+			className: "flex-1 space-y-2",
+			children: [/* @__PURE__ */ b(a, { className: "h-4 w-3/4" }), /* @__PURE__ */ b(a, { className: "h-3 w-1/2" })]
+		})]
+	});
+}
+function T(e) {
+	return {
+		"tenant.created": /* @__PURE__ */ b(p, { className: "h-4 w-4" }),
+		"tenant.suspended": /* @__PURE__ */ b(l, { className: "h-4 w-4" }),
+		"tenant.activated": /* @__PURE__ */ b(u, { className: "h-4 w-4" }),
+		"payment.failed": /* @__PURE__ */ b(c, { className: "h-4 w-4" }),
+		"payment.succeeded": /* @__PURE__ */ b(d, { className: "h-4 w-4" }),
+		"user.created": /* @__PURE__ */ b(_, { className: "h-4 w-4" }),
+		"user.blocked": /* @__PURE__ */ b(l, { className: "h-4 w-4" }),
+		"deployment.started": /* @__PURE__ */ b(m, { className: "h-4 w-4" }),
+		"deployment.completed": /* @__PURE__ */ b(u, { className: "h-4 w-4" }),
+		"deployment.failed": /* @__PURE__ */ b(v, { className: "h-4 w-4" }),
+		"newsletter.sent": /* @__PURE__ */ b(f, { className: "h-4 w-4" }),
+		"settings.changed": /* @__PURE__ */ b(h, { className: "h-4 w-4" }),
+		"security.alert": /* @__PURE__ */ b(g, { className: "h-4 w-4" })
+	}[e] || /* @__PURE__ */ b(s, { className: "h-4 w-4" });
+}
+//#endregion
+export { S as ActivityFeed };
+
+//# sourceMappingURL=ActivityFeed.js.map

package/dist/admin/components/ActivityFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityFeed.js","names":[],"sources":["../../../src/admin/components/ActivityFeed.tsx"],"sourcesContent":["import { Link } from 'react-router-dom';\nimport {\n  Plus,\n  Ban,\n  AlertTriangle,\n  CheckCircle,\n  UserPlus,\n  Rocket,\n  XCircle,\n  Activity,\n  CreditCard,\n  Mail,\n  Settings,\n  Shield,\n} from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent, Skeleton } from './ui';\nimport { cn } from '../utils/cn';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { Activity as ActivityType } from '../types';\n\ninterface ActivityFeedProps {\n  /** List of activities */\n  activities: ActivityType[];\n  /** Maximum items to display */\n  maxItems?: number;\n  /** Loading state */\n  loading?: boolean;\n  /** Link to view all activities */\n  viewAllLink?: string;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * Activity feed component showing recent platform activities\n */\nexport function ActivityFeed({\n  activities,\n  maxItems = 10,\n  loading,\n  viewAllLink = '/activity',\n  className,\n}: ActivityFeedProps) {\n  const displayActivities = activities.slice(0, maxItems);\n\n  return (\n    <Card className={className}>\n      <CardHeader className=\"flex flex-row items-center justify-between\">\n        <CardTitle className=\"text-lg\">Recent Activity</CardTitle>\n        <Link to={viewAllLink} className=\"text-sm text-primary hover:underline\">\n          View All\n        </Link>\n      </CardHeader>\n      <CardContent>\n        {loading ? (\n          <div className=\"space-y-4\">\n            {Array.from({ length: 5 }).map((_, i) => (\n              <ActivityItemSkeleton key={i} />\n            ))}\n          </div>\n        ) : displayActivities.length === 0 ? (\n          <p className=\"py-8 text-center text-sm text-muted-foreground\">No recent activity</p>\n        ) : (\n          <div className=\"space-y-4\">\n            {displayActivities.map((activity) => (\n              <ActivityItem key={activity.id} activity={activity} />\n            ))}\n          </div>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n\ninterface ActivityItemProps {\n  activity: ActivityType;\n}\n\nfunction ActivityItem({ activity }: ActivityItemProps) {\n  const icon = getActivityIcon(activity.type);\n  const severityColors = {\n    info: 'bg-info/10 text-info',\n    warning: 'bg-warning/10 text-warning',\n    error: 'bg-destructive/10 text-destructive',\n    success: 'bg-success/10 text-success',\n  };\n  const severity = activity.severity || 'info';\n\n  return (\n    <div className=\"flex items-start gap-3\">\n      <div className={cn('rounded-full p-2', severityColors[severity])}>{icon}</div>\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"text-sm font-medium text-foreground\">{activity.description}</p>\n        <div className=\"mt-1 flex items-center gap-2 text-xs text-muted-foreground\">\n          <span>{activity.actor}</span>\n          <span>-</span>\n          <span>{formatRelativeTime(activity.timestamp)}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction ActivityItemSkeleton() {\n  return (\n    <div className=\"flex items-start gap-3\">\n      <Skeleton className=\"h-9 w-9 rounded-full\" />\n      <div className=\"flex-1 space-y-2\">\n        <Skeleton className=\"h-4 w-3/4\" />\n        <Skeleton className=\"h-3 w-1/2\" />\n      </div>\n    </div>\n  );\n}\n\nfunction getActivityIcon(type: string) {\n  const iconMap: Record<string, React.ReactNode> = {\n    'tenant.created': <Plus className=\"h-4 w-4\" />,\n    'tenant.suspended': <Ban className=\"h-4 w-4\" />,\n    'tenant.activated': <CheckCircle className=\"h-4 w-4\" />,\n    'payment.failed': <AlertTriangle className=\"h-4 w-4\" />,\n    'payment.succeeded': <CreditCard className=\"h-4 w-4\" />,\n    'user.created': <UserPlus className=\"h-4 w-4\" />,\n    'user.blocked': <Ban className=\"h-4 w-4\" />,\n    'deployment.started': <Rocket className=\"h-4 w-4\" />,\n    'deployment.completed': <CheckCircle className=\"h-4 w-4\" />,\n    'deployment.failed': <XCircle className=\"h-4 w-4\" />,\n    'newsletter.sent': <Mail className=\"h-4 w-4\" />,\n    'settings.changed': <Settings className=\"h-4 w-4\" />,\n    'security.alert': <Shield className=\"h-4 w-4\" />,\n  };\n\n  return iconMap[type] || <Activity className=\"h-4 w-4\" />;\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAAa,EAC3B,eACA,cAAW,IACX,YACA,iBAAc,aACd,gBACoB;CACpB,IAAM,IAAoB,EAAW,MAAM,GAAG,EAAS;AAEvD,QACE,kBAAC,GAAD;EAAiB;YAAjB,CACE,kBAAC,GAAD;GAAY,WAAU;aAAtB,CACE,kBAAC,GAAD;IAAW,WAAU;cAAU;IAA2B,CAAA,EAC1D,kBAAC,GAAD;IAAM,IAAI;IAAa,WAAU;cAAuC;IAEjE,CAAA,CACI;MACb,kBAAC,GAAD,EAAA,UACG,IACC,kBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,GAAD,EAAgC,EAAL,EAAK,CAChC;GACE,CAAA,GACJ,EAAkB,WAAW,IAC/B,kBAAC,KAAD;GAAG,WAAU;aAAiD;GAAsB,CAAA,GAEpF,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAkB,KAAK,MACtB,kBAAC,GAAD,EAA0C,aAAY,EAAnC,EAAS,GAA0B,CACtD;GACE,CAAA,EAEI,CAAA,CACT;;;AAQX,SAAS,EAAa,EAAE,eAA+B;CACrD,IAAM,IAAO,EAAgB,EAAS,KAAK;AAS3C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAW,EAAG,oBAVA;IACrB,MAAM;IACN,SAAS;IACT,OAAO;IACP,SAAS;IACV,CACgB,EAAS,YAAY,QAI8B;aAAG;GAAW,CAAA,EAC9E,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAuC,EAAS;IAAgB,CAAA,EAC7E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD,EAAA,UAAO,EAAS,OAAa,CAAA;KAC7B,kBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;KACd,kBAAC,QAAD,EAAA,UAAO,EAAmB,EAAS,UAAU,EAAQ,CAAA;KACjD;MACF;KACF;;;AAIV,SAAS,IAAuB;AAC9B,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD,EAAU,WAAU,wBAAyB,CAAA,EAC7C,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAU,WAAU,aAAc,CAAA,EAClC,kBAAC,GAAD,EAAU,WAAU,aAAc,CAAA,CAC9B;KACF;;;AAIV,SAAS,EAAgB,GAAc;AAiBrC,QAhBiD;EAC/C,kBAAkB,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;EAC9C,oBAAoB,kBAAC,GAAD,EAAK,WAAU,WAAY,CAAA;EAC/C,oBAAoB,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;EACvD,kBAAkB,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;EACvD,qBAAqB,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA;EACvD,gBAAgB,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;EAChD,gBAAgB,kBAAC,GAAD,EAAK,WAAU,WAAY,CAAA;EAC3C,sBAAsB,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;EACpD,wBAAwB,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;EAC3D,qBAAqB,kBAAC,GAAD,EAAS,WAAU,WAAY,CAAA;EACpD,mBAAmB,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;EAC/C,oBAAoB,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;EACpD,kBAAkB,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;EACjD,CAEc,MAAS,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA"}

package/dist/admin/components/Charts.d.ts

@@ -0,0 +1,33 @@
+import { RevenueTrendPoint, TenantGrowthPoint, ProductUsagePoint } from '../types';
+
+interface RevenueTrendChartProps {
+    data: RevenueTrendPoint[];
+    loading?: boolean;
+    className?: string;
+}
+export declare function RevenueTrendChart({ data, loading, className }: RevenueTrendChartProps): import("react/jsx-runtime").JSX.Element;
+interface TenantGrowthChartProps {
+    data: TenantGrowthPoint[];
+    loading?: boolean;
+    className?: string;
+}
+export declare function TenantGrowthChart({ data, loading, className }: TenantGrowthChartProps): import("react/jsx-runtime").JSX.Element;
+interface ProductUsageChartProps {
+    data: ProductUsagePoint[];
+    loading?: boolean;
+    className?: string;
+}
+export declare function ProductUsageChart({ data, loading, className }: ProductUsageChartProps): import("react/jsx-runtime").JSX.Element;
+interface QuickLink {
+    to: string;
+    icon: React.ReactNode;
+    label: string;
+    description?: string;
+}
+interface QuickLinksProps {
+    links: QuickLink[];
+    className?: string;
+}
+export declare function QuickLinks({ links, className }: QuickLinksProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Charts.d.ts.map

package/dist/admin/components/Charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Charts.d.ts","sourceRoot":"","sources":["../../../src/admin/components/Charts.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAexF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAyDrF;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CA6DrF;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CA8CrF;AAMD,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,eAAe,2CA8B/D"}

package/dist/admin/components/Charts.js

@@ -0,0 +1,37 @@
+import { cn as e } from "../utils/cn.js";
+import { Card as t, CardContent as n, CardHeader as r, CardTitle as i } from "./ui.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "recharts";
+//#region src/admin/components/Charts.tsx
+function s({ links: s, className: c }) {
+	return /* @__PURE__ */ o(t, {
+		className: c,
+		children: [/* @__PURE__ */ a(r, { children: /* @__PURE__ */ a(i, {
+			className: "text-lg",
+			children: "Quick Actions"
+		}) }), /* @__PURE__ */ a(n, { children: /* @__PURE__ */ a("div", {
+			className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+			children: s.map((t) => /* @__PURE__ */ o("a", {
+				href: t.to,
+				className: e("flex items-center gap-3 rounded-lg border border-border p-3", "transition-colors hover:bg-accent"),
+				children: [/* @__PURE__ */ a("div", {
+					className: "rounded-md bg-primary/10 p-2 text-primary",
+					children: t.icon
+				}), /* @__PURE__ */ o("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ a("p", {
+						className: "font-medium text-foreground",
+						children: t.label
+					}), t.description && /* @__PURE__ */ a("p", {
+						className: "truncate text-xs text-muted-foreground",
+						children: t.description
+					})]
+				})]
+			}, t.to))
+		}) })]
+	});
+}
+//#endregion
+export { s as QuickLinks };
+
+//# sourceMappingURL=Charts.js.map

package/dist/admin/components/Charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Charts.js","names":[],"sources":["../../../src/admin/components/Charts.tsx"],"sourcesContent":["import {\n  LineChart,\n  Line,\n  AreaChart,\n  Area,\n  PieChart,\n  Pie,\n  Cell,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from 'recharts';\nimport { Card, CardHeader, CardTitle, CardContent, Skeleton } from './ui';\nimport { cn } from '../utils/cn';\nimport { formatCurrency, formatNumber } from '../utils/formatters';\nimport type { RevenueTrendPoint, TenantGrowthPoint, ProductUsagePoint } from '../types';\n\n// Chart colors using CSS variables for theme support\nconst CHART_COLORS = [\n  'hsl(var(--chart-1, 221.2 83.2% 53.3%))',\n  'hsl(var(--chart-2, 142.1 76.2% 36.3%))',\n  'hsl(var(--chart-3, 47.9 95.8% 53.1%))',\n  'hsl(var(--chart-4, 0 84.2% 60.2%))',\n  'hsl(var(--chart-5, 262.1 83.3% 57.8%))',\n];\n\n// ============================================================================\n// Revenue Trend Chart (Line Chart)\n// ============================================================================\n\ninterface RevenueTrendChartProps {\n  data: RevenueTrendPoint[];\n  loading?: boolean;\n  className?: string;\n}\n\nexport function RevenueTrendChart({ data, loading, className }: RevenueTrendChartProps) {\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <CardTitle className=\"text-lg\">Revenue Trend</CardTitle>\n      </CardHeader>\n      <CardContent>\n        {loading ? (\n          <Skeleton className=\"h-[300px] w-full\" />\n        ) : (\n          <ResponsiveContainer width=\"100%\" height={300}>\n            <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>\n              <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border\" />\n              <XAxis\n                dataKey=\"date\"\n                className=\"text-xs fill-muted-foreground\"\n                tick={{ fill: 'currentColor' }}\n              />\n              <YAxis\n                className=\"text-xs fill-muted-foreground\"\n                tick={{ fill: 'currentColor' }}\n                tickFormatter={(value) => formatCurrency(value)}\n              />\n              <Tooltip\n                contentStyle={{\n                  backgroundColor: 'hsl(var(--card))',\n                  border: '1px solid hsl(var(--border))',\n                  borderRadius: '6px',\n                }}\n                labelStyle={{ color: 'hsl(var(--foreground))' }}\n                formatter={(value: number) => [formatCurrency(value), '']}\n              />\n              <Legend />\n              <Line\n                type=\"monotone\"\n                dataKey=\"mrr\"\n                name=\"MRR\"\n                stroke={CHART_COLORS[0]}\n                strokeWidth={2}\n                dot={false}\n                activeDot={{ r: 6 }}\n              />\n              <Line\n                type=\"monotone\"\n                dataKey=\"arr\"\n                name=\"ARR\"\n                stroke={CHART_COLORS[1]}\n                strokeWidth={2}\n                dot={false}\n                activeDot={{ r: 6 }}\n              />\n            </LineChart>\n          </ResponsiveContainer>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n\n// ============================================================================\n// Tenant Growth Chart (Area Chart)\n// ============================================================================\n\ninterface TenantGrowthChartProps {\n  data: TenantGrowthPoint[];\n  loading?: boolean;\n  className?: string;\n}\n\nexport function TenantGrowthChart({ data, loading, className }: TenantGrowthChartProps) {\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <CardTitle className=\"text-lg\">Tenant Growth</CardTitle>\n      </CardHeader>\n      <CardContent>\n        {loading ? (\n          <Skeleton className=\"h-[250px] w-full\" />\n        ) : (\n          <ResponsiveContainer width=\"100%\" height={250}>\n            <AreaChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>\n              <CartesianGrid strokeDasharray=\"3 3\" className=\"stroke-border\" />\n              <XAxis\n                dataKey=\"date\"\n                className=\"text-xs fill-muted-foreground\"\n                tick={{ fill: 'currentColor' }}\n              />\n              <YAxis className=\"text-xs fill-muted-foreground\" tick={{ fill: 'currentColor' }} />\n              <Tooltip\n                contentStyle={{\n                  backgroundColor: 'hsl(var(--card))',\n                  border: '1px solid hsl(var(--border))',\n                  borderRadius: '6px',\n                }}\n                labelStyle={{ color: 'hsl(var(--foreground))' }}\n              />\n              <Legend />\n              <Area\n                type=\"monotone\"\n                dataKey=\"new\"\n                name=\"New\"\n                stackId=\"1\"\n                stroke={CHART_COLORS[0]}\n                fill={CHART_COLORS[0]}\n                fillOpacity={0.6}\n              />\n              <Area\n                type=\"monotone\"\n                dataKey=\"active\"\n                name=\"Active\"\n                stackId=\"2\"\n                stroke={CHART_COLORS[1]}\n                fill={CHART_COLORS[1]}\n                fillOpacity={0.6}\n              />\n              <Area\n                type=\"monotone\"\n                dataKey=\"churned\"\n                name=\"Churned\"\n                stackId=\"3\"\n                stroke={CHART_COLORS[3]}\n                fill={CHART_COLORS[3]}\n                fillOpacity={0.6}\n              />\n            </AreaChart>\n          </ResponsiveContainer>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n\n// ============================================================================\n// Product Usage Chart (Pie Chart)\n// ============================================================================\n\ninterface ProductUsageChartProps {\n  data: ProductUsagePoint[];\n  loading?: boolean;\n  className?: string;\n}\n\nexport function ProductUsageChart({ data, loading, className }: ProductUsageChartProps) {\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <CardTitle className=\"text-lg\">Product Usage</CardTitle>\n      </CardHeader>\n      <CardContent>\n        {loading ? (\n          <Skeleton className=\"h-[250px] w-full\" />\n        ) : (\n          <ResponsiveContainer width=\"100%\" height={250}>\n            <PieChart>\n              <Pie\n                data={data}\n                dataKey=\"tenants\"\n                nameKey=\"product\"\n                cx=\"50%\"\n                cy=\"50%\"\n                outerRadius={80}\n                label={({ name, percent }: { name: string; percent: number }) =>\n                  `${name} (${(percent * 100).toFixed(0)}%)`\n                }\n                labelLine={false}\n              >\n                {data.map((entry, index) => (\n                  <Cell\n                    key={`cell-${index}`}\n                    fill={entry.color || CHART_COLORS[index % CHART_COLORS.length]}\n                  />\n                ))}\n              </Pie>\n              <Tooltip\n                contentStyle={{\n                  backgroundColor: 'hsl(var(--card))',\n                  border: '1px solid hsl(var(--border))',\n                  borderRadius: '6px',\n                }}\n                formatter={(value: number) => [formatNumber(value) + ' tenants', '']}\n              />\n              <Legend />\n            </PieChart>\n          </ResponsiveContainer>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n\n// ============================================================================\n// Quick Links Card\n// ============================================================================\n\ninterface QuickLink {\n  to: string;\n  icon: React.ReactNode;\n  label: string;\n  description?: string;\n}\n\ninterface QuickLinksProps {\n  links: QuickLink[];\n  className?: string;\n}\n\nexport function QuickLinks({ links, className }: QuickLinksProps) {\n  return (\n    <Card className={className}>\n      <CardHeader>\n        <CardTitle className=\"text-lg\">Quick Actions</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          {links.map((link) => (\n            <a\n              key={link.to}\n              href={link.to}\n              className={cn(\n                'flex items-center gap-3 rounded-lg border border-border p-3',\n                'transition-colors hover:bg-accent'\n              )}\n            >\n              <div className=\"rounded-md bg-primary/10 p-2 text-primary\">{link.icon}</div>\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"font-medium text-foreground\">{link.label}</p>\n                {link.description && (\n                  <p className=\"truncate text-xs text-muted-foreground\">{link.description}</p>\n                )}\n              </div>\n            </a>\n          ))}\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;AAqPA,SAAgB,EAAW,EAAE,UAAO,gBAA8B;AAChE,QACE,kBAAC,GAAD;EAAiB;YAAjB,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAW,WAAU;aAAU;GAAyB,CAAA,EAC7C,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,MACV,kBAAC,KAAD;IAEE,MAAM,EAAK;IACX,WAAW,EACT,+DACA,oCACD;cANH,CAQE,kBAAC,OAAD;KAAK,WAAU;eAA6C,EAAK;KAAW,CAAA,EAC5E,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAA+B,EAAK;MAAU,CAAA,EAC1D,EAAK,eACJ,kBAAC,KAAD;MAAG,WAAU;gBAA0C,EAAK;MAAgB,CAAA,CAE1E;OACJ;MAdG,EAAK,GAcR,CACJ;GACE,CAAA,EACM,CAAA,CACT"}

package/dist/admin/components/ConfirmDialog.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+
+export interface ConfirmDialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Callback when the dialog should close */
+    onClose: () => void;
+    /** Callback when confirmed */
+    onConfirm: () => void | Promise<void>;
+    /** Dialog title */
+    title: string;
+    /** Dialog description */
+    description: ReactNode;
+    /** Confirm button text */
+    confirmLabel?: string;
+    /** Cancel button text */
+    cancelLabel?: string;
+    /** Variant for styling */
+    variant?: 'default' | 'destructive';
+    /** Loading state */
+    loading?: boolean;
+    /** Icon to display */
+    icon?: ReactNode;
+}
+/**
+ * ConfirmDialog - Modal dialog for confirming actions
+ *
+ * Use for destructive actions like deleting, or important state changes.
+ */
+export declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, loading, icon, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export interface DeleteConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void | Promise<void>;
+    /** Name of item being deleted */
+    itemName: string;
+    /** Type of item (e.g., "tenant", "user") */
+    itemType: string;
+    loading?: boolean;
+}
+/**
+ * DeleteConfirmDialog - Pre-configured dialog for delete confirmations
+ */
+export declare function DeleteConfirmDialog({ open, onClose, onConfirm, itemName, itemType, loading, }: DeleteConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/admin/components/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/admin/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS1D,MAAM,WAAW,kBAAkB;IACjC,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,4CAA4C;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8BAA8B;IAC9B,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,EAAE,SAAS,CAAC;IACvB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAMD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,YAAwB,EACxB,WAAsB,EACtB,OAAmB,EACnB,OAAe,EACf,IAAI,GACL,EAAE,kBAAkB,kDA0GpB;AAMD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE,wBAAwB,2CAkB1B"}

package/dist/admin/components/ConfirmDialog.js

@@ -0,0 +1,4 @@
+import "./ui.js";
+import "react";
+import "lucide-react";
+import "react/jsx-runtime";

package/dist/admin/components/DataTable.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+
+interface Column<T> {
+    /** Column key (used for accessing data) */
+    key: string;
+    /** Column header */
+    header: string;
+    /** Custom render function */
+    render?: (item: T, index: number) => ReactNode;
+    /** Column width */
+    width?: string;
+    /** Align content */
+    align?: 'left' | 'center' | 'right';
+    /** Sortable */
+    sortable?: boolean;
+}
+interface DataTableProps<T> {
+    /** Column definitions */
+    columns: Column<T>[];
+    /** Data to display */
+    data: T[];
+    /** Key extractor for rows */
+    keyExtractor: (item: T) => string;
+    /** Loading state */
+    loading?: boolean;
+    /** Number of skeleton rows when loading */
+    skeletonRows?: number;
+    /** Empty state content */
+    emptyState?: ReactNode;
+    /** On row click handler */
+    onRowClick?: (item: T) => void;
+    /** Current sort column */
+    sortBy?: string;
+    /** Sort direction */
+    sortOrder?: 'asc' | 'desc';
+    /** On sort change */
+    onSort?: (column: string, order: 'asc' | 'desc') => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Reusable data table component
+ */
+export declare function DataTable<T>({ columns, data, keyExtractor, loading, skeletonRows, emptyState, onRowClick, sortBy, sortOrder, onSort, className, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+interface PaginationProps {
+    /** Current page (1-indexed) */
+    page: number;
+    /** Total pages */
+    totalPages: number;
+    /** Total items */
+    totalItems: number;
+    /** Items per page */
+    pageSize: number;
+    /** On page change */
+    onPageChange: (page: number) => void;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Pagination controls
+ */
+export declare function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DataTable.d.ts.map

package/dist/admin/components/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/admin/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,UAAU,MAAM,CAAC,CAAC;IAChB,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAC/C,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,cAAc,CAAC,CAAC;IACxB,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,sBAAsB;IACtB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B,qBAAqB;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IACzD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,YAAgB,EAChB,UAAU,EACV,UAAU,EACV,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,cAAc,CAAC,CAAC,CAAC,2CA0FnB;AAED,UAAU,eAAe;IACvB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,SAAS,GACV,EAAE,eAAe,2CAoDjB"}

package/dist/admin/components/DataTable.js

@@ -0,0 +1,127 @@
+import { cn as e } from "../utils/cn.js";
+import { Button as t, Skeleton as n } from "./ui.js";
+import { ChevronLeft as r, ChevronRight as i, ChevronsLeft as a, ChevronsRight as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/admin/components/DataTable.tsx
+function l({ columns: t, data: r, keyExtractor: i, loading: a, skeletonRows: o = 5, emptyState: l, onRowClick: u, sortBy: d, sortOrder: f, onSort: p, className: m }) {
+	let h = (e) => {
+		if (!e.sortable || !p) return;
+		let t = d === e.key && f === "asc" ? "desc" : "asc";
+		p(e.key, t);
+	}, g = {
+		left: "text-left",
+		center: "text-center",
+		right: "text-right"
+	};
+	return /* @__PURE__ */ s("div", {
+		className: e("overflow-hidden rounded-lg border border-border", m),
+		children: /* @__PURE__ */ s("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ c("table", {
+				className: "w-full border-collapse",
+				children: [/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", {
+					className: "border-b border-border bg-muted/50",
+					children: t.map((t) => /* @__PURE__ */ s("th", {
+						className: e("px-4 py-3 text-sm font-medium text-muted-foreground", g[t.align || "left"], t.sortable && "cursor-pointer select-none hover:text-foreground", t.width),
+						style: t.width ? { width: t.width } : void 0,
+						onClick: () => h(t),
+						children: /* @__PURE__ */ c("div", {
+							className: "flex items-center gap-2",
+							children: [t.header, t.sortable && d === t.key && /* @__PURE__ */ s("span", {
+								className: "text-xs",
+								children: f === "asc" ? "↑" : "↓"
+							})]
+						})
+					}, t.key))
+				}) }), /* @__PURE__ */ s("tbody", { children: a ? Array.from({ length: o }).map((e, r) => /* @__PURE__ */ s("tr", {
+					className: "border-b border-border last:border-0",
+					children: t.map((e) => /* @__PURE__ */ s("td", {
+						className: "px-4 py-3",
+						children: /* @__PURE__ */ s(n, { className: "h-5 w-full" })
+					}, e.key))
+				}, r)) : r.length === 0 ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", {
+					colSpan: t.length,
+					className: "px-4 py-8",
+					children: l || /* @__PURE__ */ s("div", {
+						className: "text-center text-sm text-muted-foreground",
+						children: "No data available"
+					})
+				}) }) : r.map((n, r) => /* @__PURE__ */ s("tr", {
+					className: e("border-b border-border last:border-0 transition-colors", u && "cursor-pointer hover:bg-muted/50"),
+					onClick: () => u?.(n),
+					children: t.map((t) => /* @__PURE__ */ s("td", {
+						className: e("px-4 py-3 text-sm", g[t.align || "left"]),
+						children: t.render ? t.render(n, r) : String(n[t.key] ?? "")
+					}, t.key))
+				}, i(n))) })]
+			})
+		})
+	});
+}
+function u({ page: n, totalPages: l, totalItems: u, pageSize: d, onPageChange: f, className: p }) {
+	let m = (n - 1) * d + 1, h = Math.min(n * d, u);
+	return /* @__PURE__ */ c("div", {
+		className: e("flex items-center justify-between px-4 py-3", p),
+		children: [/* @__PURE__ */ c("div", {
+			className: "text-sm text-muted-foreground",
+			children: [
+				"Showing ",
+				m,
+				" to ",
+				h,
+				" of ",
+				u,
+				" results"
+			]
+		}), /* @__PURE__ */ c("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ s(t, {
+					variant: "outline",
+					size: "icon",
+					onClick: () => f(1),
+					disabled: n === 1,
+					"aria-label": "First page",
+					children: /* @__PURE__ */ s(a, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ s(t, {
+					variant: "outline",
+					size: "icon",
+					onClick: () => f(n - 1),
+					disabled: n === 1,
+					"aria-label": "Previous page",
+					children: /* @__PURE__ */ s(r, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "px-3 text-sm",
+					children: [
+						"Page ",
+						n,
+						" of ",
+						l
+					]
+				}),
+				/* @__PURE__ */ s(t, {
+					variant: "outline",
+					size: "icon",
+					onClick: () => f(n + 1),
+					disabled: n === l,
+					"aria-label": "Next page",
+					children: /* @__PURE__ */ s(i, { className: "h-4 w-4" })
+				}),
+				/* @__PURE__ */ s(t, {
+					variant: "outline",
+					size: "icon",
+					onClick: () => f(l),
+					disabled: n === l,
+					"aria-label": "Last page",
+					children: /* @__PURE__ */ s(o, { className: "h-4 w-4" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { l as DataTable, u as Pagination };
+
+//# sourceMappingURL=DataTable.js.map

package/dist/admin/components/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/admin/components/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\nimport { Button, Skeleton } from './ui';\nimport { cn } from '../utils/cn';\n\ninterface Column<T> {\n  /** Column key (used for accessing data) */\n  key: string;\n  /** Column header */\n  header: string;\n  /** Custom render function */\n  render?: (item: T, index: number) => ReactNode;\n  /** Column width */\n  width?: string;\n  /** Align content */\n  align?: 'left' | 'center' | 'right';\n  /** Sortable */\n  sortable?: boolean;\n}\n\ninterface DataTableProps<T> {\n  /** Column definitions */\n  columns: Column<T>[];\n  /** Data to display */\n  data: T[];\n  /** Key extractor for rows */\n  keyExtractor: (item: T) => string;\n  /** Loading state */\n  loading?: boolean;\n  /** Number of skeleton rows when loading */\n  skeletonRows?: number;\n  /** Empty state content */\n  emptyState?: ReactNode;\n  /** On row click handler */\n  onRowClick?: (item: T) => void;\n  /** Current sort column */\n  sortBy?: string;\n  /** Sort direction */\n  sortOrder?: 'asc' | 'desc';\n  /** On sort change */\n  onSort?: (column: string, order: 'asc' | 'desc') => void;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * Reusable data table component\n */\nexport function DataTable<T>({\n  columns,\n  data,\n  keyExtractor,\n  loading,\n  skeletonRows = 5,\n  emptyState,\n  onRowClick,\n  sortBy,\n  sortOrder,\n  onSort,\n  className,\n}: DataTableProps<T>) {\n  const handleSort = (column: Column<T>) => {\n    if (!column.sortable || !onSort) return;\n    const newOrder = sortBy === column.key && sortOrder === 'asc' ? 'desc' : 'asc';\n    onSort(column.key, newOrder);\n  };\n\n  const alignClasses = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  };\n\n  return (\n    <div className={cn('overflow-hidden rounded-lg border border-border', className)}>\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr className=\"border-b border-border bg-muted/50\">\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className={cn(\n                    'px-4 py-3 text-sm font-medium text-muted-foreground',\n                    alignClasses[column.align || 'left'],\n                    column.sortable && 'cursor-pointer select-none hover:text-foreground',\n                    column.width\n                  )}\n                  style={column.width ? { width: column.width } : undefined}\n                  onClick={() => handleSort(column)}\n                >\n                  <div className=\"flex items-center gap-2\">\n                    {column.header}\n                    {column.sortable && sortBy === column.key && (\n                      <span className=\"text-xs\">{sortOrder === 'asc' ? '↑' : '↓'}</span>\n                    )}\n                  </div>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {loading ? (\n              Array.from({ length: skeletonRows }).map((_, rowIndex) => (\n                <tr key={rowIndex} className=\"border-b border-border last:border-0\">\n                  {columns.map((column) => (\n                    <td key={column.key} className=\"px-4 py-3\">\n                      <Skeleton className=\"h-5 w-full\" />\n                    </td>\n                  ))}\n                </tr>\n              ))\n            ) : data.length === 0 ? (\n              <tr>\n                <td colSpan={columns.length} className=\"px-4 py-8\">\n                  {emptyState || (\n                    <div className=\"text-center text-sm text-muted-foreground\">\n                      No data available\n                    </div>\n                  )}\n                </td>\n              </tr>\n            ) : (\n              data.map((item, index) => (\n                <tr\n                  key={keyExtractor(item)}\n                  className={cn(\n                    'border-b border-border last:border-0 transition-colors',\n                    onRowClick && 'cursor-pointer hover:bg-muted/50'\n                  )}\n                  onClick={() => onRowClick?.(item)}\n                >\n                  {columns.map((column) => (\n                    <td\n                      key={column.key}\n                      className={cn('px-4 py-3 text-sm', alignClasses[column.align || 'left'])}\n                    >\n                      {column.render\n                        ? column.render(item, index)\n                        : String((item as Record<string, unknown>)[column.key] ?? '')}\n                    </td>\n                  ))}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n\ninterface PaginationProps {\n  /** Current page (1-indexed) */\n  page: number;\n  /** Total pages */\n  totalPages: number;\n  /** Total items */\n  totalItems: number;\n  /** Items per page */\n  pageSize: number;\n  /** On page change */\n  onPageChange: (page: number) => void;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * Pagination controls\n */\nexport function Pagination({\n  page,\n  totalPages,\n  totalItems,\n  pageSize,\n  onPageChange,\n  className,\n}: PaginationProps) {\n  const startItem = (page - 1) * pageSize + 1;\n  const endItem = Math.min(page * pageSize, totalItems);\n\n  return (\n    <div className={cn('flex items-center justify-between px-4 py-3', className)}>\n      <div className=\"text-sm text-muted-foreground\">\n        Showing {startItem} to {endItem} of {totalItems} results\n      </div>\n      <div className=\"flex items-center gap-1\">\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => onPageChange(1)}\n          disabled={page === 1}\n          aria-label=\"First page\"\n        >\n          <ChevronsLeft className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => onPageChange(page - 1)}\n          disabled={page === 1}\n          aria-label=\"Previous page\"\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n        <span className=\"px-3 text-sm\">\n          Page {page} of {totalPages}\n        </span>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => onPageChange(page + 1)}\n          disabled={page === totalPages}\n          aria-label=\"Next page\"\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={() => onPageChange(totalPages)}\n          disabled={page === totalPages}\n          aria-label=\"Last page\"\n        >\n          <ChevronsRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAgDA,SAAgB,EAAa,EAC3B,YACA,SACA,iBACA,YACA,kBAAe,GACf,eACA,eACA,WACA,cACA,WACA,gBACoB;CACpB,IAAM,KAAc,MAAsB;AACxC,MAAI,CAAC,EAAO,YAAY,CAAC,EAAQ;EACjC,IAAM,IAAW,MAAW,EAAO,OAAO,MAAc,QAAQ,SAAS;AACzE,IAAO,EAAO,KAAK,EAAS;IAGxB,IAAe;EACnB,MAAM;EACN,QAAQ;EACR,OAAO;EACR;AAED,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,mDAAmD,EAAU;YAC9E,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAQ,KAAK,MACZ,kBAAC,MAAD;MAEE,WAAW,EACT,uDACA,EAAa,EAAO,SAAS,SAC7B,EAAO,YAAY,oDACnB,EAAO,MACR;MACD,OAAO,EAAO,QAAQ,EAAE,OAAO,EAAO,OAAO,GAAG,KAAA;MAChD,eAAe,EAAW,EAAO;gBAEjC,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAO,QACP,EAAO,YAAY,MAAW,EAAO,OACpC,kBAAC,QAAD;QAAM,WAAU;kBAAW,MAAc,QAAQ,MAAM;QAAW,CAAA,CAEhE;;MACH,EAhBE,EAAO,IAgBT,CACL;KACC,CAAA,EACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,IACC,MAAM,KAAK,EAAE,QAAQ,GAAc,CAAC,CAAC,KAAK,GAAG,MAC3C,kBAAC,MAAD;KAAmB,WAAU;eAC1B,EAAQ,KAAK,MACZ,kBAAC,MAAD;MAAqB,WAAU;gBAC7B,kBAAC,GAAD,EAAU,WAAU,cAAe,CAAA;MAChC,EAFI,EAAO,IAEX,CACL;KACC,EANI,EAMJ,CACL,GACA,EAAK,WAAW,IAClB,kBAAC,MAAD,EAAA,UACE,kBAAC,MAAD;KAAI,SAAS,EAAQ;KAAQ,WAAU;eACpC,KACC,kBAAC,OAAD;MAAK,WAAU;gBAA4C;MAErD,CAAA;KAEL,CAAA,EACF,CAAA,GAEL,EAAK,KAAK,GAAM,MACd,kBAAC,MAAD;KAEE,WAAW,EACT,0DACA,KAAc,mCACf;KACD,eAAe,IAAa,EAAK;eAEhC,EAAQ,KAAK,MACZ,kBAAC,MAAD;MAEE,WAAW,EAAG,qBAAqB,EAAa,EAAO,SAAS,QAAQ;gBAEvE,EAAO,SACJ,EAAO,OAAO,GAAM,EAAM,GAC1B,OAAQ,EAAiC,EAAO,QAAQ,GAAG;MAC5D,EANE,EAAO,IAMT,CACL;KACC,EAjBE,EAAa,EAAK,CAiBpB,CACL,EAEE,CAAA,CACF;;GACJ,CAAA;EACF,CAAA;;AAsBV,SAAgB,EAAW,EACzB,SACA,eACA,eACA,aACA,iBACA,gBACkB;CAClB,IAAM,KAAa,IAAO,KAAK,IAAW,GACpC,IAAU,KAAK,IAAI,IAAO,GAAU,EAAW;AAErD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,+CAA+C,EAAU;YAA5E,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IAA+C;IACpC;IAAU;IAAK;IAAQ;IAAK;IAAW;IAC5C;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe,EAAa,EAAE;KAC9B,UAAU,MAAS;KACnB,cAAW;eAEX,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;KAC7B,CAAA;IACT,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe,EAAa,IAAO,EAAE;KACrC,UAAU,MAAS;KACnB,cAAW;eAEX,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;KAC5B,CAAA;IACT,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAA+B;MACvB;MAAK;MAAK;MACX;;IACP,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe,EAAa,IAAO,EAAE;KACrC,UAAU,MAAS;KACnB,cAAW;eAEX,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;KAC7B,CAAA;IACT,kBAAC,GAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe,EAAa,EAAW;KACvC,UAAU,MAAS;KACnB,cAAW;eAEX,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;KAC9B,CAAA;IACL;KACF"}

package/dist/admin/components/FormSheet.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+/**
+ * FormSheet props
+ */
+export interface FormSheetProps {
+    /** Whether the sheet is open */
+    open: boolean;
+    /** Callback when the sheet should close */
+    onClose: () => void;
+    /** Title of the sheet */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Form content */
+    children: React.ReactNode;
+    /** Width of the sheet */
+    width?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Optional footer actions */
+    footer?: React.ReactNode;
+}
+/**
+ * FormSheet - Slide-over panel for forms
+ *
+ * A side panel component for displaying forms that slides in from the right.
+ * Includes backdrop overlay, header with close button, and optional footer.
+ */
+export declare function FormSheet({ open, onClose, title, description, children, width, footer, }: FormSheetProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * FormSheetFooter props
+ */
+export interface FormSheetFooterProps {
+    /** Primary action button text */
+    submitLabel?: string;
+    /** Cancel button text */
+    cancelLabel?: string;
+    /** Callback for cancel */
+    onCancel: () => void;
+    /** Whether form is submitting */
+    isSubmitting?: boolean;
+    /** Whether submit is disabled */
+    disabled?: boolean;
+    /** Form ID to connect submit button */
+    formId?: string;
+    /** Callback for submit (if not using form) */
+    onSubmit?: () => void;
+    /** Variant for submit button */
+    submitVariant?: 'default' | 'destructive';
+}
+/**
+ * FormSheetFooter - Standard footer for FormSheet with cancel/submit buttons
+ */
+export declare function FormSheetFooter({ submitLabel, cancelLabel, onCancel, isSubmitting, disabled, formId, onSubmit, submitVariant, }: FormSheetFooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FormSection - Group related form fields
+ */
+export interface FormSectionProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Form fields */
+    children: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+export declare function FormSection({ title, description, children, className }: FormSectionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FormRow - Horizontal row for form fields
+ */
+export interface FormRowProps {
+    /** Form fields */
+    children: React.ReactNode;
+    /** Number of columns */
+    cols?: 2 | 3 | 4;
+    /** Additional className */
+    className?: string;
+}
+export declare function FormRow({ children, cols, className }: FormRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormSheet.d.ts.map

package/dist/admin/components/FormSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSheet.d.ts","sourceRoot":"","sources":["../../../src/admin/components/FormSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,2CAA2C;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAClC,8BAA8B;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AASD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAY,EACZ,MAAM,GACP,EAAE,cAAc,kDAmEhB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gCAAgC;IAChC,aAAa,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC3C;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAoB,EACpB,WAAsB,EACtB,QAAQ,EACR,YAAoB,EACpB,QAAgB,EAChB,MAAM,EACN,QAAQ,EACR,aAAyB,GAC1B,EAAE,oBAAoB,2CAkBtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAYxF;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,kBAAkB;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAQ,EAAE,SAAS,EAAE,EAAE,YAAY,2CAOtE"}