@optifye/dashboard-core 4.2.9 → 4.3.3

package/dist/index.mjs

@@ -2080,28 +2080,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);
       }
-      const roleValue = profile ? profile[roleColumn] : void 0;
-      return { ...basicUser, role: roleValue };
+      let roleValue = void 0;
+      if (profileResult && !profileResult.error && profileResult.data) {
+        roleValue = profileResult.data[roleColumn];
+      }
+      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]);
@@ -2136,7 +2150,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
                 });
               }
             }
@@ -2174,7 +2189,8 @@ var AuthProvider = ({ children }) => {
               identifyCoreUser(userDetails.id, {
                 email: userDetails.email,
                 name: userDetails.email,
-                role: userDetails.role
+                role: userDetails.role,
+                role_level: userDetails.role_level
               });
             }
           }
@@ -17960,6 +17976,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__ */ jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", children: [
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsxs(
+      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__ */ jsx(Cell, { fill: gaugeColor }),
+          /* @__PURE__ */ jsx(Cell, { fill: "#f3f4f6" })
+        ]
+      }
+    ) }) }),
+    targetAngle !== null && /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
+        value.toFixed(unit === "%" ? 1 : 0),
+        unit
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
+      target !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
+        "Target: ",
+        target,
+        unit
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
+      min,
+      unit
+    ] }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: data2.name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+          "Value: ",
+          data2.value,
+          showPercentages && ` (${data2.payload.percentage}%)`
+        ] })
+      ] });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full ${className}`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
+    /* @__PURE__ */ jsx(
+      Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+      }
+    )
+  ] }) }) });
+};
 var TrendIcon = ({ trend }) => {
   if (trend === "up") {
     return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 text-green-500" });
@@ -22558,7 +22755,7 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${additionalStyles}
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
-var Legend5 = () => /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
@@ -22696,8 +22893,8 @@ var WorkspaceGrid = React14__default.memo(({
   const { VideoGridView: VideoGridViewComponent } = useRegistry();
   return /* @__PURE__ */ jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(Legend5, {}) }) }),
-      /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsx(Legend5, {}) })
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(Legend6, {}) }) }),
+      /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsx(Legend6, {}) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsx(
       VideoGridViewComponent,
@@ -23300,6 +23497,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__ */ jsx("div", { className: "p-4", children: "Loading workspace display names..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-4 text-red-600", children: [
+      "Error loading workspace display names: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "p-6 max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold mb-6", children: "Workspace Display Names Examples" }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "1. All Workspace Display Names" }),
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Using utility function:" }),
+        ` getWorkspaceDisplayName('WS01') = "`,
+        getWorkspaceDisplayName("WS01"),
+        '"'
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "2. Single Workspace Display Name" }),
+      /* @__PURE__ */ jsx("div", { className: "p-3 border rounded-lg", children: singleLoading ? /* @__PURE__ */ jsx("div", { children: "Loading WS01..." }) : /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "WS01:" }),
+        " ",
+        singleWorkspaceName
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "3. Specific Workspaces Map" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: mapLoading ? /* @__PURE__ */ jsx("div", { children: "Loading specific workspaces..." }) : Object.entries(displayNamesMap).map(([workspaceId, displayName]) => /* @__PURE__ */ jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Migration Guide" }),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Before (hardcoded):" }) }),
+        /* @__PURE__ */ jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{getWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsx("br", {}),
+          "const name = getWorkspaceDisplayName('WS01'); // Synchronous, hardcoded"
+        ] }),
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "After (from Supabase):" }) }),
+        /* @__PURE__ */ jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{useWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsx("br", {}),
+          "const ",
+          `{displayName, loading}`,
+          " = useWorkspaceDisplayName('WS01'); // Async, from database"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-blue-700", children: [
+          /* @__PURE__ */ 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;
@@ -24745,6 +25014,234 @@ var AIAgentView = () => {
     });
   }
   const renderAssistantContent = (content) => {
+    const parseChartPatterns = (text) => {
+      const chartElements = [];
+      let lastIndex = 0;
+      const chartRegex = /\[\s*(?:Calling\s+|CALL\s+)?(create_[a-z_]+)\s*\(([\s\S]*?)\)\s*\]/g;
+      let match;
+      const processedIndices = /* @__PURE__ */ new Set();
+      while ((match = chartRegex.exec(text)) !== null) {
+        const startIndex = match.index;
+        const endIndex = startIndex + match[0].length;
+        if (!processedIndices.has(startIndex)) {
+          processedIndices.add(startIndex);
+          if (startIndex > lastIndex) {
+            const beforeText = text.substring(lastIndex, startIndex);
+            chartElements.push(
+              /* @__PURE__ */ 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) {
+              chartElements.push(chartElement);
+            }
+          } catch (error) {
+            console.error(`Failed to parse chart ${chartType}:`, error);
+            chartElements.push(
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "text-red-500 text-sm",
+                  children: [
+                    "Error rendering chart: ",
+                    match[0]
+                  ]
+                },
+                `error-${startIndex}`
+              )
+            );
+          }
+          lastIndex = endIndex;
+        }
+      }
+      if (lastIndex < text.length) {
+        const remainingText = text.substring(lastIndex);
+        chartElements.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: formatMessage(remainingText) }
+            },
+            `text-${lastIndex}`
+          )
+        );
+      }
+      if (chartElements.length === 1 && lastIndex === 0) {
+        return null;
+      }
+      return chartElements;
+    };
+    const parseChartArguments = (argsString) => {
+      const args = {};
+      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];
+        try {
+          args[paramName] = JSON.parse(jsonValue);
+          argsString = argsString.replace(jsonMatch[0], "");
+        } catch (e) {
+          console.error(`Failed to parse ${paramName} JSON:`, e);
+        }
+      }
+      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;
+        }
+      }
+      return args;
+    };
+    const renderChart = (chartType, args, key) => {
+      switch (chartType) {
+        case "create_gauge_chart":
+          return /* @__PURE__ */ jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ 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":
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Bar chart missing required parameters");
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+            /* @__PURE__ */ 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__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `bar-${key}`);
+        case "create_line_chart":
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Line chart missing required parameters");
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: {
+            height: args.height || 256,
+            width: args.width || "100%"
+          }, children: [
+            /* @__PURE__ */ 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__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `line-${key}`);
+        case "create_pie_chart":
+          if (!args.data || !args.label_field || !args.value_field) {
+            console.error("Pie chart missing required parameters");
+            return null;
+          }
+          const pieData = args.data.map((item) => ({
+            name: item[args.label_field],
+            value: item[args.value_field]
+          }));
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsx(
+              PieChart4,
+              {
+                data: pieData,
+                showPercentages: args.show_percentages || false
+              }
+            ) })
+          ] }, `pie-${key}`);
+        case "create_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__ */ jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ 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__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ 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}`);
+        default:
+          console.warn(`Unknown chart type: ${chartType}`);
+          return null;
+      }
+    };
+    const chartContent = parseChartPatterns(content);
+    if (chartContent) {
+      return /* @__PURE__ */ jsx("div", { className: "formatted-content", children: chartContent });
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -30957,4 +31454,4 @@ var S3Service = class {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GaugeChart, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, PieChart4 as PieChart, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "4.2.9",
+  "version": "4.3.3",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",