SDK

import { UpsolveDashboard } from "@upsolve-labs/sdk";
import { Theme } from "@upsolve-labs/utils";

const customTheme: Theme = {
  common: {
    // Layout & Spacing
    dashboardColumns: {
      lg: 8,
      md: 8,
      sm: 8,
      xs: 8,
      xxs: 8,
    },
    spacing: 10,

    // Typography
    dashboardFontFamily: "Helvetica",
    dashboardFontWeight: 400,
    chartFontWeight: 400,
    statCardTitleFontWeight: 400,
    statCardContentFontWeight: 400,
    labelFontSize: 16,

    // Card Styling
    cardBorderRadius: 25,
    cardPadding: {
      left: 10,
      right: 10,
      top: 10,
      bottom: 10,
    },
    cardTitlePosition: "left",

    // Button Styling
    buttonBorderRadius: 25,

    // Tabs & Labels
    tabsPlacement: "center",
    labelPadding: {
      left: 15,
      right: 15,
      top: 15,
      bottom: 15,
    },

    // Chart Subtitle
    chartSubtitlePosition: "left",
    chartSubtitleFontWeight: 400,
    chartSubtitleItalic: false,

    // Chart Configuration
    yAxisWidth: undefined, // Only used for bar charts

    // Filter Display
    hideFilterPills: false,
    hideFilterIcon: false,
    hideChartFilterIcon: false,

    // Info Tooltip
    infoTooltipIconSize: 20,
    infoTooltipIconPosition: "left",

    // Custom Messages
    noDataText: "No data available",
  },
  light: {
    // Background Colors
    dashboardBackgroundColor: "#50e3c2",
    widgetBackgroundColor: "rgba(245, 236, 105, 0.6)",
    chartBackgroundColor: "#f5a623",

    // Text Colors
    dashboardFontColor: "#000000",
    chartFontColor: "#000000",
    statCardTitleFontColor: "#000000",
    statCardContentFontColor: "#000000",
    chartSubtitleFontColor: "#000000",

    // Border Colors
    cardBorderColor: "#f5a623",
    sideBarBorderColor: "#f5a623",

    // Button Colors
    buttonColor: "#f5a623",
    buttonTextColor: "#ffffff",

    // Table Colors
    tableHeaderBackgroundColor: "rgba(245, 236, 105, 0.6)",
    tableActiveRowBackgroundColor: "#f5a623",
    tableDataBackgroundColor: "rgba(245, 236, 105, 0.6)",

    // Loading States
    chartSkeletonColor: "#e0e0e0",
  },
  dark: {
    // Background Colors
    dashboardBackgroundColor: "#4a8d61",
    widgetBackgroundColor: "#7c7c7c",
    chartBackgroundColor: "#7c7c7c",

    // Text Colors
    dashboardFontColor: "#ffffff",
    chartFontColor: "#ffffff",
    statCardTitleFontColor: "#ffffff",
    statCardContentFontColor: "#ffffff",
    chartSubtitleFontColor: "#ffffff",

    // Border Colors
    cardBorderColor: "#23f56a",
    sideBarBorderColor: "#23f56a",

    // Button Colors
    buttonColor: "#23f56a",
    buttonTextColor: "#ffffff",

    // Table Colors
    tableHeaderBackgroundColor: "#7c7c7c",
    tableActiveRowBackgroundColor: "#23f56a",
    tableDataBackgroundColor: "#7c7c7c",

    // Loading States
    chartSkeletonColor: "#4a4a4a",
  },
};

export default function MyDashboard() {
  return (
    <UpsolveDashboard
      dashboardId="your-dashboard-id"
      tenantJWT="your-jwt-token"
      themeConfigs={customTheme}
      theme="light" // or "dark"
    />
  );
}

const themeConfig = {
  common: {
    cardBorderRadius: 25,
    dashboardColumns: { lg: 8, md: 8, sm: 8, xs: 8, xxs: 8 },
    spacing: 10,
    dashboardFontFamily: "Helvetica",
    dashboardFontWeight: 400,
    chartFontWeight: 400,
    cardTitlePosition: "left",
    statCardTitleFontWeight: 400,
    statCardContentFontWeight: 400,
    buttonBorderRadius: 25,
    tabsPlacement: "center",
    labelPadding: { left: 15, right: 15, top: 15, bottom: 15 },
    labelFontSize: 16,
  },
  light: {
    chartBackgroundColor: "#f5a623",
    cardBorderColor: "#f5a623",
    sideBarBorderColor: "#f5a623",
    tableHeaderBackgroundColor: "rgba(245, 236, 105, 0.6)",
    tableActiveRowBackgroundColor: "#f5a623",
    tableDataBackgroundColor: "rgba(245, 236, 105, 0.6)",
    dashboardBackgroundColor: "#50e3c2",
    widgetBackgroundColor: "rgba(245, 236, 105, 0.6)",
    buttonColor: "#f5a623",
    buttonTextColor: "#ffffff",
    dashboardFontColor: "#000000",
    chartFontColor: "#000000",
    statCardTitleFontColor: "#000000",
    statCardContentFontColor: "#000000",
  },
  dark: {
    chartBackgroundColor: "#7c7c7c",
    cardBorderColor: "#23f56a",
    sideBarBorderColor: "#23f56a",
    tableHeaderBackgroundColor: "#7c7c7c",
    tableActiveRowBackgroundColor: "#23f56a",
    tableDataBackgroundColor: "#7c7c7c",
    dashboardBackgroundColor: "#4a8d61",
    widgetBackgroundColor: "#7c7c7c",
    buttonColor: "#23f56a",
    buttonTextColor: "#ffffff",
    dashboardFontColor: "#ffffff",
    chartFontColor: "#ffffff",
    statCardTitleFontColor: "#ffffff",
    statCardContentFontColor: "#ffffff",
  },
};

// Encode the theme config as a URL parameter
const iframeSrc = `https://hub.upsolve.ai/share/dashboard/${dashboardId}?theme=light&jwt=${jwtToken}&themeConfigs=${encodeURIComponent(JSON.stringify(themeConfig))}`;

// Use in iframe
<iframe
  src={iframeSrc}
  width="1000"
  height="1000"
  title="Embedded Dashboard"
/>

import React, { useState, useEffect } from "react";
import axios from "axios";

function EmbeddedDashboard() {
  const [jwtToken, setJwtToken] = useState(null);
  const dashboardId = "your-dashboard-id";

  useEffect(() => {
    // Get your JWT token (example)
    const fetchToken = async () => {
      const response = await axios.post("/api/register-tenant", {
        // your registration payload
      });
      setJwtToken(response.data.token);
    };
    fetchToken();
  }, []);

  const themeConfig = {
    common: {
      dashboardColumns: { lg: 12, md: 12, sm: 8, xs: 6, xxs: 4 },
      spacing: 16,
      dashboardFontFamily: "Inter",
      dashboardFontWeight: 400,
      cardBorderRadius: 8,
      buttonBorderRadius: 8,
    },
    light: {
      dashboardBackgroundColor: "#ffffff",
      widgetBackgroundColor: "#f9fafb",
      cardBorderColor: "#e5e7eb",
      buttonColor: "#3b82f6",
      buttonTextColor: "#ffffff",
    },
    dark: {
      dashboardBackgroundColor: "#1f2937",
      widgetBackgroundColor: "#374151",
      cardBorderColor: "#4b5563",
      buttonColor: "#60a5fa",
      buttonTextColor: "#ffffff",
    },
  };

  if (!jwtToken) return <div>Loading...</div>;

  const iframeSrc = `https://hub.upsolve.ai/share/dashboard/${dashboardId}?theme=light&jwt=${jwtToken}&themeConfigs=${encodeURIComponent(JSON.stringify(themeConfig))}`;

  return (
    <iframe
      src={iframeSrc}
      width="100%"
      height="800"
      style={{ border: "none" }}
      title="Embedded Dashboard"
    />
  );
}