@optifye/dashboard-core 4.2.9 → 4.3.4

package/dist/index.js

@@ -2109,28 +2109,42 @@ var AuthProvider = ({ children }) => {
       id: supabaseUser.id,
       email: supabaseUser.email
     };
-    if (!userProfileTable || !supabase) return basicUser;
+    if (!supabase) return basicUser;
     try {
       const timeoutPromise = new Promise(
         (_, reject) => setTimeout(() => reject(new Error("Profile fetch timeout")), 5e3)
       );
-      const fetchPromise = supabase.from(userProfileTable).select(roleColumn).eq("id", supabaseUser.id).single();
-      const { data: profile, error: profileError } = await Promise.race([
-        fetchPromise,
-        timeoutPromise
+      const rolePromise = supabase.from("user_roles").select("role_level").eq("user_id", supabaseUser.id).single();
+      let profilePromise = null;
+      if (userProfileTable) {
+        profilePromise = supabase.from(userProfileTable).select(roleColumn).eq("id", supabaseUser.id).single();
+      }
+      const [roleResult, profileResult] = await Promise.race([
+        Promise.all([
+          rolePromise,
+          profilePromise || Promise.resolve(null)
+        ]),
+        timeoutPromise.then(() => {
+          throw new Error("Timeout");
+        })
       ]);
-      if (profileError) {
-        if (profileError.message.includes("does not exist") || profileError.message.includes("No rows found") || profileError.code === "PGRST116") {
-          console.log("User profile table not found or user not in table, using basic auth info");
-          return basicUser;
-        }
-        console.error("Error fetching user profile:", profileError);
-        return basicUser;
+      let roleLevel = void 0;
+      if (roleResult && !roleResult.error && roleResult.data) {
+        roleLevel = roleResult.data.role_level;
+      } else if (roleResult?.error) {
+        console.log("Error fetching role_level:", roleResult.error.message);
+      }
+      let roleValue = void 0;
+      if (profileResult && !profileResult.error && profileResult.data) {
+        roleValue = profileResult.data[roleColumn];
       }
-      const roleValue = profile ? profile[roleColumn] : void 0;
-      return { ...basicUser, role: roleValue };
+      return {
+        ...basicUser,
+        role: roleValue,
+        role_level: roleLevel
+      };
     } catch (err) {
-      console.error("Error fetching user profile:", err);
+      console.error("Error fetching user details:", err);
       return basicUser;
     }
   }, [supabase, userProfileTable, roleColumn]);
@@ -2165,7 +2179,8 @@ var AuthProvider = ({ children }) => {
                   email: userDetails.email,
                   name: userDetails.email,
                   // using email as the display name for now
-                  role: userDetails.role
+                  role: userDetails.role,
+                  role_level: userDetails.role_level
                 });
               }
             }
@@ -2203,7 +2218,8 @@ var AuthProvider = ({ children }) => {
               identifyCoreUser(userDetails.id, {
                 email: userDetails.email,
                 name: userDetails.email,
-                role: userDetails.role
+                role: userDetails.role,
+                role_level: userDetails.role_level
               });
             }
           }
@@ -17989,6 +18005,187 @@ var SOPComplianceChart = ({
     renderLegend()
   ] });
 };
+var GaugeChart = ({
+  value,
+  min,
+  max,
+  target,
+  label,
+  unit = "",
+  thresholds,
+  className = ""
+}) => {
+  const normalizedValue = (value - min) / (max - min) * 100;
+  const clampedValue = Math.max(0, Math.min(100, normalizedValue));
+  const data = [
+    { name: "value", value: clampedValue },
+    { name: "empty", value: 100 - clampedValue }
+  ];
+  const getColor = () => {
+    if (thresholds && thresholds.length > 0) {
+      const sortedThresholds = [...thresholds].sort((a, b) => a.value - b.value);
+      for (let i = sortedThresholds.length - 1; i >= 0; i--) {
+        if (value >= sortedThresholds[i].value) {
+          return sortedThresholds[i].color;
+        }
+      }
+      return sortedThresholds[0].color;
+    }
+    if (clampedValue < 33) return "#ef4444";
+    if (clampedValue < 66) return "#f59e0b";
+    return "#10b981";
+  };
+  const gaugeColor = getColor();
+  const targetAngle = target !== void 0 ? 180 - (target - min) / (max - min) * 180 : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.Pie,
+      {
+        data,
+        cx: "50%",
+        cy: "50%",
+        startAngle: 180,
+        endAngle: 0,
+        innerRadius: "65%",
+        outerRadius: "85%",
+        paddingAngle: 0,
+        dataKey: "value",
+        animationBegin: 0,
+        animationDuration: 1e3,
+        animationEasing: "ease-out",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: gaugeColor }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: "#f3f4f6" })
+        ]
+      }
+    ) }) }),
+    targetAngle !== null && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute top-1/2 left-1/2 w-1 h-[42%] bg-gray-800 origin-bottom",
+        style: {
+          transform: `translate(-50%, -100%) rotate(${targetAngle}deg)`,
+          transition: "transform 0.3s ease-out"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
+        value.toFixed(unit === "%" ? 1 : 0),
+        unit
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
+      target !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
+        "Target: ",
+        target,
+        unit
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
+      min,
+      unit
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-[15%] right-[15%] text-xs text-gray-500", children: [
+      max,
+      unit
+    ] })
+  ] }) });
+};
+var DEFAULT_COLORS = [
+  "#3b82f6",
+  // blue-500
+  "#10b981",
+  // green-500
+  "#f59e0b",
+  // amber-500
+  "#ef4444",
+  // red-500
+  "#8b5cf6",
+  // violet-500
+  "#06b6d4",
+  // cyan-500
+  "#f97316",
+  // orange-500
+  "#6366f1"
+  // indigo-500
+];
+var PieChart4 = ({
+  data,
+  className = "",
+  showPercentages = false,
+  colors = DEFAULT_COLORS
+}) => {
+  const total = data.reduce((sum, entry) => sum + entry.value, 0);
+  const dataWithPercentage = data.map((entry) => ({
+    ...entry,
+    percentage: (entry.value / total * 100).toFixed(1)
+  }));
+  const renderCustomLabel = (props) => {
+    if (!showPercentages) return null;
+    const { cx: cx2, cy, midAngle, innerRadius, outerRadius, percentage } = props;
+    const RADIAN = Math.PI / 180;
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const x = cx2 + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "text",
+      {
+        x,
+        y,
+        fill: "white",
+        textAnchor: x > cx2 ? "start" : "end",
+        dominantBaseline: "central",
+        className: "text-xs font-medium",
+        children: [
+          percentage,
+          "%"
+        ]
+      }
+    );
+  };
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+      const data2 = payload[0];
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: data2.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
+          "Value: ",
+          data2.value,
+          showPercentages && ` (${data2.payload.percentage}%)`
+        ] })
+      ] });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Pie,
+      {
+        data: dataWithPercentage,
+        cx: "50%",
+        cy: "50%",
+        labelLine: false,
+        label: showPercentages ? renderCustomLabel : void 0,
+        outerRadius: "80%",
+        fill: "#8884d8",
+        dataKey: "value",
+        animationBegin: 0,
+        animationDuration: 800,
+        children: dataWithPercentage.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+      }
+    )
+  ] }) }) });
+};
 var TrendIcon = ({ trend }) => {
   if (trend === "up") {
     return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-4 w-4 text-green-500" });
@@ -22587,7 +22784,7 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${additionalStyles}
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
-var Legend5 = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-xs sm:text-sm", children: [
+var Legend6 = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-xs sm:text-sm", children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
@@ -22725,8 +22922,8 @@ var WorkspaceGrid = React14__namespace.default.memo(({
   const { VideoGridView: VideoGridViewComponent } = useRegistry();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, {}) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       VideoGridViewComponent,
@@ -23329,6 +23526,78 @@ var WorkspaceMonthlyDataFetcher = ({
   }, [workspaceId, selectedMonth, selectedYear, supabase, onDataLoaded, onLoadingChange]);
   return null;
 };
+var WorkspaceDisplayNameExample = () => {
+  const { displayNames, loading, error } = useWorkspaceDisplayNames();
+  const { displayName: singleWorkspaceName, loading: singleLoading } = useWorkspaceDisplayName("WS01");
+  const { displayNames: displayNamesMap, loading: mapLoading } = useWorkspaceDisplayNamesMap(["WS01", "WS02", "WS03"]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: "Loading workspace display names..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-red-600", children: [
+      "Error loading workspace display names: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold mb-6", children: "Workspace Display Names Examples" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "1. All Workspace Display Names" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Object.entries(displayNames).map(([workspaceId, displayName]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Using utility function:" }),
+        ` getWorkspaceDisplayName('WS01') = "`,
+        getWorkspaceDisplayName("WS01"),
+        '"'
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "2. Single Workspace Display Name" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border rounded-lg", children: singleLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading WS01..." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "WS01:" }),
+        " ",
+        singleWorkspaceName
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "3. Specific Workspaces Map" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: mapLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading specific workspaces..." }) : Object.entries(displayNamesMap).map(([workspaceId, displayName]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Migration Guide" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Before (hardcoded):" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{getWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          "const name = getWorkspaceDisplayName('WS01'); // Synchronous, hardcoded"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "After (from Supabase):" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{useWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          "const ",
+          `{displayName, loading}`,
+          " = useWorkspaceDisplayName('WS01'); // Async, from database"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-blue-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Note:" }),
+          " The old synchronous functions are still available as fallbacks and for backward compatibility."
+        ] })
+      ] })
+    ] })
+  ] });
+};
 var Breadcrumbs = ({ items }) => {
   const navigation = useNavigation();
   if (!items || items.length === 0) return null;
@@ -24774,6 +25043,447 @@ var AIAgentView = () => {
     });
   }
   const renderAssistantContent = (content) => {
+    const parseChartPatterns = (text) => {
+      const chartElements = [];
+      let lastIndex = 0;
+      console.log("[DEBUG] Parsing chart patterns from text:", text);
+      const chartRegex = /\[\s*(?:Calling\s+|CALL\s+)?(create_[a-z_]+)\s*\(([\s\S]*?)\)\s*\]/g;
+      let match;
+      const processedIndices = /* @__PURE__ */ new Set();
+      let matchCount = 0;
+      while ((match = chartRegex.exec(text)) !== null) {
+        matchCount++;
+        const startIndex = match.index;
+        const endIndex = startIndex + match[0].length;
+        console.log(`[DEBUG] Found chart pattern #${matchCount}:`, {
+          fullMatch: match[0],
+          chartType: match[1],
+          argsString: match[2],
+          startIndex,
+          endIndex
+        });
+        if (!processedIndices.has(startIndex)) {
+          processedIndices.add(startIndex);
+          if (startIndex > lastIndex) {
+            const beforeText = text.substring(lastIndex, startIndex);
+            chartElements.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  dangerouslySetInnerHTML: { __html: formatMessage(beforeText) }
+                },
+                `text-${lastIndex}`
+              )
+            );
+          }
+          const chartType = match[1];
+          const argsString = match[2];
+          try {
+            const args = parseChartArguments(argsString);
+            const chartElement = renderChart(chartType, args, startIndex);
+            if (chartElement) {
+              console.log(`[DEBUG] Successfully rendered chart: ${chartType}`);
+              chartElements.push(chartElement);
+            } else {
+              console.warn(`[DEBUG] Chart element was null for type: ${chartType}`);
+            }
+          } catch (error) {
+            console.error(`Failed to parse chart ${chartType}:`, error);
+            chartElements.push(
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "text-red-500 text-sm",
+                  children: [
+                    "Error rendering chart: ",
+                    match[0]
+                  ]
+                },
+                `error-${startIndex}`
+              )
+            );
+          }
+          lastIndex = endIndex;
+        }
+      }
+      console.log(`[DEBUG] Total chart patterns found: ${matchCount}`);
+      if (lastIndex < text.length) {
+        const remainingText = text.substring(lastIndex);
+        chartElements.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: formatMessage(remainingText) }
+            },
+            `text-${lastIndex}`
+          )
+        );
+      }
+      if (chartElements.length === 1 && lastIndex === 0) {
+        console.log("[DEBUG] No charts found in text, returning null");
+        return null;
+      }
+      console.log(`[DEBUG] Returning ${chartElements.length} chart elements`);
+      return chartElements;
+    };
+    const parseChartArguments = (argsString) => {
+      const args = {};
+      console.log("[DEBUG] Parsing chart arguments:", argsString);
+      const jsonParamRegex = /(\w+)\s*=\s*(\[[\s\S]*?\](?=\s*(?:,|\s*\)|\s*$))|\{[\s\S]*?\}(?=\s*(?:,|\s*\)|\s*$)))/g;
+      let jsonMatch;
+      while ((jsonMatch = jsonParamRegex.exec(argsString)) !== null) {
+        const paramName = jsonMatch[1];
+        const jsonValue = jsonMatch[2];
+        console.log(`[DEBUG] Found JSON parameter: ${paramName} = ${jsonValue}`);
+        try {
+          args[paramName] = JSON.parse(jsonValue);
+          console.log(`[DEBUG] Successfully parsed ${paramName}:`, args[paramName]);
+          argsString = argsString.replace(jsonMatch[0], "");
+        } catch (e) {
+          console.error(`Failed to parse ${paramName} JSON:`, e);
+          console.error(`JSON value that failed:`, jsonValue);
+        }
+      }
+      const argRegex = /(\w+)\s*=\s*("([^"]*)"|'([^']*)'|([^,\s\)]+))/g;
+      let argMatch;
+      while ((argMatch = argRegex.exec(argsString)) !== null) {
+        const key = argMatch[1];
+        const value = argMatch[3] || argMatch[4] || argMatch[5];
+        if (key === "data") continue;
+        if (value === "true" || value === "True") {
+          args[key] = true;
+        } else if (value === "false" || value === "False") {
+          args[key] = false;
+        } else if (value === "null" || value === "None") {
+          args[key] = null;
+        } else if (!isNaN(Number(value)) && value !== "") {
+          args[key] = Number(value);
+        } else {
+          args[key] = value;
+        }
+      }
+      console.log("[DEBUG] Final parsed arguments:", args);
+      return args;
+    };
+    const renderChart = (chartType, args, key) => {
+      console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
+      switch (chartType) {
+        case "create_gauge_chart":
+          console.log("[DEBUG] Rendering gauge chart");
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            GaugeChart,
+            {
+              value: args.value || 0,
+              min: args.min_value || 0,
+              max: args.max_value || 100,
+              target: args.target,
+              label: args.title || "",
+              unit: args.unit || "",
+              thresholds: args.thresholds,
+              className: "w-full max-w-sm"
+            }
+          ) }, `gauge-${key}`);
+        case "create_bar_chart":
+          console.log("[DEBUG] Rendering bar chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BarChart,
+              {
+                data: args.data,
+                bars: [{
+                  dataKey: args.y_field,
+                  fill: args.color || "#3b82f6",
+                  labelList: args.show_values
+                }],
+                xAxisDataKey: args.x_field,
+                className: "h-64",
+                showLegend: false
+              }
+            ),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `bar-${key}`);
+        case "create_line_chart":
+          console.log("[DEBUG] Rendering line chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: {
+            height: args.height || 256,
+            width: args.width || "100%"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              LineChart,
+              {
+                data: args.data,
+                lines: [{
+                  dataKey: args.y_field,
+                  stroke: "#3b82f6",
+                  strokeWidth: 2
+                }],
+                xAxisDataKey: args.x_field,
+                className: "h-full",
+                showLegend: false
+              }
+            ),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `line-${key}`);
+        case "create_pie_chart":
+          console.log("[DEBUG] Rendering pie chart");
+          if (!args.data || !args.label_field || !args.value_field) {
+            console.error("Pie chart missing required parameters:", { data: !!args.data, label_field: !!args.label_field, value_field: !!args.value_field });
+            console.error("Available args:", Object.keys(args));
+            return null;
+          }
+          const pieData = args.data.map((item) => ({
+            name: item[args.label_field],
+            value: item[args.value_field]
+          }));
+          console.log("[DEBUG] Pie chart data transformed:", pieData);
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
+              PieChart4,
+              {
+                data: pieData,
+                showPercentages: args.show_percentages || false
+              }
+            ) })
+          ] }, `pie-${key}`);
+        case "create_comparison_table":
+          console.log("[DEBUG] Rendering comparison table");
+          if (!args.data) {
+            console.error("Comparison table missing required data");
+            return null;
+          }
+          const columns = args.columns || Object.keys(args.data[0] || {});
+          let sortedData = [...args.data];
+          if (args.sort_by && columns.includes(args.sort_by)) {
+            sortedData.sort((a, b) => {
+              const aVal = a[args.sort_by];
+              const bVal = b[args.sort_by];
+              const comparison = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
+              return args.sort_descending === false ? comparison : -comparison;
+            });
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+                "th",
+                {
+                  className: `px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
+                  children: col
+                },
+                col
+              )) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  className: `px-4 py-2 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
+                  children: row[col]
+                },
+                col
+              )) }, rowIdx)) })
+            ] })
+          ] }, `table-${key}`);
+        case "create_multi_line_chart":
+          console.log("[DEBUG] Rendering multi-line chart");
+          if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
+            console.error("Multi-line chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_fields: !!args.y_fields,
+              legend: !!args.legend
+            });
+            return null;
+          }
+          const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              args.y_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Line,
+                {
+                  type: "monotone",
+                  dataKey: field,
+                  stroke: colors[index % colors.length],
+                  strokeWidth: 2,
+                  name: args.legend[index] || field,
+                  dot: { r: 4 },
+                  activeDot: { r: 6 }
+                },
+                field
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `multi-line-${key}`);
+        case "create_stacked_bar_chart":
+          console.log("[DEBUG] Rendering stacked bar chart");
+          if (!args.data || !args.x_field || !args.stack_fields) {
+            console.error("Stacked bar chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              stack_fields: !!args.stack_fields
+            });
+            return null;
+          }
+          const stackColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              args.stack_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Bar,
+                {
+                  dataKey: field,
+                  stackId: "stack",
+                  fill: stackColors[index % stackColors.length],
+                  name: field
+                },
+                field
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `stacked-bar-${key}`);
+        case "create_dual_axis_chart":
+          console.log("[DEBUG] Rendering dual-axis chart");
+          if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
+            console.error("Dual-axis chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              left_y_field: !!args.left_y_field,
+              right_y_field: !!args.right_y_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "left", orientation: "left", label: { value: args.left_label || "", angle: -90, position: "insideLeft" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "right", orientation: "right", label: { value: args.right_label || "", angle: 90, position: "insideRight" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { yAxisId: "left", dataKey: args.left_y_field, fill: "#3b82f6", name: args.left_label || args.left_y_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { yAxisId: "right", type: "monotone", dataKey: args.right_y_field, stroke: "#ef4444", strokeWidth: 2, name: args.right_label || args.right_y_field })
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `dual-axis-${key}`);
+        case "create_scatter_plot":
+          console.log("[DEBUG] Rendering scatter plot");
+          if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
+            console.error("Scatter plot missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field,
+              group_field: !!args.group_field
+            });
+            return null;
+          }
+          const groupedData = args.data.reduce((acc, item) => {
+            const group = item[args.group_field];
+            if (!acc[group]) {
+              acc[group] = [];
+            }
+            acc[group].push(item);
+            return acc;
+          }, {});
+          const scatterColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field, type: "number", name: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { dataKey: args.y_field, type: "number", name: args.y_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { cursor: { strokeDasharray: "3 3" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Scatter,
+                {
+                  name: group,
+                  data,
+                  fill: scatterColors[index % scatterColors.length]
+                },
+                group
+              ))
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `scatter-${key}`);
+        case "create_combo_chart":
+          console.log("[DEBUG] Rendering combo chart");
+          if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
+            console.error("Combo chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              bar_field: !!args.bar_field,
+              line_field: !!args.line_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "left", orientation: "left" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "right", orientation: "right" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { yAxisId: "left", dataKey: args.bar_field, fill: "#3b82f6", name: args.bar_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { yAxisId: "right", type: "monotone", dataKey: args.line_field, stroke: "#ef4444", strokeWidth: 2, name: args.line_field })
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `combo-${key}`);
+        case "create_area_chart":
+          console.log("[DEBUG] Rendering area chart");
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Area chart missing required parameters:", {
+              data: !!args.data,
+              x_field: !!args.x_field,
+              y_field: !!args.y_field
+            });
+            return null;
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Area,
+                {
+                  type: "monotone",
+                  dataKey: args.y_field,
+                  stroke: "#3b82f6",
+                  fill: args.fill ? "#3b82f6" : "none",
+                  fillOpacity: args.fill ? 0.6 : 0,
+                  name: args.y_field
+                }
+              )
+            ] }) }),
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `area-${key}`);
+        default:
+          console.warn(`Unknown chart type: ${chartType}`);
+          return null;
+      }
+    };
+    const chartContent = parseChartPatterns(content);
+    if (chartContent) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "formatted-content", children: chartContent });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -31029,6 +31739,7 @@ exports.DebugAuth = DebugAuth;
 exports.DebugAuthView = DebugAuthView_default;
 exports.EmptyStateMessage = EmptyStateMessage;
 exports.FactoryView = FactoryView_default;
+exports.GaugeChart = GaugeChart;
 exports.GridComponentsPlaceholder = GridComponentsPlaceholder;
 exports.Header = Header;
 exports.HelpView = HelpView_default;
@@ -31044,7 +31755,7 @@ exports.KPIsOverviewView = KPIsOverviewView_default;
 exports.LINE_1_UUID = LINE_1_UUID;
 exports.LargeOutputProgressChart = LargeOutputProgressChart;
 exports.LeaderboardDetailView = LeaderboardDetailView_default;
-exports.Legend = Legend5;
+exports.Legend = Legend6;
 exports.LineChart = LineChart;
 exports.LineHistoryCalendar = LineHistoryCalendar;
 exports.LineMonthlyHistory = LineMonthlyHistory;
@@ -31064,6 +31775,7 @@ exports.NoWorkspaceData = NoWorkspaceData;
 exports.OptifyeAgentClient = OptifyeAgentClient;
 exports.OutputProgressChart = OutputProgressChart;
 exports.PageHeader = PageHeader;
+exports.PieChart = PieChart4;
 exports.ProfileView = ProfileView_default;
 exports.RegistryProvider = RegistryProvider;
 exports.S3Service = S3Service;
@@ -31098,6 +31810,7 @@ exports.WORKSPACE_POSITIONS = WORKSPACE_POSITIONS;
 exports.WhatsAppShareButton = WhatsAppShareButton;
 exports.WorkspaceCard = WorkspaceCard;
 exports.WorkspaceDetailView = WorkspaceDetailView_default;
+exports.WorkspaceDisplayNameExample = WorkspaceDisplayNameExample;
 exports.WorkspaceGrid = WorkspaceGrid;
 exports.WorkspaceGridItem = WorkspaceGridItem;
 exports.WorkspaceHistoryCalendar = WorkspaceHistoryCalendar;