@pattern-stack/frontend-patterns 0.0.4 → 0.0.5

package/dist/index.js

@@ -265,6 +265,175 @@ const tooltipContent = {
   profile: "Profile",
   account: "Account settings"
 };
+class MetricCalculationEngine {
+  static calculateMetric(config, data, previousData) {
+    const currentValue = this.aggregateValue(config, data);
+    const previousValue = previousData ? this.aggregateValue(config, previousData) : void 0;
+    const trend = this.calculateTrend(currentValue, previousValue);
+    const formattedValue = this.formatValue(currentValue, config.format, config.type);
+    const target = typeof config.target === "function" ? config.target(data) : config.target;
+    return {
+      current: currentValue,
+      previous: previousValue,
+      trend,
+      target,
+      formattedValue
+    };
+  }
+  static aggregateValue(config, data) {
+    if (!data.length) return 0;
+    const values = data.map((item) => {
+      const value = this.extractValue(item, config.key);
+      return typeof value === "number" ? value : 0;
+    }).filter((value) => !isNaN(value));
+    if (!values.length) return 0;
+    switch (config.aggregation || "sum") {
+      case "sum":
+        return values.reduce((sum, value) => sum + value, 0);
+      case "avg":
+        return values.reduce((sum, value) => sum + value, 0) / values.length;
+      case "count":
+        return values.length;
+      case "min":
+        return Math.min(...values);
+      case "max":
+        return Math.max(...values);
+      default:
+        return values.reduce((sum, value) => sum + value, 0);
+    }
+  }
+  static extractValue(item, key) {
+    return key.split(".").reduce((obj, k) => obj == null ? void 0 : obj[k], item);
+  }
+  static calculateTrend(current, previous) {
+    if (previous === void 0 || previous === 0) return "neutral";
+    const change = (current - previous) / Math.abs(previous) * 100;
+    if (change > 1) return "up";
+    if (change < -1) return "down";
+    return "neutral";
+  }
+  static formatValue(value, format, type) {
+    let formatted = value;
+    if ((format == null ? void 0 : format.decimals) !== void 0) {
+      formatted = Number(value.toFixed(format.decimals));
+    }
+    let result = formatted.toString();
+    if ((format == null ? void 0 : format.thousands) !== false && Math.abs(formatted) >= 1e3) {
+      result = formatted.toLocaleString();
+    }
+    switch (type) {
+      case "currency":
+        result = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          minimumFractionDigits: (format == null ? void 0 : format.decimals) ?? 2,
+          maximumFractionDigits: (format == null ? void 0 : format.decimals) ?? 2
+        }).format(formatted);
+        break;
+      case "percentage":
+        result = `${formatted.toFixed((format == null ? void 0 : format.decimals) ?? 1)}%`;
+        break;
+      case "duration":
+        result = this.formatDuration(formatted);
+        break;
+      case "ratio":
+        result = `${formatted.toFixed((format == null ? void 0 : format.decimals) ?? 2)}:1`;
+        break;
+      default:
+        if (format == null ? void 0 : format.prefix) result = format.prefix + result;
+        if (format == null ? void 0 : format.suffix) result = result + format.suffix;
+    }
+    return result;
+  }
+  static formatDuration(minutes) {
+    const hours = Math.floor(minutes / 60);
+    const mins = Math.floor(minutes % 60);
+    if (hours > 0) {
+      return `${hours}h ${mins}m`;
+    }
+    return `${mins}m`;
+  }
+  static calculateTrendData(config, data, dateField = "date", periods = 12) {
+    const groupedData = this.groupByPeriod(data, dateField);
+    const sortedDates = Object.keys(groupedData).sort();
+    return sortedDates.slice(-periods).map((date) => ({
+      date,
+      value: this.aggregateValue(config, groupedData[date]),
+      label: this.formatDateLabel(date)
+    }));
+  }
+  static groupByPeriod(data, dateField) {
+    return data.reduce((groups, item) => {
+      const date = this.extractValue(item, dateField);
+      if (!date) return groups;
+      const period = new Date(date).toISOString().split("T")[0];
+      if (!groups[period]) groups[period] = [];
+      groups[period].push(item);
+      return groups;
+    }, {});
+  }
+  static formatDateLabel(dateString) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric"
+    });
+  }
+  static calculateCategoryBreakdown(data, categoryField, valueField, maxCategories = 8) {
+    const groups = data.reduce((acc, item) => {
+      const category = String(this.extractValue(item, categoryField) || "Unknown");
+      const value = this.extractValue(item, valueField) || 0;
+      if (!acc[category]) acc[category] = 0;
+      acc[category] += typeof value === "number" ? value : 0;
+      return acc;
+    }, {});
+    const total = Object.values(groups).reduce((sum, value) => sum + value, 0);
+    let categories = Object.entries(groups).map(([category, value]) => ({
+      category,
+      value,
+      percentage: total > 0 ? value / total * 100 : 0
+    })).sort((a, b) => b.value - a.value);
+    if (categories.length > maxCategories) {
+      const topCategories = categories.slice(0, maxCategories - 1);
+      const otherValue = categories.slice(maxCategories - 1).reduce((sum, cat) => sum + cat.value, 0);
+      topCategories.push({
+        category: "Other",
+        value: otherValue,
+        percentage: total > 0 ? otherValue / total * 100 : 0
+      });
+      categories = topCategories;
+    }
+    return categories;
+  }
+  static detectInsights(metrics, thresholds = {}) {
+    const insights = [];
+    for (const [key, metric] of Object.entries(metrics)) {
+      const threshold = thresholds[key];
+      if (metric.target && metric.current < metric.target * 0.8) {
+        insights.push({
+          type: "negative",
+          message: `${key} is significantly below target`,
+          value: metric.current
+        });
+      }
+      if (metric.trend === "up" && metric.previous && metric.current > metric.previous * 1.2) {
+        insights.push({
+          type: "positive",
+          message: `${key} showing strong growth`,
+          value: metric.current
+        });
+      }
+      if (threshold && metric.current >= threshold.critical) {
+        insights.push({
+          type: "negative",
+          message: `${key} has reached critical threshold`,
+          value: metric.current
+        });
+      }
+    }
+    return insights.slice(0, 5);
+  }
+}
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -1286,6 +1455,83 @@ const DataBadge = ({
   }
   return badge;
 };
+const getStageStatus = (stage) => {
+  switch (stage) {
+    case "Closed Won":
+      return "success";
+    case "Negotiation":
+      return "warning";
+    case "Proposal Sent":
+      return "info";
+    case "Qualified":
+      return "info";
+    case "Discovery":
+      return "neutral";
+    default:
+      return "neutral";
+  }
+};
+const SalesPanel = ({
+  sales,
+  onSaleClick,
+  onClose
+}) => {
+  const topDeals = sales.slice(0, 5);
+  const totalValue = sales.reduce((sum, sale) => sum + sale.amount, 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed right-0 top-16 h-[calc(100vh-4rem)] w-72 bg-background border-l border-border shadow-lg flex flex-col z-30", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "font-medium flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Target, { className: "w-4 h-4" }),
+        "Pipeline"
+      ] }),
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, children: "×" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Total Value" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-green-600", children: [
+          "$",
+          totalValue.toLocaleString()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Active Deals" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: sales.length })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium mb-3", children: "Recent Opportunities" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: topDeals.map((sale) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "p-2 border border-border rounded-md hover:bg-muted/50 cursor-pointer transition-colors",
+          onClick: () => onSaleClick == null ? void 0 : onSaleClick(sale),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: sale.customer }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: sale.product })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right ml-2", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-green-600", children: [
+                "$",
+                sale.amount.toLocaleString()
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DataBadge, { variant: "status", status: getStageStatus(sale.stage), children: sale.stage }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: sale.salesperson })
+            ] })
+          ]
+        },
+        sale.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-4 h-4 mr-2" }),
+      "View All Deals"
+    ] }) })
+  ] });
+};
 const StatCard = ({
   title,
   value,
@@ -5619,7 +5865,11 @@ const Sidebar = ({ className }) => {
   const items = [
     { value: "showcase", label: "Showcase", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "w-5 h-5" }), path: "/showcase", category: 5 },
     { value: "admin-dashboard", label: "Admin Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "w-5 h-5" }), path: "/admin/dashboard", category: 2 },
-    { value: "admin-users", label: "User Management", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "w-5 h-5" }), path: "/admin/users", category: 3 }
+    { value: "admin-users", label: "User Management", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "w-5 h-5" }), path: "/admin/users", category: 3 },
+    { value: "admin-sales", label: "Sales Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-5 h-5" }), path: "/admin/sales", category: 4 },
+    { value: "entity-performance", label: "Performance Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "w-5 h-5" }), path: "/entity/performance", category: 6 },
+    { value: "entity-management", label: "Entity Management", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "w-5 h-5" }), path: "/entity/management", category: 7 },
+    { value: "entity-template", label: "Template Example", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layout, { className: "w-5 h-5" }), path: "/entity/template-example", category: 1 }
   ];
   const handleNavigation = (path) => {
     if (path.includes("?")) {
@@ -5747,6 +5997,28 @@ const AppLayout = () => {
     )
   ] });
 };
+const DashboardWithSidePanel = ({
+  children,
+  sidePanel,
+  showSidePanel = false,
+  sidePanelWidth = 72,
+  className
+}) => {
+  const marginClass = `pr-${sidePanelWidth}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative h-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "transition-all duration-300",
+          showSidePanel ? marginClass : ""
+        ),
+        children
+      }
+    ),
+    showSidePanel && sidePanel
+  ] });
+};
 const SectionHeader = ({
   title,
   description,
@@ -7759,6 +8031,1636 @@ const AdminDetailTemplate = ({
     ] }) }) })
   ] });
 };
+const MetricsOverviewPanel = ({
+  metrics,
+  data,
+  previousData,
+  isLoading = false,
+  onMetricClick,
+  className,
+  layout = "grid",
+  columns = 4,
+  category,
+  renderCustomMetric,
+  renderHeader,
+  renderFooter,
+  headerSlot,
+  footerSlot
+}) => {
+  const calculatedMetrics = React.useMemo(() => {
+    if (isLoading || !(data == null ? void 0 : data.length) || !(metrics == null ? void 0 : metrics.length)) return {};
+    return metrics.reduce((acc, metric) => {
+      acc[metric.key] = MetricCalculationEngine.calculateMetric(
+        metric,
+        data,
+        previousData
+      );
+      return acc;
+    }, {});
+  }, [metrics, data, previousData, isLoading]);
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case "horizontal":
+        return "flex flex-wrap gap-4";
+      case "vertical":
+        return "flex flex-col gap-4";
+      case "grid":
+      default:
+        return cn(
+          "grid gap-4",
+          {
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4": columns === 4,
+            "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3": columns === 3,
+            "grid-cols-1 sm:grid-cols-2": columns === 2
+          }
+        );
+    }
+  };
+  const renderMetricCard = (metric, index) => {
+    if (renderCustomMetric) {
+      const customContent = renderCustomMetric(metric, calculatedMetrics[metric.key], index);
+      if (customContent) return customContent;
+    }
+    const metricValue = calculatedMetrics[metric.key];
+    if (isLoading || !metricValue) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        StatCard,
+        {
+          title: metric.label,
+          value: "",
+          isLoading: true,
+          category,
+          icon: metric.icon ? /* @__PURE__ */ jsxRuntime.jsx(metric.icon, {}) : void 0
+        },
+        metric.key
+      );
+    }
+    const trend = metricValue.trend !== "neutral" && metricValue.previous ? {
+      value: Number(((metricValue.current - metricValue.previous) / Math.abs(metricValue.previous) * 100).toFixed(1)),
+      label: "vs last period"
+    } : void 0;
+    const formatTargetValue = (value) => {
+      switch (metric.type) {
+        case "currency":
+          return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD"
+          }).format(value);
+        case "percentage":
+          return `${value}%`;
+        default:
+          return value.toString();
+      }
+    };
+    const subtitle = metricValue.target ? `Target: ${formatTargetValue(metricValue.target)}` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StatCard,
+      {
+        title: metric.label,
+        value: metricValue.formattedValue,
+        subtitle,
+        trend,
+        category,
+        icon: metric.icon ? /* @__PURE__ */ jsxRuntime.jsx(metric.icon, {}) : void 0,
+        onClick: onMetricClick ? () => onMetricClick(metric, metricValue) : void 0,
+        valueTooltip: `Current: ${metricValue.formattedValue}${metricValue.previous ? ` | Previous: ${formatTargetValue(metricValue.previous)}` : ""}`,
+        iconTooltip: `View ${metric.label} details`
+      },
+      metric.key
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", className), "data-component-name": "MetricsOverviewPanel", children: [
+    headerSlot,
+    renderHeader && renderHeader(),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: getLayoutClasses(), children: metrics.map((metric, index) => renderMetricCard(metric, index)) }),
+    renderFooter && renderFooter(),
+    footerSlot
+  ] });
+};
+const MetricsOverviewWithInsightsPanel = ({
+  showInsights = true,
+  insightThresholds,
+  renderInsight,
+  ...props
+}) => {
+  const safeMetrics = props.metrics || [];
+  const safeData = props.data || [];
+  const calculatedMetrics = React.useMemo(() => {
+    if (props.isLoading || !safeData.length || !safeMetrics.length) return {};
+    return safeMetrics.reduce((acc, metric) => {
+      acc[metric.key] = MetricCalculationEngine.calculateMetric(
+        metric,
+        safeData,
+        props.previousData
+      );
+      return acc;
+    }, {});
+  }, [safeMetrics, safeData, props.previousData, props.isLoading]);
+  const insights = React.useMemo(() => {
+    if (!showInsights || props.isLoading || Object.keys(calculatedMetrics).length === 0) {
+      return [];
+    }
+    return MetricCalculationEngine.detectInsights(calculatedMetrics, insightThresholds);
+  }, [calculatedMetrics, showInsights, insightThresholds, props.isLoading]);
+  const renderInsightsSection = () => {
+    if (!showInsights || insights.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Key Insights" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: insights.map((insight, index) => {
+        if (renderInsight) {
+          const customInsight = renderInsight(insight, index);
+          if (customInsight) return customInsight;
+        }
+        const colorClass = {
+          positive: "text-status-success",
+          negative: "text-status-error",
+          neutral: "text-muted-foreground"
+        }[insight.type];
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("text-sm", colorClass),
+            children: [
+              "• ",
+              insight.message
+            ]
+          },
+          index
+        );
+      }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MetricsOverviewPanel,
+    {
+      ...props,
+      footerSlot: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        renderInsightsSection(),
+        props.footerSlot
+      ] })
+    }
+  );
+};
+const EntityListPanel = ({
+  config,
+  data,
+  isLoading = false,
+  onRowClick,
+  onAction,
+  className,
+  columns: customColumns,
+  showSearch = true,
+  showPagination = true,
+  pageSize = 10,
+  searchPlaceholder,
+  enableSelection = false,
+  enableBulkActions = false,
+  enableExport = true,
+  enableFiltering = false,
+  enableRefresh = true,
+  renderToolbar,
+  renderBulkActions,
+  renderCustomColumn,
+  renderEmptyState,
+  headerSlot,
+  footerSlot,
+  onExport,
+  onRefresh
+}) => {
+  const [selectedItems, setSelectedItems] = React.useState([]);
+  const [showFilters, setShowFilters] = React.useState(false);
+  const tableColumns = React.useMemo(() => {
+    if (customColumns) return customColumns;
+    const generatedColumns = [];
+    if (enableSelection) {
+      generatedColumns.push({
+        key: "__selection",
+        header: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: selectedItems.length === data.length && data.length > 0,
+            onChange: (e) => {
+              if (e.target.checked) {
+                setSelectedItems([...data]);
+              } else {
+                setSelectedItems([]);
+              }
+            }
+          }
+        ),
+        cell: (item) => /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: selectedItems.some((selected) => selected.id === item.id),
+            onChange: (e) => {
+              if (e.target.checked) {
+                setSelectedItems((prev) => [...prev, item]);
+              } else {
+                setSelectedItems((prev) => prev.filter((selected) => selected.id !== item.id));
+              }
+            }
+          }
+        ),
+        sortable: false,
+        width: "50px"
+      });
+    }
+    if (data.length > 0) {
+      const sampleItem = data[0];
+      Object.keys(sampleItem).forEach((key) => {
+        if (key === "id") return;
+        const isStatus = key.toLowerCase().includes("status");
+        const isCategory = key.toLowerCase().includes("category") || key.toLowerCase().includes("type");
+        const isDate = key.toLowerCase().includes("date") || key.toLowerCase().includes("time");
+        const isAmount = key.toLowerCase().includes("amount") || key.toLowerCase().includes("price") || key.toLowerCase().includes("cost");
+        generatedColumns.push({
+          key,
+          header: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, " $1"),
+          type: isStatus ? "status" : isCategory ? "category" : "default",
+          sortable: true,
+          cell: renderCustomColumn ? (item) => {
+            const column = { key, header: "", type: isStatus ? "status" : isCategory ? "category" : "default" };
+            const customContent = renderCustomColumn(column, item);
+            if (customContent) return customContent;
+            const value = item[key];
+            if (isDate && value) {
+              return new Date(value).toLocaleDateString();
+            }
+            if (isAmount && typeof value === "number") {
+              return new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD"
+              }).format(value);
+            }
+            return (value == null ? void 0 : value.toString()) || "-";
+          } : void 0
+        });
+      });
+    }
+    return generatedColumns;
+  }, [customColumns, data, enableSelection, selectedItems, renderCustomColumn]);
+  const handleExport = () => {
+    if (onExport) {
+      onExport(selectedItems.length > 0 ? selectedItems : data);
+    } else {
+      const headers = tableColumns.filter((col) => col.key !== "__selection").map((col) => col.key);
+      const csvContent = [
+        headers.join(","),
+        ...(selectedItems.length > 0 ? selectedItems : data).map(
+          (item) => headers.map((header) => item[header] || "").join(",")
+        )
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${config.display.title.toLowerCase().replace(/\s+/g, "-")}-export.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  };
+  const renderToolbarSection = () => {
+    var _a;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground", children: config.display.title }),
+        config.display.description && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "text-xs", children: [
+          data.length,
+          " items"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        renderToolbar && renderToolbar(),
+        enableFiltering && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => setShowFilters(!showFilters),
+            className: cn(showFilters && "bg-muted"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-4 h-4 mr-2" }),
+              "Filters"
+            ]
+          }
+        ),
+        enableRefresh && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onRefresh,
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: cn("w-4 h-4 mr-2", isLoading && "animate-spin") }),
+              "Refresh"
+            ]
+          }
+        ),
+        enableExport && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleExport,
+            disabled: data.length === 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-2" }),
+              "Export"
+            ]
+          }
+        ),
+        (_a = config.actions) == null ? void 0 : _a.filter((action) => action.type === "primary").map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            size: "sm",
+            onClick: () => onAction == null ? void 0 : onAction(action, []),
+            disabled: isLoading,
+            children: [
+              action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "w-4 h-4 mr-2" }),
+              action.label
+            ]
+          },
+          action.label
+        ))
+      ] })
+    ] });
+  };
+  const renderBulkActionsSection = () => {
+    var _a;
+    if (!enableBulkActions || selectedItems.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between bg-muted/50 p-3 rounded-md mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          selectedItems.length,
+          " items selected"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setSelectedItems([]),
+            children: "Clear selection"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        renderBulkActions && renderBulkActions(selectedItems),
+        (_a = config.actions) == null ? void 0 : _a.filter((action) => action.type !== "primary").map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: action.type === "danger" ? "destructive" : "outline",
+            size: "sm",
+            onClick: () => onAction == null ? void 0 : onAction(action, selectedItems),
+            children: [
+              action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "w-4 h-4 mr-2" }),
+              action.label
+            ]
+          },
+          action.label
+        ))
+      ] })
+    ] });
+  };
+  const renderEmptyStateSection = () => {
+    var _a;
+    if (data.length > 0) return null;
+    if (renderEmptyState) {
+      return renderEmptyState();
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground mb-4", children: [
+        "No ",
+        config.display.title.toLowerCase(),
+        " found"
+      ] }),
+      ((_a = config.actions) == null ? void 0 : _a.find((action) => action.type === "primary")) && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => {
+        var _a2;
+        const primaryAction = (_a2 = config.actions) == null ? void 0 : _a2.find((action) => action.type === "primary");
+        if (primaryAction) onAction == null ? void 0 : onAction(primaryAction, []);
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4 mr-2" }),
+        "Add ",
+        config.display.title.slice(0, -1)
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("p-6", className), category: config.display.category, "data-component-name": "EntityListPanel", children: [
+    headerSlot,
+    renderToolbarSection(),
+    renderBulkActionsSection(),
+    data.length === 0 ? renderEmptyStateSection() : /* @__PURE__ */ jsxRuntime.jsx(
+      DataTable,
+      {
+        data,
+        columns: tableColumns,
+        isLoading,
+        showSearch,
+        showPagination,
+        pageSize,
+        searchPlaceholder: searchPlaceholder || `Search ${config.display.title.toLowerCase()}...`,
+        onRowClick,
+        hover: !!onRowClick,
+        emptyMessage: `No ${config.display.title.toLowerCase()} found`
+      }
+    ),
+    footerSlot
+  ] });
+};
+const TrendAnalysisPanel = ({
+  metrics,
+  data,
+  temporal,
+  isLoading = false,
+  className,
+  category,
+  defaultChartType = "line",
+  dateField = "date",
+  enablePeriodSelection = true,
+  enableChartTypeSelection = true,
+  enableMetricSelection = true,
+  showComparisons = true,
+  renderHeader,
+  renderFooter,
+  renderCustomChart,
+  headerSlot,
+  footerSlot,
+  onMetricChange,
+  onPeriodChange,
+  onChartTypeChange,
+  onExport
+}) => {
+  const [selectedMetric, setSelectedMetric] = React.useState(metrics[0]);
+  const [selectedPeriod, setSelectedPeriod] = React.useState((temporal == null ? void 0 : temporal.defaultCycle) || "monthly");
+  const [selectedChartType, setSelectedChartType] = React.useState(defaultChartType);
+  const [showForecast, setShowForecast] = React.useState(false);
+  const trendData = React.useMemo(() => {
+    if (!selectedMetric || !data.length) return [];
+    const periods = selectedPeriod === "yearly" ? 5 : selectedPeriod === "quarterly" ? 8 : selectedPeriod === "monthly" ? 12 : selectedPeriod === "weekly" ? 12 : 30;
+    return MetricCalculationEngine.calculateTrendData(
+      selectedMetric,
+      data,
+      dateField,
+      periods
+    );
+  }, [selectedMetric, data, dateField, selectedPeriod]);
+  const chartData = React.useMemo(() => {
+    return trendData.map((point) => ({
+      label: point.label || point.date,
+      value: point.value,
+      category
+    }));
+  }, [trendData, category]);
+  const trendPercentage = React.useMemo(() => {
+    if (chartData.length < 2) return null;
+    const first = chartData[0].value;
+    const last = chartData[chartData.length - 1].value;
+    if (first === 0) return null;
+    return (last - first) / Math.abs(first) * 100;
+  }, [chartData]);
+  const forecastData = React.useMemo(() => {
+    var _a, _b;
+    if (!showForecast || !((_a = temporal == null ? void 0 : temporal.forecasting) == null ? void 0 : _a.enabled) || chartData.length < 3) {
+      return [];
+    }
+    const periods = ((_b = temporal == null ? void 0 : temporal.forecasting) == null ? void 0 : _b.periods) || 3;
+    const lastValue = chartData[chartData.length - 1].value;
+    const trend = trendPercentage ? trendPercentage / 100 : 0;
+    return Array.from({ length: periods }, (_, index) => ({
+      label: `Future ${index + 1}`,
+      value: lastValue * (1 + trend * (index + 1) / chartData.length),
+      category: 8
+      // Use category 8 for forecast
+    }));
+  }, [showForecast, temporal == null ? void 0 : temporal.forecasting, chartData, trendPercentage]);
+  const combinedChartData = React.useMemo(() => {
+    if (forecastData.length === 0) return chartData;
+    return [...chartData, ...forecastData];
+  }, [chartData, forecastData]);
+  const handleMetricChange = (metricKey) => {
+    const metric = metrics.find((m) => m.key === metricKey);
+    if (metric) {
+      setSelectedMetric(metric);
+      onMetricChange == null ? void 0 : onMetricChange(metric);
+    }
+  };
+  const handlePeriodChange = (period) => {
+    setSelectedPeriod(period);
+    onPeriodChange == null ? void 0 : onPeriodChange(period);
+  };
+  const handleChartTypeChange = (chartType) => {
+    setSelectedChartType(chartType);
+    onChartTypeChange == null ? void 0 : onChartTypeChange(chartType);
+  };
+  const handleExport = () => {
+    if (onExport) {
+      onExport(combinedChartData, selectedMetric);
+    } else {
+      const csvContent = [
+        "Date,Value",
+        ...combinedChartData.map((point) => `${point.label},${point.value}`)
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${selectedMetric.label}-trend-data.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  };
+  const renderControls = () => {
+    var _a;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-4 h-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground", children: "Trend Analysis" })
+        ] }),
+        trendPercentage !== null && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: trendPercentage > 0 ? "default" : "destructive", children: [
+          trendPercentage > 0 ? "+" : "",
+          trendPercentage.toFixed(1),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        enableMetricSelection && metrics.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            value: selectedMetric.key,
+            onValueChange: handleMetricChange,
+            children: metrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: metric.key, children: metric.label }, metric.key))
+          }
+        ),
+        enablePeriodSelection && /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            value: selectedPeriod,
+            onValueChange: (value) => handlePeriodChange(value),
+            children: ((temporal == null ? void 0 : temporal.cycles) || ["daily", "weekly", "monthly", "quarterly", "yearly"]).map((cycle) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: cycle, children: cycle.charAt(0).toUpperCase() + cycle.slice(1) }, cycle))
+          }
+        ),
+        enableChartTypeSelection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: selectedChartType === "line" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => handleChartTypeChange("line"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LineChart, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: selectedChartType === "bar" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => handleChartTypeChange("bar"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: selectedChartType === "area" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => handleChartTypeChange("area"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AreaChart, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        ((_a = temporal == null ? void 0 : temporal.forecasting) == null ? void 0 : _a.enabled) && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: showForecast ? "default" : "outline",
+            size: "sm",
+            onClick: () => setShowForecast(!showForecast),
+            children: "Forecast"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleExport,
+            disabled: chartData.length === 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] });
+  };
+  const renderChart = () => {
+    if (renderCustomChart) {
+      const customChart = renderCustomChart(selectedMetric, combinedChartData, selectedChartType);
+      if (customChart) return customChart;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Chart,
+      {
+        title: selectedMetric.label,
+        subtitle: `${selectedPeriod} trend analysis`,
+        data: combinedChartData,
+        type: selectedChartType,
+        category,
+        showTrend: true,
+        trend: trendPercentage !== null ? {
+          value: trendPercentage,
+          label: "overall trend"
+        } : void 0,
+        height: "large",
+        isLoading,
+        noWrapper: true,
+        showLegend: forecastData.length > 0
+      }
+    );
+  };
+  const renderComparisons = () => {
+    var _a, _b;
+    if (!showComparisons || !(temporal == null ? void 0 : temporal.enableComparisons) || chartData.length === 0) {
+      return null;
+    }
+    const currentValue = ((_a = chartData[chartData.length - 1]) == null ? void 0 : _a.value) || 0;
+    const previousValue = ((_b = chartData[chartData.length - 2]) == null ? void 0 : _b.value) || 0;
+    const periodChange = previousValue !== 0 ? (currentValue - previousValue) / Math.abs(previousValue) * 100 : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t pt-4 mt-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-foreground mb-3", children: "Period Comparisons" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold", children: currentValue.toFixed(0) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Current" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold", children: previousValue.toFixed(0) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Previous" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
+            "text-2xl font-bold",
+            periodChange > 0 ? "text-status-success" : periodChange < 0 ? "text-status-error" : "text-muted-foreground"
+          ), children: [
+            periodChange > 0 ? "+" : "",
+            periodChange.toFixed(1),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Change" })
+        ] })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("p-6", className), category, "data-component-name": "TrendAnalysisPanel", children: [
+    headerSlot,
+    renderHeader && renderHeader(),
+    renderControls(),
+    renderChart(),
+    renderComparisons(),
+    renderFooter && renderFooter(),
+    footerSlot
+  ] });
+};
+const CategoryBreakdownPanel = ({
+  data,
+  categoryConfig,
+  valueField,
+  isLoading = false,
+  className,
+  category,
+  title = "Category Breakdown",
+  subtitle,
+  defaultView = "both",
+  defaultChartType = "pie",
+  maxCategories = 8,
+  showPercentages = true,
+  enableDrillDown = true,
+  renderHeader,
+  renderFooter,
+  renderCustomCategory,
+  renderDrillDownContent,
+  headerSlot,
+  footerSlot,
+  onCategoryClick,
+  onDrillDown,
+  onExport
+}) => {
+  const [currentView, setCurrentView] = React.useState(defaultView);
+  const [chartType, setChartType] = React.useState(defaultChartType);
+  const [expandedCategories, setExpandedCategories] = React.useState(/* @__PURE__ */ new Set());
+  const [drillDownLevel, setDrillDownLevel] = React.useState(0);
+  const [drillDownPath, setDrillDownPath] = React.useState([]);
+  const categoryBreakdown = React.useMemo(() => {
+    var _a;
+    if (!data.length) return [];
+    const currentCategoryField = ((_a = categoryConfig == null ? void 0 : categoryConfig.hierarchy) == null ? void 0 : _a[drillDownLevel]) || (categoryConfig == null ? void 0 : categoryConfig.defaultGroupBy) || "category";
+    return MetricCalculationEngine.calculateCategoryBreakdown(
+      data,
+      currentCategoryField,
+      valueField,
+      maxCategories
+    );
+  }, [data, categoryConfig, valueField, maxCategories, drillDownLevel]);
+  const chartData = React.useMemo(() => {
+    return categoryBreakdown.map((item, index) => ({
+      label: item.category,
+      value: item.value,
+      category: index % 8 + 1
+    }));
+  }, [categoryBreakdown]);
+  const totalValue = React.useMemo(() => {
+    return categoryBreakdown.reduce((sum, item) => sum + item.value, 0);
+  }, [categoryBreakdown]);
+  const handleCategoryClick = (categoryItem) => {
+    var _a;
+    onCategoryClick == null ? void 0 : onCategoryClick(categoryItem);
+    if (enableDrillDown && (categoryConfig == null ? void 0 : categoryConfig.enableDrillDown) && drillDownLevel < (((_a = categoryConfig == null ? void 0 : categoryConfig.hierarchy) == null ? void 0 : _a.length) || 0) - 1) {
+      setDrillDownLevel((prev) => prev + 1);
+      setDrillDownPath((prev) => [...prev, categoryItem.category]);
+      onDrillDown == null ? void 0 : onDrillDown(categoryItem.category, drillDownLevel + 1);
+    }
+  };
+  const handleDrillUp = (level) => {
+    if (level < drillDownLevel) {
+      setDrillDownLevel(level);
+      setDrillDownPath((prev) => prev.slice(0, level));
+      onDrillDown == null ? void 0 : onDrillDown(level > 0 ? drillDownPath[level - 1] : "", level);
+    }
+  };
+  const toggleCategoryExpansion = (categoryName) => {
+    setExpandedCategories((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(categoryName)) {
+        newSet.delete(categoryName);
+      } else {
+        newSet.add(categoryName);
+      }
+      return newSet;
+    });
+  };
+  const handleExport = () => {
+    if (onExport) {
+      onExport(categoryBreakdown);
+    } else {
+      const csvContent = [
+        "Category,Value,Percentage",
+        ...categoryBreakdown.map(
+          (item) => `${item.category},${item.value},${item.percentage.toFixed(2)}%`
+        )
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `category-breakdown-${Date.now()}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  };
+  const renderControls = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PieChart, { className: "w-4 h-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground", children: title })
+        ] }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs", children: subtitle }),
+        totalValue > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", children: [
+          "Total: ",
+          new Intl.NumberFormat().format(totalValue)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: currentView === "chart" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setCurrentView("chart"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PieChart, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: currentView === "list" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setCurrentView("list"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: currentView === "both" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setCurrentView("both"),
+              children: "Both"
+            }
+          )
+        ] }),
+        (currentView === "chart" || currentView === "both") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: chartType === "pie" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setChartType("pie"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PieChart, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: chartType === "bar" ? "default" : "ghost",
+              size: "sm",
+              onClick: () => setChartType("bar"),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: handleExport,
+            disabled: categoryBreakdown.length === 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] });
+  };
+  const renderBreadcrumb = () => {
+    if (drillDownLevel === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => handleDrillUp(0),
+          className: "p-0 h-auto font-normal",
+          children: "All"
+        }
+      ),
+      drillDownPath.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => handleDrillUp(index + 1),
+            className: "p-0 h-auto font-normal",
+            children: segment
+          }
+        )
+      ] }, index))
+    ] });
+  };
+  const renderChart = () => {
+    if (currentView === "list") return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(currentView === "both" && "mb-6"), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Chart,
+      {
+        title: "",
+        data: chartData,
+        type: chartType,
+        category,
+        showLegend: true,
+        height: "medium",
+        isLoading,
+        noWrapper: true,
+        onClick: () => {
+        }
+      }
+    ) });
+  };
+  const renderCategoryList = () => {
+    if (currentView === "chart") return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: categoryBreakdown.map((item, index) => {
+      if (renderCustomCategory) {
+        const customContent = renderCustomCategory(item, index);
+        if (customContent) return customContent;
+      }
+      const canExpand = enableDrillDown && categoryConfig.enableDrillDown && "subcategories" in item && item.subcategories && Array.isArray(item.subcategories) && item.subcategories.length > 0;
+      const isExpanded = expandedCategories.has(item.category);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50",
+              canExpand && "cursor-pointer"
+            ),
+            onClick: () => handleCategoryClick(item),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                canExpand && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "p-0 w-4 h-4",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleCategoryExpansion(item.category);
+                    },
+                    children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3 h-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DataBadge,
+                  {
+                    variant: "category",
+                    category: index % 8 + 1,
+                    size: "sm",
+                    children: item.category
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: new Intl.NumberFormat().format(item.value) }),
+                  showPercentages && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+                    item.percentage.toFixed(1),
+                    "%"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-full transition-all duration-300",
+                      `bg-category-${index % 8 + 1}`
+                    ),
+                    style: { width: `${item.percentage}%` }
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        canExpand && isExpanded && "subcategories" in item && item.subcategories && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t bg-muted/20", children: renderDrillDownContent ? renderDrillDownContent(item.category, item.subcategories) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 space-y-1", children: Array.isArray(item.subcategories) && item.subcategories.map((subItem) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm pl-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: subItem.category }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: new Intl.NumberFormat().format(subItem.value) })
+        ] }, subItem.category)) }) })
+      ] }, item.category);
+    }) });
+  };
+  const renderEmptyState = () => {
+    if (categoryBreakdown.length > 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-8 h-8 text-muted-foreground mx-auto mb-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "No category data available" })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("p-6", className), category, "data-component-name": "CategoryBreakdownPanel", children: [
+    headerSlot,
+    renderHeader && renderHeader(),
+    renderControls(),
+    renderBreadcrumb(),
+    categoryBreakdown.length === 0 ? renderEmptyState() : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      renderChart(),
+      renderCategoryList()
+    ] }),
+    renderFooter && renderFooter(),
+    footerSlot
+  ] });
+};
+const EntityPerformanceDashboardTemplate = ({
+  config,
+  data,
+  previousData,
+  isLoading = false,
+  className,
+  layout = "standard",
+  showInsights = true,
+  showTrends = true,
+  showCategories = true,
+  renderCustomActions,
+  renderAdditionalMetrics,
+  renderCustomTrendChart,
+  renderCustomCategoryView,
+  headerSlot,
+  footerSlot,
+  metricsHeaderSlot,
+  metricsFooterSlot,
+  trendsHeaderSlot,
+  trendsFooterSlot,
+  categoriesHeaderSlot,
+  categoriesFooterSlot,
+  onMetricClick,
+  onCategoryClick,
+  onTrendPeriodChange,
+  onExport
+}) => {
+  const getLayoutClasses = () => {
+    switch (layout) {
+      case "compact":
+        return "space-y-4";
+      case "detailed":
+        return "space-y-8";
+      case "standard":
+      default:
+        return "space-y-6";
+    }
+  };
+  const renderPageHeader = () => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SectionHeader,
+      {
+        title: config.display.title,
+        description: config.display.description,
+        category: config.display.category,
+        actions: renderCustomActions ? renderCustomActions() : void 0
+      }
+    );
+  };
+  const renderMetricsSection = () => {
+    if (!config.metrics.length) return null;
+    const MetricsComponent = showInsights ? MetricsOverviewWithInsightsPanel : MetricsOverviewPanel;
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+      metricsHeaderSlot,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MetricsComponent,
+        {
+          metrics: config.metrics,
+          data,
+          previousData,
+          isLoading,
+          onMetricClick,
+          category: config.display.category,
+          columns: layout === "compact" ? 2 : layout === "detailed" ? 4 : 3,
+          headerSlot: renderAdditionalMetrics ? renderAdditionalMetrics() : void 0
+        }
+      ),
+      metricsFooterSlot
+    ] });
+  };
+  const renderTrendsSection = () => {
+    if (!showTrends || !config.temporal || !config.metrics.length) return null;
+    if (renderCustomTrendChart) {
+      const customChart = renderCustomTrendChart(config, data);
+      if (customChart) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+          trendsHeaderSlot,
+          customChart,
+          trendsFooterSlot
+        ] });
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+      trendsHeaderSlot,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TrendAnalysisPanel,
+        {
+          metrics: config.metrics,
+          data,
+          temporal: config.temporal,
+          isLoading,
+          category: config.display.category,
+          enablePeriodSelection: true,
+          enableChartTypeSelection: layout === "detailed",
+          showComparisons: layout !== "compact",
+          onPeriodChange: onTrendPeriodChange,
+          onExport: (chartData, metric) => onExport == null ? void 0 : onExport("trends", { chartData, metric })
+        }
+      ),
+      trendsFooterSlot
+    ] });
+  };
+  const renderCategoriesSection = () => {
+    var _a;
+    if (!showCategories || !config.categories || !data.length) return null;
+    const valueField = ((_a = config.metrics.find((m) => m.type === "currency" || m.type === "count")) == null ? void 0 : _a.key) || Object.keys(data[0]).find((key) => typeof data[0][key] === "number") || "value";
+    if (renderCustomCategoryView) {
+      const customView = renderCustomCategoryView(config, data);
+      if (customView) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+          categoriesHeaderSlot,
+          customView,
+          categoriesFooterSlot
+        ] });
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-4", children: [
+      categoriesHeaderSlot,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CategoryBreakdownPanel,
+        {
+          data,
+          categoryConfig: config.categories,
+          valueField,
+          isLoading,
+          category: config.display.category,
+          title: `${config.display.title} by ${config.categories.defaultGroupBy}`,
+          defaultView: layout === "compact" ? "list" : "both",
+          enableDrillDown: config.categories.enableDrillDown,
+          onCategoryClick,
+          onExport: (categoryData) => onExport == null ? void 0 : onExport("categories", categoryData)
+        }
+      ),
+      categoriesFooterSlot
+    ] });
+  };
+  const renderLayoutContent = () => {
+    const sections = [
+      renderMetricsSection(),
+      renderTrendsSection(),
+      renderCategoriesSection()
+    ].filter(Boolean);
+    if (layout === "detailed" && sections.length > 1) {
+      const [metricsSection, ...otherSections] = sections;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: getLayoutClasses(), children: [
+        metricsSection,
+        otherSections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: otherSections })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: getLayoutClasses(), children: sections });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AppLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    PageTemplate,
+    {
+      className: cn("container mx-auto px-4 py-6", className),
+      "data-component-name": "EntityPerformanceDashboardTemplate",
+      children: [
+        headerSlot,
+        renderPageHeader(),
+        renderLayoutContent(),
+        footerSlot
+      ]
+    }
+  ) });
+};
+const EntityPerformanceDashboardTemplateWithRealTime = ({
+  enableRealTime = false,
+  refreshInterval = 3e4,
+  // 30 seconds
+  onDataUpdate,
+  ...props
+}) => {
+  React.useEffect(() => {
+    if (!enableRealTime) return;
+    const interval = setInterval(() => {
+      if (onDataUpdate) {
+        onDataUpdate(props.data);
+      }
+    }, refreshInterval);
+    return () => clearInterval(interval);
+  }, [enableRealTime, refreshInterval, onDataUpdate, props.data]);
+  return /* @__PURE__ */ jsxRuntime.jsx(EntityPerformanceDashboardTemplate, { ...props });
+};
+const EntityManagementTemplate = ({
+  config,
+  data,
+  isLoading = false,
+  className,
+  enableSearch = true,
+  enableFiltering = true,
+  enableBulkActions = true,
+  enableExport = true,
+  pageSize = 10,
+  onCreate,
+  onUpdate,
+  onDelete,
+  onBulkDelete,
+  onView,
+  renderCreateForm,
+  renderEditForm,
+  renderDetailView,
+  renderCustomActions,
+  renderEmptyState,
+  renderFilterPanel,
+  headerSlot,
+  footerSlot,
+  toolbarSlot,
+  listHeaderSlot,
+  listFooterSlot,
+  onRefresh,
+  onFilter,
+  onExport
+}) => {
+  const [showCreateModal, setShowCreateModal] = React.useState(false);
+  const [showEditModal, setShowEditModal] = React.useState(false);
+  const [showDetailModal, setShowDetailModal] = React.useState(false);
+  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  const [selectedItems, setSelectedItems] = React.useState([]);
+  const handleCreate = async (item) => {
+    if (onCreate) {
+      try {
+        await onCreate(item);
+        setShowCreateModal(false);
+        onRefresh == null ? void 0 : onRefresh();
+      } catch (error) {
+        console.error("Create failed:", error);
+      }
+    }
+  };
+  const handleUpdate = async (item) => {
+    if (onUpdate && selectedItem) {
+      try {
+        await onUpdate(selectedItem.id, item);
+        setShowEditModal(false);
+        setSelectedItem(null);
+        onRefresh == null ? void 0 : onRefresh();
+      } catch (error) {
+        console.error("Update failed:", error);
+      }
+    }
+  };
+  const handleBulkDelete = async () => {
+    if (onBulkDelete && selectedItems.length > 0 && confirm(`Are you sure you want to delete ${selectedItems.length} ${config.display.title.toLowerCase()}?`)) {
+      try {
+        const ids = selectedItems.map((item) => item.id);
+        await onBulkDelete(ids);
+        setSelectedItems([]);
+        onRefresh == null ? void 0 : onRefresh();
+      } catch (error) {
+        console.error("Bulk delete failed:", error);
+      }
+    }
+  };
+  const handleView = (item) => {
+    if (onView) {
+      onView(item);
+    } else {
+      setSelectedItem(item);
+      setShowDetailModal(true);
+    }
+  };
+  const handleEdit = (item) => {
+    setSelectedItem(item);
+    setShowEditModal(true);
+  };
+  const handleRowClick = (item) => {
+    handleView(item);
+  };
+  const handleAction = (action, selectedItems2) => {
+    action.onClick({ selectedItems: selectedItems2, config });
+  };
+  const generateDefaultActions = () => {
+    const actions = [];
+    if (onCreate) {
+      actions.push({
+        label: `Add ${config.display.title.slice(0, -1)}`,
+        type: "primary",
+        icon: lucideReact.Plus,
+        onClick: () => setShowCreateModal(true)
+      });
+    }
+    return actions;
+  };
+  const renderPageHeader = () => {
+    const actions = [
+      ...generateDefaultActions(),
+      ...config.actions || []
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SectionHeader,
+      {
+        title: config.display.title,
+        description: config.display.description,
+        category: config.display.category,
+        actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          renderCustomActions && renderCustomActions(),
+          enableFiltering && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => setShowFilterPanel(!showFilterPanel),
+              className: cn(showFilterPanel && "bg-muted"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-4 h-4 mr-2" }),
+                "Filters"
+              ]
+            }
+          ),
+          enableExport && /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => onExport == null ? void 0 : onExport(selectedItems.length > 0 ? selectedItems : data, "csv"),
+              disabled: data.length === 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-2" }),
+                "Export"
+              ]
+            }
+          ),
+          actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: action.type === "primary" ? "default" : "outline",
+              size: "sm",
+              onClick: () => action.onClick({ data, config }),
+              children: [
+                action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "w-4 h-4 mr-2" }),
+                action.label
+              ]
+            },
+            action.label
+          ))
+        ] })
+      }
+    );
+  };
+  const renderToolbar = () => {
+    if (selectedItems.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-muted/50 p-4 rounded-lg mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", children: [
+          selectedItems.length,
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setSelectedItems([]),
+            children: "Clear selection"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        onBulkDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "destructive",
+            size: "sm",
+            onClick: handleBulkDelete,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4 mr-2" }),
+              "Delete Selected"
+            ]
+          }
+        ),
+        enableExport && /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => onExport == null ? void 0 : onExport(selectedItems, "csv"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4 mr-2" }),
+              "Export Selected"
+            ]
+          }
+        )
+      ] })
+    ] }) });
+  };
+  const renderFilterPanelSection = () => {
+    if (!showFilterPanel) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4 mb-4", children: renderFilterPanel ? renderFilterPanel(onFilter || (() => {
+    })) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-muted-foreground py-4", children: "Filter functionality not implemented yet" }) });
+  };
+  const renderCreateModal = () => {
+    if (!showCreateModal) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        isOpen: showCreateModal,
+        onClose: () => setShowCreateModal(false),
+        title: `Create ${config.display.title.slice(0, -1)}`,
+        category: config.display.category,
+        children: renderCreateForm ? renderCreateForm(handleCreate, () => setShowCreateModal(false)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center text-muted-foreground", children: "Create form not implemented yet" })
+      }
+    );
+  };
+  const renderEditModal = () => {
+    if (!showEditModal || !selectedItem) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        isOpen: showEditModal,
+        onClose: () => {
+          setShowEditModal(false);
+          setSelectedItem(null);
+        },
+        title: `Edit ${config.display.title.slice(0, -1)}`,
+        category: config.display.category,
+        children: renderEditForm ? renderEditForm(
+          selectedItem,
+          handleUpdate,
+          () => {
+            setShowEditModal(false);
+            setSelectedItem(null);
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-center text-muted-foreground", children: "Edit form not implemented yet" })
+      }
+    );
+  };
+  const renderDetailModal = () => {
+    if (!showDetailModal || !selectedItem) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Modal,
+      {
+        isOpen: showDetailModal,
+        onClose: () => {
+          setShowDetailModal(false);
+          setSelectedItem(null);
+        },
+        title: `${config.display.title.slice(0, -1)} Details`,
+        category: config.display.category,
+        size: "large",
+        children: renderDetailView ? renderDetailView(
+          selectedItem,
+          () => {
+            setShowDetailModal(false);
+            handleEdit(selectedItem);
+          },
+          () => {
+            setShowDetailModal(false);
+            setSelectedItem(null);
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: Object.entries(selectedItem).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium capitalize", children: [
+            key,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: (value == null ? void 0 : value.toString()) || "-" })
+        ] }, key)) }) })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AppLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    PageTemplate,
+    {
+      className: cn("container mx-auto px-4 py-6", className),
+      "data-component-name": "EntityManagementTemplate",
+      children: [
+        headerSlot,
+        renderPageHeader(),
+        toolbarSlot,
+        renderFilterPanelSection(),
+        renderToolbar(),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          listHeaderSlot,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            EntityListPanel,
+            {
+              config,
+              data,
+              isLoading,
+              onRowClick: handleRowClick,
+              onAction: handleAction,
+              enableSelection: enableBulkActions,
+              enableBulkActions,
+              enableExport,
+              enableRefresh: !!onRefresh,
+              showSearch: enableSearch,
+              showPagination: true,
+              pageSize,
+              renderEmptyState,
+              onExport,
+              onRefresh
+            }
+          ),
+          listFooterSlot
+        ] }),
+        renderCreateModal(),
+        renderEditModal(),
+        renderDetailModal(),
+        footerSlot
+      ]
+    }
+  ) });
+};
+const financialConfig = {
+  entityType: "transactional",
+  display: {
+    title: "Financial Dashboard",
+    description: "Personal finance overview and transaction management",
+    category: 2
+    // Green theme for financial success
+  },
+  metrics: [
+    {
+      key: "totalBalance",
+      label: "Total Balance",
+      type: "currency",
+      trend: true,
+      icon: lucideReact.DollarSign,
+      aggregation: "sum"
+    },
+    {
+      key: "monthlyIncome",
+      label: "Monthly Income",
+      type: "currency",
+      trend: true,
+      icon: lucideReact.TrendingUp,
+      aggregation: "sum"
+    },
+    {
+      key: "monthlyExpenses",
+      label: "Monthly Expenses",
+      type: "currency",
+      trend: true,
+      icon: lucideReact.Wallet,
+      aggregation: "sum"
+    },
+    {
+      key: "savingsRate",
+      label: "Savings Rate",
+      type: "percentage",
+      target: 20,
+      icon: lucideReact.Target
+    }
+  ],
+  temporal: {
+    cycles: ["monthly", "quarterly", "yearly"],
+    defaultCycle: "monthly",
+    enableComparisons: true,
+    forecasting: {
+      enabled: true,
+      periods: 3,
+      algorithm: "seasonal"
+    }
+  },
+  categories: {
+    hierarchy: ["account", "category", "type"],
+    defaultGroupBy: "category",
+    enableDrillDown: true,
+    colorCoding: true
+  },
+  actions: [
+    {
+      label: "Add Transaction",
+      type: "primary",
+      onClick: ({ data, config }) => {
+        console.log("Adding new transaction", { data, config });
+      }
+    },
+    {
+      label: "Generate Report",
+      type: "secondary",
+      onClick: ({ selectedItems, data, config }) => {
+        console.log("Generating report", { selectedItems, data, config });
+      }
+    }
+  ]
+};
+const sampleFinancialData = [
+  {
+    id: "1",
+    amount: 5e3,
+    category: "Salary",
+    account: "Checking",
+    date: "2024-01-15",
+    description: "Monthly salary",
+    type: "income",
+    status: "completed"
+  },
+  {
+    id: "2",
+    amount: -1200,
+    category: "Rent",
+    account: "Checking",
+    date: "2024-01-01",
+    description: "Monthly rent payment",
+    type: "expense",
+    status: "completed"
+  },
+  {
+    id: "3",
+    amount: -300,
+    category: "Groceries",
+    account: "Checking",
+    date: "2024-01-10",
+    description: "Weekly groceries",
+    type: "expense",
+    status: "completed"
+  },
+  {
+    id: "4",
+    amount: -80,
+    category: "Utilities",
+    account: "Checking",
+    date: "2024-01-05",
+    description: "Electric bill",
+    type: "expense",
+    status: "completed"
+  },
+  {
+    id: "5",
+    amount: -45,
+    category: "Entertainment",
+    account: "Checking",
+    date: "2024-01-12",
+    description: "Movie tickets",
+    type: "expense",
+    status: "completed"
+  }
+];
 function createReactApp(config) {
   const appConfig = typeof config === "string" ? { title: config } : config;
   const {
@@ -10058,6 +11960,7 @@ exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
+exports.CategoryBreakdownPanel = CategoryBreakdownPanel;
 exports.Chart = Chart;
 exports.ColorSwatch = ColorSwatch;
 exports.ComponentShowcasePage = ComponentShowcasePage;
@@ -10069,6 +11972,7 @@ exports.DarkModeToggle = DarkModeToggle;
 exports.DashboardCard = DashboardCard;
 exports.DashboardGrid = DashboardGrid;
 exports.DashboardTemplate = DashboardTemplate;
+exports.DashboardWithSidePanel = DashboardWithSidePanel;
 exports.DataBadge = DataBadge;
 exports.DataDetailTemplate = DataDetailTemplate;
 exports.DataTable = DataTable;
@@ -10091,6 +11995,10 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
+exports.EntityListPanel = EntityListPanel;
+exports.EntityManagementTemplate = EntityManagementTemplate;
+exports.EntityPerformanceDashboardTemplate = EntityPerformanceDashboardTemplate;
+exports.EntityPerformanceDashboardTemplateWithRealTime = EntityPerformanceDashboardTemplateWithRealTime;
 exports.ErrorBoundary = ErrorBoundary;
 exports.FileUpload = FileUpload;
 exports.FormField = FormField;
@@ -10102,6 +12010,9 @@ exports.Label = Label;
 exports.Loading = Loading;
 exports.LoginForm = LoginForm;
 exports.LogoutButton = LogoutButton;
+exports.MetricCalculationEngine = MetricCalculationEngine;
+exports.MetricsOverviewPanel = MetricsOverviewPanel;
+exports.MetricsOverviewWithInsightsPanel = MetricsOverviewWithInsightsPanel;
 exports.Modal = Modal;
 exports.NavMenu = NavMenu;
 exports.PageTemplate = PageTemplate;
@@ -10111,6 +12022,7 @@ exports.ProgressBar = ProgressBar;
 exports.ProtectedRoute = ProtectedRoute;
 exports.RESPONSIVE_CHART_HEIGHTS = RESPONSIVE_CHART_HEIGHTS;
 exports.ROUTES = ROUTES;
+exports.SalesPanel = SalesPanel;
 exports.SearchInput = SearchInput;
 exports.SectionHeader = SectionHeader;
 exports.Select = Select;
@@ -10141,6 +12053,7 @@ exports.TabsTrigger = TabsTrigger;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
 exports.Tooltip = Tooltip;
+exports.TrendAnalysisPanel = TrendAnalysisPanel;
 exports.UI_CONFIG = UI_CONFIG;
 exports.UserAvatar = UserAvatar;
 exports.UserMenu = UserMenu;
@@ -10150,12 +12063,14 @@ exports.cn = cn;
 exports.createReactApp = createReactApp;
 exports.createSimpleApp = createSimpleApp;
 exports.env = env;
+exports.financialConfig = financialConfig;
 exports.formatNumberWithTooltip = formatNumberWithTooltip;
 exports.getAnimationClasses = getAnimationClasses;
 exports.getChartHeight = getChartHeight;
 exports.getContainerHeightClass = getContainerHeightClass;
 exports.interactionVariants = interactionVariants;
 exports.legacyPatterns = legacyPatterns;
+exports.sampleFinancialData = sampleFinancialData;
 exports.setGlobalAuthService = setGlobalAuthService;
 exports.tooltipContent = tooltipContent;
 exports.useApiMutation = useApiMutation;