@pattern-stack/frontend-patterns 0.0.5 → 0.0.6

package/dist/index.es.js

@@ -6,19 +6,18 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React from "react";
 import React__default, { useRef, useState, useEffect, Component, createContext, useContext, useMemo, useId, useCallback } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Menu, HelpCircle, Info, AlertCircle, Check, ArrowDown, ArrowUp, ArrowLeft, ArrowRight, ChevronUp, ChevronLeft, ChevronDown, ChevronRight, Music, Video, Image, Folder, File, Flag, Tag, Bookmark, Heart, Star, MapPin, Clock, Calendar, Phone, Mail, Unlock, Lock, Share, Upload, Download, Eye, Trash2, Edit, Plus, Search, Bell, Settings, Home, Layout, TrendingUp, Database, BarChart3, Users, Shield, X, Palette, Circle, Loader2, Target, ExternalLink, TrendingDown, Minus, FileX, Sparkles, User, Sun, Moon, UserCircle, LogOut, ChevronsUpDown, AreaChart, LineChart, CheckCircle, AlertTriangle, Square, Waves, Zap, TreePine, Sunset, Building2, DollarSign, ShoppingCart, MoreHorizontal, Filter, Activity, RefreshCw, FileText, History, Save, Copy, Grid3X3, Layers, XCircle } from "lucide-react";
 import { cva } from "class-variance-authority";
 import axios from "axios";
 import { useQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { ChevronRight, Check, Circle, Loader2, Target, ExternalLink, ArrowRight, TrendingUp, TrendingDown, Minus, FileX, AlertCircle, Search, Database, Sparkles, Mail, Lock, Shield, User, Sun, Moon, UserCircle, Settings, LogOut, X, ChevronsUpDown, ChevronUp, ChevronDown, ChevronLeft, Clock, Calendar, BarChart3, AreaChart, LineChart, Upload, Image, File, CheckCircle, Info, AlertTriangle, Home, Palette, Square, Waves, Zap, TreePine, Sunset, Building2, Users, DollarSign, ShoppingCart, Menu, Layout, MoreHorizontal, Plus, Filter, Download, Activity, RefreshCw, Eye, Edit, Trash2, FileText, History, ArrowLeft, Save, Copy, PieChart, List, Wallet, Grid3X3, Layers, XCircle } from "lucide-react";
 import { createPortal } from "react-dom";
 import { useLocation, useNavigate, useSearchParams, Outlet, BrowserRouter, Routes, Route } from "react-router-dom";
 import { createRoot } from "react-dom/client";
-import "@tanstack/react-query-devtools";
 const APP_NAME = "Design System Showcase";
 const API_ENDPOINTS = {
   HEALTH: "/health"
@@ -413,6 +412,71 @@ class MetricCalculationEngine {
     return insights.slice(0, 5);
   }
 }
+const iconMap = {
+  Palette,
+  Menu,
+  X,
+  Shield,
+  Users,
+  BarChart3,
+  Database,
+  TrendingUp,
+  Layout,
+  Home,
+  Settings,
+  Bell,
+  Search,
+  Plus,
+  Edit,
+  Trash2,
+  Eye,
+  Download,
+  Upload,
+  Share,
+  Lock,
+  Unlock,
+  Mail,
+  Phone,
+  Calendar,
+  Clock,
+  MapPin,
+  Star,
+  Heart,
+  Bookmark,
+  Tag,
+  Flag,
+  File,
+  Folder,
+  Image,
+  Video,
+  Music,
+  ChevronRight,
+  ChevronDown,
+  ChevronLeft,
+  ChevronUp,
+  ArrowRight,
+  ArrowLeft,
+  ArrowUp,
+  ArrowDown,
+  Check,
+  AlertCircle,
+  Info,
+  HelpCircle
+};
+const Icon = ({ name, className = "w-5 h-5", size, ...props }) => {
+  const IconComponent = iconMap[name];
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found. Using default Menu icon.`);
+    return /* @__PURE__ */ jsx(Menu, { className, size, ...props });
+  }
+  return /* @__PURE__ */ jsx(IconComponent, { className, size, ...props });
+};
+const getIcon = (name) => {
+  return iconMap[name] || Menu;
+};
+const isValidIcon = (name) => {
+  return name in iconMap;
+};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -5775,6 +5839,42 @@ const useSidebar = () => {
   }
   return context;
 };
+const NavigationContext = createContext(void 0);
+const defaultShowcaseNavigation = [
+  { value: "showcase", label: "Showcase", icon: "Palette", path: "/showcase", category: 5 },
+  { value: "admin-dashboard", label: "Admin Dashboard", icon: "Shield", path: "/admin/dashboard", category: 2 },
+  { value: "admin-users", label: "User Management", icon: "Users", path: "/admin/users", category: 3 },
+  { value: "admin-sales", label: "Sales Dashboard", icon: "TrendingUp", path: "/admin/sales", category: 4 },
+  { value: "entity-performance", label: "Performance Dashboard", icon: "BarChart3", path: "/entity/performance", category: 6 },
+  { value: "entity-management", label: "Entity Management", icon: "Database", path: "/entity/management", category: 7 },
+  { value: "entity-template", label: "Template Example", icon: "Layout", path: "/entity/template-example", category: 1 }
+];
+const NavigationProvider = ({ children, initialNavigation }) => {
+  const [navigation, setNavigation] = React__default.useState(
+    initialNavigation || {
+      items: defaultShowcaseNavigation,
+      showDefaultNavigation: true,
+      defaultExpanded: true
+    }
+  );
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: { navigation, setNavigation }, children });
+};
+const useNavigation = () => {
+  const context = useContext(NavigationContext);
+  if (context === void 0) {
+    throw new Error("useNavigation must be used within a NavigationProvider");
+  }
+  return context;
+};
+const getNavigationItems = (config) => {
+  if (config.items.length > 0) {
+    return config.items;
+  }
+  if (config.showDefaultNavigation !== false) {
+    return defaultShowcaseNavigation;
+  }
+  return [];
+};
 const SidebarButton = ({
   icon,
   label,
@@ -5782,13 +5882,16 @@ const SidebarButton = ({
   category = 1,
   expanded = false,
   onClick,
-  className
+  className,
+  badge,
+  disabled = false
 }) => {
   return /* @__PURE__ */ jsxs(
     Button,
     {
       variant: active ? "secondary" : "ghost",
       onClick,
+      disabled,
       tooltip: !expanded ? label : void 0,
       className: cn(
         "relative w-full justify-start gap-3 h-12",
@@ -5822,12 +5925,19 @@ const SidebarButton = ({
             "text-sm font-medium flex-1 text-left",
             active ? `text-category-${category}` : "text-foreground"
           ), children: label }),
-          active && /* @__PURE__ */ jsx("div", { className: cn(
+          badge ? /* @__PURE__ */ jsx("span", { className: cn(
+            "px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0",
+            "bg-primary/10 text-primary"
+          ), children: badge }) : active && /* @__PURE__ */ jsx("div", { className: cn(
             "w-2 h-2 rounded-full flex-shrink-0",
             `bg-category-${category}`
           ) })
         ] }),
-        !expanded && active && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1", children: /* @__PURE__ */ jsx("div", { className: cn(
+        !expanded && (badge || active) && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1", children: badge ? /* @__PURE__ */ jsx("span", { className: cn(
+          "px-1.5 py-0.5 text-xs font-bold rounded-full",
+          "bg-primary text-primary-foreground",
+          "ring-2 ring-background"
+        ), children: badge }) : active && /* @__PURE__ */ jsx("div", { className: cn(
           "w-2.5 h-2.5 rounded-full",
           `bg-category-${category}`,
           "ring-2 ring-background"
@@ -5838,18 +5948,11 @@ const SidebarButton = ({
 };
 const Sidebar = ({ className }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
+  const { navigation } = useNavigation();
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const items = [
-    { value: "showcase", label: "Showcase", icon: /* @__PURE__ */ jsx(Palette, { className: "w-5 h-5" }), path: "/showcase", category: 5 },
-    { value: "admin-dashboard", label: "Admin Dashboard", icon: /* @__PURE__ */ jsx(Shield, { className: "w-5 h-5" }), path: "/admin/dashboard", category: 2 },
-    { value: "admin-users", label: "User Management", icon: /* @__PURE__ */ jsx(Users, { className: "w-5 h-5" }), path: "/admin/users", category: 3 },
-    { value: "admin-sales", label: "Sales Dashboard", icon: /* @__PURE__ */ jsx(TrendingUp, { className: "w-5 h-5" }), path: "/admin/sales", category: 4 },
-    { value: "entity-performance", label: "Performance Dashboard", icon: /* @__PURE__ */ jsx(BarChart3, { className: "w-5 h-5" }), path: "/entity/performance", category: 6 },
-    { value: "entity-management", label: "Entity Management", icon: /* @__PURE__ */ jsx(Database, { className: "w-5 h-5" }), path: "/entity/management", category: 7 },
-    { value: "entity-template", label: "Template Example", icon: /* @__PURE__ */ jsx(Layout, { className: "w-5 h-5" }), path: "/entity/template-example", category: 1 }
-  ];
+  const items = getNavigationItems(navigation);
   const handleNavigation = (path) => {
     if (path.includes("?")) {
       const [basePath, query] = path.split("?");
@@ -5905,12 +6008,14 @@ const Sidebar = ({ className }) => {
           return /* @__PURE__ */ jsx(
             SidebarButton,
             {
-              icon: item.icon,
+              icon: /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "w-5 h-5" }),
               label: item.label,
               active: isActive,
               category: item.category,
               expanded: isExpanded,
-              onClick: () => handleNavigation(item.path)
+              onClick: () => handleNavigation(item.path),
+              badge: item.badge,
+              disabled: item.disabled
             },
             item.value
           );
@@ -8010,1636 +8115,6 @@ const AdminDetailTemplate = ({
     ] }) }) })
   ] });
 };
-const MetricsOverviewPanel = ({
-  metrics,
-  data,
-  previousData,
-  isLoading = false,
-  onMetricClick,
-  className,
-  layout = "grid",
-  columns = 4,
-  category,
-  renderCustomMetric,
-  renderHeader,
-  renderFooter,
-  headerSlot,
-  footerSlot
-}) => {
-  const calculatedMetrics = React__default.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__ */ jsx(
-        StatCard,
-        {
-          title: metric.label,
-          value: "",
-          isLoading: true,
-          category,
-          icon: metric.icon ? /* @__PURE__ */ 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__ */ jsx(
-      StatCard,
-      {
-        title: metric.label,
-        value: metricValue.formattedValue,
-        subtitle,
-        trend,
-        category,
-        icon: metric.icon ? /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("space-y-4", className), "data-component-name": "MetricsOverviewPanel", children: [
-    headerSlot,
-    renderHeader && renderHeader(),
-    /* @__PURE__ */ 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__default.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__default.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__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Key Insights" }),
-      /* @__PURE__ */ 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__ */ jsxs(
-          "div",
-          {
-            className: cn("text-sm", colorClass),
-            children: [
-              "• ",
-              insight.message
-            ]
-          },
-          index
-        );
-      }) })
-    ] });
-  };
-  return /* @__PURE__ */ jsx(
-    MetricsOverviewPanel,
-    {
-      ...props,
-      footerSlot: /* @__PURE__ */ jsxs(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__default.useState([]);
-  const [showFilters, setShowFilters] = React__default.useState(false);
-  const tableColumns = useMemo(() => {
-    if (customColumns) return customColumns;
-    const generatedColumns = [];
-    if (enableSelection) {
-      generatedColumns.push({
-        key: "__selection",
-        header: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: config.display.title }),
-        config.display.description && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
-          data.length,
-          " items"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        renderToolbar && renderToolbar(),
-        enableFiltering && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => setShowFilters(!showFilters),
-            className: cn(showFilters && "bg-muted"),
-            children: [
-              /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4 mr-2" }),
-              "Filters"
-            ]
-          }
-        ),
-        enableRefresh && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: onRefresh,
-            disabled: isLoading,
-            children: [
-              /* @__PURE__ */ jsx(RefreshCw, { className: cn("w-4 h-4 mr-2", isLoading && "animate-spin") }),
-              "Refresh"
-            ]
-          }
-        ),
-        enableExport && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: handleExport,
-            disabled: data.length === 0,
-            children: [
-              /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-2" }),
-              "Export"
-            ]
-          }
-        ),
-        (_a = config.actions) == null ? void 0 : _a.filter((action) => action.type === "primary").map((action) => /* @__PURE__ */ jsxs(
-          Button,
-          {
-            size: "sm",
-            onClick: () => onAction == null ? void 0 : onAction(action, []),
-            disabled: isLoading,
-            children: [
-              action.icon && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between bg-muted/50 p-3 rounded-md mb-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-          selectedItems.length,
-          " items selected"
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: () => setSelectedItems([]),
-            children: "Clear selection"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ 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__ */ jsxs(
-          Button,
-          {
-            variant: action.type === "danger" ? "destructive" : "outline",
-            size: "sm",
-            onClick: () => onAction == null ? void 0 : onAction(action, selectedItems),
-            children: [
-              action.icon && /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-center py-12", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(Plus, { className: "w-4 h-4 mr-2" }),
-        "Add ",
-        config.display.title.slice(0, -1)
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: cn("p-6", className), category: config.display.category, "data-component-name": "EntityListPanel", children: [
-    headerSlot,
-    renderToolbarSection(),
-    renderBulkActionsSection(),
-    data.length === 0 ? renderEmptyStateSection() : /* @__PURE__ */ 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] = useState(metrics[0]);
-  const [selectedPeriod, setSelectedPeriod] = useState((temporal == null ? void 0 : temporal.defaultCycle) || "monthly");
-  const [selectedChartType, setSelectedChartType] = useState(defaultChartType);
-  const [showForecast, setShowForecast] = useState(false);
-  const trendData = 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 = useMemo(() => {
-    return trendData.map((point) => ({
-      label: point.label || point.date,
-      value: point.value,
-      category
-    }));
-  }, [trendData, category]);
-  const trendPercentage = 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 = 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 = 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__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(TrendingUp, { className: "w-4 h-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: "Trend Analysis" })
-        ] }),
-        trendPercentage !== null && /* @__PURE__ */ jsxs(Badge, { variant: trendPercentage > 0 ? "default" : "destructive", children: [
-          trendPercentage > 0 ? "+" : "",
-          trendPercentage.toFixed(1),
-          "%"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        enableMetricSelection && metrics.length > 1 && /* @__PURE__ */ jsx(
-          Select,
-          {
-            value: selectedMetric.key,
-            onValueChange: handleMetricChange,
-            children: metrics.map((metric) => /* @__PURE__ */ jsx("option", { value: metric.key, children: metric.label }, metric.key))
-          }
-        ),
-        enablePeriodSelection && /* @__PURE__ */ jsx(
-          Select,
-          {
-            value: selectedPeriod,
-            onValueChange: (value) => handlePeriodChange(value),
-            children: ((temporal == null ? void 0 : temporal.cycles) || ["daily", "weekly", "monthly", "quarterly", "yearly"]).map((cycle) => /* @__PURE__ */ jsx("option", { value: cycle, children: cycle.charAt(0).toUpperCase() + cycle.slice(1) }, cycle))
-          }
-        ),
-        enableChartTypeSelection && /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: selectedChartType === "line" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => handleChartTypeChange("line"),
-              children: /* @__PURE__ */ jsx(LineChart, { className: "w-4 h-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: selectedChartType === "bar" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => handleChartTypeChange("bar"),
-              children: /* @__PURE__ */ jsx(BarChart3, { className: "w-4 h-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: selectedChartType === "area" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => handleChartTypeChange("area"),
-              children: /* @__PURE__ */ jsx(AreaChart, { className: "w-4 h-4" })
-            }
-          )
-        ] }),
-        ((_a = temporal == null ? void 0 : temporal.forecasting) == null ? void 0 : _a.enabled) && /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: showForecast ? "default" : "outline",
-            size: "sm",
-            onClick: () => setShowForecast(!showForecast),
-            children: "Forecast"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: handleExport,
-            disabled: chartData.length === 0,
-            children: /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" })
-          }
-        )
-      ] })
-    ] });
-  };
-  const renderChart = () => {
-    if (renderCustomChart) {
-      const customChart = renderCustomChart(selectedMetric, combinedChartData, selectedChartType);
-      if (customChart) return customChart;
-    }
-    return /* @__PURE__ */ 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__ */ jsxs("div", { className: "border-t pt-4 mt-4", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-foreground mb-3", children: "Period Comparisons" }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: currentValue.toFixed(0) }),
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Current" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children: previousValue.toFixed(0) }),
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Previous" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ 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__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Change" })
-        ] })
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ 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] = useState(defaultView);
-  const [chartType, setChartType] = useState(defaultChartType);
-  const [expandedCategories, setExpandedCategories] = useState(/* @__PURE__ */ new Set());
-  const [drillDownLevel, setDrillDownLevel] = useState(0);
-  const [drillDownPath, setDrillDownPath] = useState([]);
-  const categoryBreakdown = 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 = useMemo(() => {
-    return categoryBreakdown.map((item, index) => ({
-      label: item.category,
-      value: item.value,
-      category: index % 8 + 1
-    }));
-  }, [categoryBreakdown]);
-  const totalValue = 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__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(PieChart, { className: "w-4 h-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: title })
-        ] }),
-        subtitle && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: subtitle }),
-        totalValue > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
-          "Total: ",
-          new Intl.NumberFormat().format(totalValue)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: currentView === "chart" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => setCurrentView("chart"),
-              children: /* @__PURE__ */ jsx(PieChart, { className: "w-4 h-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: currentView === "list" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => setCurrentView("list"),
-              children: /* @__PURE__ */ jsx(List, { className: "w-4 h-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: currentView === "both" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => setCurrentView("both"),
-              children: "Both"
-            }
-          )
-        ] }),
-        (currentView === "chart" || currentView === "both") && /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: chartType === "pie" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => setChartType("pie"),
-              children: /* @__PURE__ */ jsx(PieChart, { className: "w-4 h-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: chartType === "bar" ? "default" : "ghost",
-              size: "sm",
-              onClick: () => setChartType("bar"),
-              children: /* @__PURE__ */ jsx(BarChart3, { className: "w-4 h-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: handleExport,
-            disabled: categoryBreakdown.length === 0,
-            children: /* @__PURE__ */ jsx(Download, { className: "w-4 h-4" })
-          }
-        )
-      ] })
-    ] });
-  };
-  const renderBreadcrumb = () => {
-    if (drillDownLevel === 0) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4 text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => handleDrillUp(0),
-          className: "p-0 h-auto font-normal",
-          children: "All"
-        }
-      ),
-      drillDownPath.map((segment, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
-        /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" }),
-        /* @__PURE__ */ 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__ */ jsx("div", { className: cn(currentView === "both" && "mb-6"), children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "border rounded-lg", children: [
-        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                canExpand && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    className: "p-0 w-4 h-4",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      toggleCategoryExpansion(item.category);
-                    },
-                    children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  DataBadge,
-                  {
-                    variant: "category",
-                    category: index % 8 + 1,
-                    size: "sm",
-                    children: item.category
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-semibold", children: new Intl.NumberFormat().format(item.value) }),
-                  showPercentages && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-                    item.percentage.toFixed(1),
-                    "%"
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "w-20 h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "border-t bg-muted/20", children: renderDrillDownContent ? renderDrillDownContent(item.category, item.subcategories) : /* @__PURE__ */ jsx("div", { className: "p-3 space-y-1", children: Array.isArray(item.subcategories) && item.subcategories.map((subItem) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm pl-4", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: subItem.category }),
-          /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-center py-12", children: [
-      /* @__PURE__ */ jsx(Filter, { className: "w-8 h-8 text-muted-foreground mx-auto mb-4" }),
-      /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "No category data available" })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs(Card, { className: cn("p-6", className), category, "data-component-name": "CategoryBreakdownPanel", children: [
-    headerSlot,
-    renderHeader && renderHeader(),
-    renderControls(),
-    renderBreadcrumb(),
-    categoryBreakdown.length === 0 ? renderEmptyState() : /* @__PURE__ */ jsxs(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__ */ 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__ */ jsxs("section", { className: "space-y-4", children: [
-      metricsHeaderSlot,
-      /* @__PURE__ */ 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__ */ jsxs("section", { className: "space-y-4", children: [
-          trendsHeaderSlot,
-          customChart,
-          trendsFooterSlot
-        ] });
-      }
-    }
-    return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-      trendsHeaderSlot,
-      /* @__PURE__ */ 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__ */ jsxs("section", { className: "space-y-4", children: [
-          categoriesHeaderSlot,
-          customView,
-          categoriesFooterSlot
-        ] });
-      }
-    }
-    return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-      categoriesHeaderSlot,
-      /* @__PURE__ */ 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__ */ jsxs("div", { className: getLayoutClasses(), children: [
-        metricsSection,
-        otherSections.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: otherSections })
-      ] });
-    }
-    return /* @__PURE__ */ jsx("div", { className: getLayoutClasses(), children: sections });
-  };
-  return /* @__PURE__ */ jsx(AppLayout, { children: /* @__PURE__ */ 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__default.useEffect(() => {
-    if (!enableRealTime) return;
-    const interval = setInterval(() => {
-      if (onDataUpdate) {
-        onDataUpdate(props.data);
-      }
-    }, refreshInterval);
-    return () => clearInterval(interval);
-  }, [enableRealTime, refreshInterval, onDataUpdate, props.data]);
-  return /* @__PURE__ */ 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] = useState(false);
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [showDetailModal, setShowDetailModal] = useState(false);
-  const [showFilterPanel, setShowFilterPanel] = useState(false);
-  const [selectedItem, setSelectedItem] = useState(null);
-  const [selectedItems, setSelectedItems] = 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: Plus,
-        onClick: () => setShowCreateModal(true)
-      });
-    }
-    return actions;
-  };
-  const renderPageHeader = () => {
-    const actions = [
-      ...generateDefaultActions(),
-      ...config.actions || []
-    ];
-    return /* @__PURE__ */ jsx(
-      SectionHeader,
-      {
-        title: config.display.title,
-        description: config.display.description,
-        category: config.display.category,
-        actions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          renderCustomActions && renderCustomActions(),
-          enableFiltering && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: () => setShowFilterPanel(!showFilterPanel),
-              className: cn(showFilterPanel && "bg-muted"),
-              children: [
-                /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4 mr-2" }),
-                "Filters"
-              ]
-            }
-          ),
-          enableExport && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: () => onExport == null ? void 0 : onExport(selectedItems.length > 0 ? selectedItems : data, "csv"),
-              disabled: data.length === 0,
-              children: [
-                /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-2" }),
-                "Export"
-              ]
-            }
-          ),
-          actions.map((action) => /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: action.type === "primary" ? "default" : "outline",
-              size: "sm",
-              onClick: () => action.onClick({ data, config }),
-              children: [
-                action.icon && /* @__PURE__ */ jsx(action.icon, { className: "w-4 h-4 mr-2" }),
-                action.label
-              ]
-            },
-            action.label
-          ))
-        ] })
-      }
-    );
-  };
-  const renderToolbar = () => {
-    if (selectedItems.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "bg-muted/50 p-4 rounded-lg mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
-          selectedItems.length,
-          " selected"
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: () => setSelectedItems([]),
-            children: "Clear selection"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        onBulkDelete && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "destructive",
-            size: "sm",
-            onClick: handleBulkDelete,
-            children: [
-              /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4 mr-2" }),
-              "Delete Selected"
-            ]
-          }
-        ),
-        enableExport && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => onExport == null ? void 0 : onExport(selectedItems, "csv"),
-            children: [
-              /* @__PURE__ */ jsx(Download, { className: "w-4 h-4 mr-2" }),
-              "Export Selected"
-            ]
-          }
-        )
-      ] })
-    ] }) });
-  };
-  const renderFilterPanelSection = () => {
-    if (!showFilterPanel) return null;
-    return /* @__PURE__ */ jsx(Card, { className: "p-4 mb-4", children: renderFilterPanel ? renderFilterPanel(onFilter || (() => {
-    })) : /* @__PURE__ */ jsx("div", { className: "text-center text-muted-foreground py-4", children: "Filter functionality not implemented yet" }) });
-  };
-  const renderCreateModal = () => {
-    if (!showCreateModal) return null;
-    return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.entries(selectedItem).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsxs("span", { className: "font-medium capitalize", children: [
-            key,
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx("span", { children: (value == null ? void 0 : value.toString()) || "-" })
-        ] }, key)) }) })
-      }
-    );
-  };
-  return /* @__PURE__ */ jsx(AppLayout, { children: /* @__PURE__ */ jsxs(
-    PageTemplate,
-    {
-      className: cn("container mx-auto px-4 py-6", className),
-      "data-component-name": "EntityManagementTemplate",
-      children: [
-        headerSlot,
-        renderPageHeader(),
-        toolbarSlot,
-        renderFilterPanelSection(),
-        renderToolbar(),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          listHeaderSlot,
-          /* @__PURE__ */ 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: DollarSign,
-      aggregation: "sum"
-    },
-    {
-      key: "monthlyIncome",
-      label: "Monthly Income",
-      type: "currency",
-      trend: true,
-      icon: TrendingUp,
-      aggregation: "sum"
-    },
-    {
-      key: "monthlyExpenses",
-      label: "Monthly Expenses",
-      type: "currency",
-      trend: true,
-      icon: Wallet,
-      aggregation: "sum"
-    },
-    {
-      key: "savingsRate",
-      label: "Savings Rate",
-      type: "percentage",
-      target: 20,
-      icon: 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 {
@@ -9650,6 +8125,7 @@ function createReactApp(config) {
     enableQuery = true,
     enableRouting = true,
     auth,
+    navigation,
     customProviders = []
   } = appConfig;
   const queryClient = new QueryClient({
@@ -9684,7 +8160,7 @@ function createReactApp(config) {
       tree = /* @__PURE__ */ jsx(Provider, { children: tree }, Provider.name);
     });
     if (enableRouting) {
-      tree = /* @__PURE__ */ jsx(SidebarProvider, { children: tree });
+      tree = /* @__PURE__ */ jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsx(SidebarProvider, { children: tree }) });
     }
     if (enableAuth) {
       tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
@@ -11940,7 +10416,6 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
-  CategoryBreakdownPanel,
   Chart,
   ColorSwatch,
   ComponentShowcasePage,
@@ -11975,15 +10450,12 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EmptyState,
-  EntityListPanel,
-  EntityManagementTemplate,
-  EntityPerformanceDashboardTemplate,
-  EntityPerformanceDashboardTemplateWithRealTime,
   ErrorBoundary,
   FileUpload,
   FormField,
   FormGroup,
   GlobalSearch,
+  Icon,
   IconBadge,
   Input,
   Label,
@@ -11991,10 +10463,9 @@ export {
   LoginForm,
   LogoutButton,
   MetricCalculationEngine,
-  MetricsOverviewPanel,
-  MetricsOverviewWithInsightsPanel,
   Modal,
   NavMenu,
+  NavigationProvider,
   PageTemplate,
   Pagination,
   PaletteSwitcher,
@@ -12011,6 +10482,7 @@ export {
   SelectTrigger,
   SelectValue,
   ShowcaseSection,
+  Sidebar,
   SidebarButton,
   SidebarProvider,
   Skeleton,
@@ -12033,7 +10505,6 @@ export {
   Toast,
   ToastContainer,
   Tooltip,
-  TrendAnalysisPanel,
   UI_CONFIG,
   UserAvatar,
   UserMenu,
@@ -12043,14 +10514,15 @@ export {
   createReactApp,
   createSimpleApp,
   env,
-  financialConfig,
   formatNumberWithTooltip,
   getAnimationClasses,
   getChartHeight,
   getContainerHeightClass,
+  getIcon,
+  getNavigationItems,
   interactionVariants,
+  isValidIcon,
   legacyPatterns,
-  sampleFinancialData,
   setGlobalAuthService,
   tooltipContent,
   useApiMutation,
@@ -12059,6 +10531,7 @@ export {
   useCreateExample,
   useDeleteExample,
   useGetExample,
+  useNavigation,
   usePermissions,
   useSidebar,
   useTextOverflow,