tienjs-chartbrew-plugin-strapi 0.1.0

package/dist/_chunks/App-Be1FtvNK.mjs

@@ -0,0 +1,618 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Link, Routes, Route } from "react-router-dom";
+import { Layouts, Page } from "@strapi/strapi/admin";
+import { LinkButton, Loader, Box, Flex, Typography, SingleSelect, SingleSelectOption, EmptyStateLayout, Alert, Link as Link$1, Checkbox, Grid, Button, Divider, Combobox, ComboboxOption } from "@strapi/design-system";
+import { ChartCircle, Plus, ExternalLink, ArrowLeft } from "@strapi/icons";
+import { P as PLUGIN_ID } from "./index-CXvgiYYO.mjs";
+import { g as getSettings, s as setSettings, i as instance } from "./store-CES_iNgI.mjs";
+async function login() {
+  const { host, token } = await getSettings();
+  return fetch(`${host}/user/relog`, {
+    method: "POST",
+    headers: new Headers({
+      accept: "application/json",
+      authorization: `Bearer ${token}`
+    })
+  }).then((response) => {
+    if (!response.ok) throw new Error("Cannot authenticate");
+    return response.json();
+  }).then((user) => {
+    return user;
+  }).catch((err) => {
+    return Promise.reject(err);
+  });
+}
+async function getUserTeam() {
+  const { host, token } = await getSettings();
+  return fetch(`${host}/team`, {
+    method: "GET",
+    headers: new Headers({
+      accept: "application/json",
+      authorization: `Bearer ${token}`
+    })
+  }).then((response) => {
+    if (!response.ok) throw new Error("Cannot fetch the template configuration");
+    return response.json();
+  }).then((teams) => {
+    return teams;
+  }).catch((err) => {
+    return Promise.reject(err);
+  });
+}
+async function getStrapiTemplate(teamId) {
+  const { host, token } = await getSettings();
+  return fetch(`${host}/team/${teamId}/template/community/strapi`, {
+    method: "GET",
+    headers: new Headers({
+      accept: "application/json",
+      authorization: `Bearer ${token}`
+    })
+  }).then((response) => {
+    if (!response.ok) throw new Error("Cannot fetch the template configuration");
+    return response.json();
+  }).then((template) => {
+    return template;
+  }).catch((err) => {
+    return Promise.reject(err);
+  });
+}
+async function getTeamConnections(teamId) {
+  const { host, token } = await getSettings();
+  return fetch(`${host}/team/${teamId}/connections`, {
+    method: "GET",
+    headers: new Headers({
+      accept: "application/json",
+      authorization: `Bearer ${token}`
+    })
+  }).then((response) => {
+    if (!response.ok) throw new Error("Cannot fetch the template configuration");
+    return response.json();
+  }).then((connections) => {
+    return connections;
+  }).catch((err) => {
+    return Promise.reject(err);
+  });
+}
+function Illo() {
+  return /* @__PURE__ */ jsxs("svg", { width: "159", height: "88", viewBox: "0 0 159 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M134.933 17.417C137.768 17.417 140.067 19.7153 140.067 22.5503C140.067 25.3854 137.768 27.6837 134.933 27.6837H105.6C108.435 27.6837 110.733 29.9819 110.733 32.817C110.733 35.6521 108.435 37.9503 105.6 37.9503H121.733C124.568 37.9503 126.867 40.2486 126.867 43.0837C126.867 45.9187 124.568 48.217 121.733 48.217H114.272C110.698 48.217 107.8 50.5153 107.8 53.3503C107.8 55.2404 109.267 56.9515 112.2 58.4837C115.035 58.4837 117.333 60.7819 117.333 63.617C117.333 66.4521 115.035 68.7503 112.2 68.7503H51.3333C48.4982 68.7503 46.2 66.4521 46.2 63.617C46.2 60.7819 48.4982 58.4837 51.3333 58.4837H22.7333C19.8982 58.4837 17.6 56.1854 17.6 53.3503C17.6 50.5153 19.8982 48.217 22.7333 48.217H52.0666C54.9017 48.217 57.2 45.9187 57.2 43.0837C57.2 40.2486 54.9017 37.9503 52.0666 37.9503H33.7333C30.8982 37.9503 28.6 35.6521 28.6 32.817C28.6 29.9819 30.8982 27.6837 33.7333 27.6837H63.0666C60.2316 27.6837 57.9333 25.3854 57.9333 22.5503C57.9333 19.7153 60.2316 17.417 63.0666 17.417H134.933ZM134.933 37.9503C137.768 37.9503 140.067 40.2486 140.067 43.0837C140.067 45.9187 137.768 48.217 134.933 48.217C132.098 48.217 129.8 45.9187 129.8 43.0837C129.8 40.2486 132.098 37.9503 134.933 37.9503Z",
+        fill: "#DBDBFA"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M95.826 16.6834L102.647 66.4348L103.26 71.4261C103.458 73.034 102.314 74.4976 100.706 74.695L57.7621 79.9679C56.1542 80.1653 54.6906 79.0219 54.4932 77.4139L47.8816 23.5671C47.7829 22.7631 48.3546 22.0313 49.1586 21.9326C49.1637 21.932 49.1688 21.9313 49.1739 21.9307L52.7367 21.5311L95.826 16.6834ZM55.6176 21.208L58.9814 20.8306Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M55.6176 21.208L58.9814 20.8306M95.826 16.6834L102.647 66.4348L103.26 71.4261C103.458 73.034 102.314 74.4976 100.706 74.695L57.7621 79.9679C56.1542 80.1653 54.6906 79.0219 54.4932 77.4139L47.8816 23.5671C47.7829 22.7631 48.3546 22.0313 49.1586 21.9326C49.1637 21.932 49.1688 21.9313 49.1739 21.9307L52.7367 21.5311L95.826 16.6834Z",
+        stroke: "#7E7BF6",
+        strokeWidth: "2.5"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M93.9695 19.8144L100.144 64.9025L100.699 69.4258C100.878 70.8831 99.8559 72.2077 98.416 72.3845L59.9585 77.1065C58.5185 77.2833 57.2062 76.2453 57.0272 74.7881L51.0506 26.112C50.9519 25.308 51.5236 24.5762 52.3276 24.4775L57.0851 23.8934",
+        fill: "#F0F0FF"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M97.701 7.33301H64.2927C63.7358 7.33301 63.2316 7.55873 62.8667 7.92368C62.5017 8.28862 62.276 8.79279 62.276 9.34967V65.083C62.276 65.6399 62.5017 66.1441 62.8667 66.509C63.2316 66.874 63.7358 67.0997 64.2927 67.0997H107.559C108.116 67.0997 108.62 66.874 108.985 66.509C109.35 66.1441 109.576 65.6399 109.576 65.083V19.202C109.576 18.6669 109.363 18.1537 108.985 17.7755L99.1265 7.92324C98.7484 7.54531 98.2356 7.33301 97.701 7.33301Z",
+        fill: "white",
+        stroke: "#7F7CFA",
+        strokeWidth: "2.5"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M98.026 8.17871V16.6833C98.026 17.8983 99.011 18.8833 100.226 18.8833H106.044",
+        stroke: "#807EFA",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M70.1594 56.2838H89.2261M70.1594 18.8838H89.2261H70.1594ZM70.1594 27.6838H101.693H70.1594ZM70.1594 37.2171H101.693H70.1594ZM70.1594 46.7505H101.693H70.1594Z",
+        stroke: "#817FFA",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function Dashboard() {
+  const [store, setStore] = useState({});
+  const [user, setUser] = useState({});
+  const [projects, setProjects] = useState([]);
+  const [pageLoading, setPageLoading] = useState(true);
+  const [dropdownProject, setDropdownProject] = useState("");
+  const [authError, setAuthError] = useState(false);
+  const [team, setTeam] = useState({});
+  const [teams, setTeams] = useState([]);
+  const [dropdownTeam, setDropdownTeam] = useState("");
+  const [selectedProject, setSelectedProject] = useState({});
+  const [removeHeader, setRemoveHeader] = useState(false);
+  const [removeStyling, setRemoveStyling] = useState(false);
+  useEffect(() => {
+    getSettings().then((data) => setStore(data));
+    _init();
+  }, []);
+  useEffect(() => {
+    if (store.defaultTeam && teams.length > 0 && !dropdownTeam) {
+      const selectedTeam = teams.find((t) => t.id === store.defaultTeam);
+      if (selectedTeam) {
+        setDropdownTeam(`${selectedTeam.name}-${selectedTeam.id}`);
+        setProjects(selectedTeam.Projects);
+        if (store.defaultProject) {
+          const selectedProject2 = selectedTeam.Projects.find((p) => p.id === store.defaultProject);
+          if (selectedProject2) {
+            setDropdownProject(`${selectedProject2.name}-${selectedProject2.id}`);
+            setSelectedProject(selectedProject2);
+          }
+        }
+      }
+    }
+  }, [teams, store, dropdownTeam]);
+  const _init = () => {
+    login().then(async (data) => {
+      setUser(data);
+      const teamData = await getUserTeam();
+      setTeams(teamData);
+      setTeam(teamData[0]);
+      setProjects(teamData[0]?.Projects || []);
+      setPageLoading(false);
+    }).catch(() => {
+      setPageLoading(false);
+      setAuthError(true);
+    });
+  };
+  const _onSelectProject = async (projectValue) => {
+    if (!projectValue) return;
+    const project = projects.filter((p) => `${p.name}-${p.id}` === projectValue)[0];
+    setSelectedProject(project);
+    setDropdownProject(`${project.name}-${project.id}`);
+    setSettings({ defaultProject: project.id }).then(() => {
+      return getSettings();
+    }).then((data) => setStore(data));
+  };
+  const _onSelectTeam = (teamValue) => {
+    if (!teamValue) return;
+    const selectedTeam = teams.filter((t) => `${t.name}-${t.id}` === teamValue)[0];
+    setTeam(selectedTeam);
+    setDropdownTeam(`${selectedTeam.name}-${selectedTeam.id}`);
+    setDropdownProject("");
+    setProjects(selectedTeam.Projects);
+    setSettings({ defaultTeam: selectedTeam.id }).then(() => {
+      return getSettings();
+    }).then((data) => setStore(data));
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: "Dashboard",
+        subtitle: "Visualize your Strapi data",
+        primaryAction: /* @__PURE__ */ jsx(LinkButton, { tag: Link, startIcon: /* @__PURE__ */ jsx(ChartCircle, {}), to: `/plugins/${PLUGIN_ID}/create`, disabled: !user.id, children: "Create new visualizations" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      pageLoading && /* @__PURE__ */ jsx(Loader, { children: "Loading your dashboard..." }),
+      !pageLoading && !store.defaultTeam && user.id && teams && /* @__PURE__ */ jsxs(Box, { padding: 4, shadow: "filterShadow", background: "neutral0", children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Let's set up your first dashboard " }),
+          /* @__PURE__ */ jsx(Typography, { variant: "epsilon", children: "Select a Chartbrew dashboard to load it in Strapi " })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { paddingTop: 4, gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              label: "Select a Chartbrew team",
+              value: dropdownTeam,
+              onChange: _onSelectTeam,
+              children: teams.map((t) => {
+                return /* @__PURE__ */ jsx(SingleSelectOption, { value: `${t.name}-${t.id}`, children: t.name }, t.id);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              label: "Select a Chartbrew dashboard",
+              value: dropdownProject,
+              onChange: _onSelectProject,
+              children: projects.map((p) => {
+                return /* @__PURE__ */ jsx(SingleSelectOption, { value: `${p.name}-${p.id}`, children: p.name }, p.id);
+              })
+            }
+          )
+        ] })
+      ] }),
+      !pageLoading && !authError && user.id && team && projects.length === 0 && /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          icon: /* @__PURE__ */ jsx(Illo, {}),
+          content: "It looks like you don't have a dashboard yet",
+          action: /* @__PURE__ */ jsx(LinkButton, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), to: `/plugins/${PLUGIN_ID}/create`, children: "Create your first dashboard" })
+        }
+      ) }),
+      !pageLoading && authError && /* @__PURE__ */ jsx(Box, { padding: 4, shadow: "filterShadow", background: "neutral0", children: /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(
+        Alert,
+        {
+          closeLabel: "Close message",
+          title: "Cannot authenticate to Chartbrew",
+          action: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Link$1, { to: `/settings/${PLUGIN_ID}`, children: "Click here to configure your Chartbrew connection" }) }),
+          children: "In order to access your Chartbrew dashboards, you must first set up the credentials in the settings menu. Click the link below to get started. "
+        }
+      ) }) }),
+      !pageLoading && store.defaultTeam && user.id && projects.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsxs(Flex, { wrap: "wrap", gap: 2, children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              label: "Select a Chartbrew team",
+              value: dropdownTeam,
+              onChange: _onSelectTeam,
+              children: teams.map((t) => {
+                return /* @__PURE__ */ jsx(SingleSelectOption, { value: `${t.name}-${t.id}`, children: t.name }, t.id);
+              })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              label: "Select a Chartbrew dashboard",
+              placeholder: "Select a dashboard",
+              value: dropdownProject,
+              onChange: _onSelectProject,
+              children: projects.map((p) => {
+                return /* @__PURE__ */ jsx(SingleSelectOption, { value: `${p.name}-${p.id}`, children: p.name }, p.id);
+              })
+            }
+          ) }),
+          selectedProject && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Checkbox, { paddingLeft: 4, onCheckedChange: () => setRemoveHeader(!removeHeader), children: /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Remove header" }) }),
+            /* @__PURE__ */ jsx(Checkbox, { paddingLeft: 4, onCheckedChange: () => setRemoveStyling(!removeStyling), children: /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Remove styling" }) })
+          ] }),
+          team && /* @__PURE__ */ jsx(
+            LinkButton,
+            {
+              href: `${store.clientHost}/${team.id}/${store.defaultProject}/dashboard`,
+              variant: "tertiary",
+              target: "_blank",
+              rel: "noopener",
+              endIcon: /* @__PURE__ */ jsx(ExternalLink, {}),
+              children: "Edit dashboard in Chartbrew"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, height: "100vh", children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: `${store.clientHost}/report/${selectedProject.brewName}?removeHeader=${removeHeader}&removeStyling=${removeStyling}`,
+            width: "100%",
+            height: "100%",
+            style: { border: "none", borderRadius: "10px" }
+          },
+          `${removeHeader}-${removeStyling}`
+        ) })
+      ] })
+    ] })
+  ] });
+}
+async function getModels() {
+  const models = await instance.get("/chartbrew/models");
+  return models.data;
+}
+async function generateTemplate(data) {
+  return instance.post(`/${PLUGIN_ID}/generate`, data).then((project) => {
+    return project.data;
+  }).catch((err) => {
+    return Promise.reject(err);
+  });
+}
+function Create() {
+  const [collection, setCollection] = useState({});
+  const [models, setModels] = useState([]);
+  const [createdAt, setCreatedAt] = useState("");
+  const [updatedAt, setUpdatedAt] = useState("");
+  const [settingsLoading, setSettingsLoading] = useState(true);
+  const [hasToken, setHasToken] = useState(false);
+  const [projects, setProjects] = useState([]);
+  const [templateCharts, setTemplateCharts] = useState([]);
+  const [selectedCharts, setSelectedCharts] = useState([]);
+  const [selectedProject, setSelectedProject] = useState({});
+  const [dropdownProject, setDropdownProject] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [userTeam, setUserTeam] = useState({});
+  const [planLimits, setPlanLimits] = useState(false);
+  const [store, setStore] = useState({});
+  const [generationError, setGenerationError] = useState(false);
+  const [teams, setTeams] = useState([]);
+  const [dropdownTeam, setDropdownTeam] = useState("");
+  useEffect(async () => {
+    getSettings().then((data) => {
+      setSettingsLoading(false);
+      setHasToken(data.hasToken);
+      setStore(data);
+    }).catch(() => setSettingsLoading(false));
+    getModels().then((data) => {
+      setModels(data);
+    });
+    const user = await login();
+    const teamData = await getUserTeam(user.id);
+    setTeams(teamData);
+    const template = await getStrapiTemplate(teamData[0].id);
+    const charts = template.Charts.map((c) => ({
+      tid: c.tid,
+      name: c.name
+    }));
+    setTemplateCharts(charts);
+    setSelectedCharts(charts.map((c) => c.tid));
+  }, []);
+  const _onSelectCollection = (model) => {
+    setCollection(model);
+    if (model.attributes.createdAt) setCreatedAt("createdAt");
+    else if (model.attributes.created_at) setCreatedAt("created_at");
+    if (model.attributes.updatedAt) setUpdatedAt("updatedAt");
+    else if (model.attributes.updated_at) setUpdatedAt("updated_at");
+  };
+  const _onToggleChart = (chart) => {
+    let foundIndex;
+    selectedCharts.forEach((c, index) => {
+      if (c === chart.tid) foundIndex = index;
+    });
+    let newSelectedCharts = [...selectedCharts];
+    if (foundIndex || foundIndex === 0) newSelectedCharts.splice(foundIndex, 1);
+    else newSelectedCharts.push(chart.tid);
+    setSelectedCharts(newSelectedCharts);
+  };
+  const _onSelectProject = (projectValue) => {
+    if (!projectValue) return;
+    const project = projects.filter((p) => `${p.name}-${p.id}` === projectValue)[0];
+    setDropdownProject(`${project.name}-${project.id}`);
+    setSelectedProject(project);
+  };
+  const _onGenerateCharts = async () => {
+    const data = {
+      createdField: createdAt,
+      updatedField: updatedAt,
+      collection: collection.pluralName,
+      projectId: selectedProject.id,
+      charts: selectedCharts,
+      teamId: userTeam.id
+    };
+    if (selectedProject && selectedProject.id) {
+      const connections = await getTeamConnections(userTeam.id);
+      const strapiConnection = connections.filter((c) => {
+        return c.host && c.host.indexOf(store.strapiHost) > -1;
+      })[0];
+      if (strapiConnection && strapiConnection.id) {
+        data.connections_id = strapiConnection.id;
+      }
+    }
+    setGenerating(true);
+    generateTemplate(data).then((project) => {
+      return setSettings({ defaultProject: project.id });
+    }).then(() => {
+      setTimeout(() => {
+        location.pathname = `/admin/plugins/${PLUGIN_ID}`;
+        setGenerating(false);
+      }, 1e3);
+    }).catch((err) => {
+      if (err && err.message && err.message.indexOf("406") > -1) {
+        setPlanLimits(true);
+      } else {
+        setGenerationError(true);
+      }
+      setGenerating(false);
+    });
+  };
+  const _isLocalConnectingToManaged = () => {
+    if (store.strapiHost && store.strapiHost.indexOf("http://localhost") > -1 && store.host.indexOf("https://api.chartbrew.com") > -1) {
+      return true;
+    }
+    return false;
+  };
+  const _onSelectTeam = (teamValue) => {
+    if (!teamValue) return;
+    const team = teams.find((t) => `${t.name}-${t.id}` === teamValue);
+    setDropdownTeam(`${team.name}-${team.id}`);
+    setUserTeam(team);
+    setProjects(team.Projects);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: "Create",
+        subtitle: "Add new visualizations to your Chartbrew dashboards",
+        navigationAction: /* @__PURE__ */ jsx(Link$1, { startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}), to: `/plugins/${PLUGIN_ID}`, children: "Back to the dashboard" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, shadow: "filterShadow", background: "neutral0", children: [
+      !settingsLoading && store.strapiHost && _isLocalConnectingToManaged() && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+        Alert,
+        {
+          closeLabel: "Close alert",
+          title: "Chartbrew might not be able to create charts",
+          variant: "danger",
+          action: /* @__PURE__ */ jsx(Link$1, { tag: Link, to: `/settings/${PLUGIN_ID}`, children: "Click here to go to settings" }),
+          onClose: () => {
+          },
+          children: "It looks like your Strapi Backend URL is on localhost. Chartbrew's server will not be able to access your localhost environment. Please update your Strapi Backend URL to something like https://my-strapi-backend.com or self-host Chartbrew on the same server as your Strapi Backend."
+        }
+      ) }),
+      !settingsLoading && !hasToken && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+        Alert,
+        {
+          closeLabel: "Close alert",
+          title: "Chartbrew cannot create charts from your Strapi data",
+          variant: "danger",
+          action: /* @__PURE__ */ jsx(Link$1, { tag: Link, to: `/settings/${PLUGIN_ID}`, children: "Click here to go to settings" }),
+          onClose: () => {
+          },
+          children: "In order to allow Chartbrew to create visualizations for you, please add a Strapi API token in the settings. "
+        }
+      ) }),
+      !settingsLoading && !store.strapiHost && /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
+        Alert,
+        {
+          closeLabel: "Close alert",
+          title: "Chartbrew cannot create charts from your Strapi data",
+          variant: "danger",
+          action: /* @__PURE__ */ jsx(Link$1, { tag: Link, to: `/settings/${PLUGIN_ID}`, children: "Click here to go to settings" }),
+          onClose: () => {
+          },
+          children: "Your Strapi backend URL is missing from the Chartbrew settings. Set it up by going to the settings page. "
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Select your Chartbrew team" }) }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(
+        SingleSelect,
+        {
+          value: dropdownTeam,
+          onChange: _onSelectTeam,
+          children: teams.map((t) => {
+            return /* @__PURE__ */ jsx(SingleSelectOption, { value: `${t.name}-${t.id}`, children: t.name }, t.id);
+          })
+        }
+      ) }),
+      dropdownTeam && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Select one of your collection types below " }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: models.map((model) => /* @__PURE__ */ jsx(Grid.Item, { col: 2, s: 4, xs: 6, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: model.uid === collection.uid ? "default" : "secondary",
+            onClick: () => _onSelectCollection(model),
+            fullWidth: true,
+            children: model.displayName
+          }
+        ) }, model.uid)) }) })
+      ] }),
+      collection.uid && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Divider, {}) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Timestamp settings " }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Combobox,
+            {
+              label: "Select your 'created at' field",
+              value: createdAt,
+              onChange: (value) => setCreatedAt(value),
+              children: Object.keys(collection.attributes)?.map((attribute) => {
+                return /* @__PURE__ */ jsx(ComboboxOption, { value: attribute, children: attribute }, attribute);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Combobox,
+            {
+              label: "Select your 'updated at' field",
+              value: updatedAt,
+              onChange: (value) => setUpdatedAt(value),
+              children: Object.keys(collection.attributes)?.map((attribute) => {
+                return /* @__PURE__ */ jsx(ComboboxOption, { value: attribute, children: attribute }, attribute);
+              })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(Box, { paddingTop: 6, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Select the charts you want to create " }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "(More will be added later) " }) })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 3, children: templateCharts.map((chart) => /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 4, xs: 6, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selectedCharts.indexOf(chart.tid) > -1,
+            onClick: () => _onToggleChart(chart),
+            children: chart.name && chart.name.replace("undefined", collection.pluralName)
+          }
+        ) }, chart.tid)) }) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 6, paddingBottom: 6, children: /* @__PURE__ */ jsx(Divider, {}) }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", children: "Choose a dashboard where to place the charts " }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "Or leave empty to create a new dashboard " }) })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(
+          Combobox,
+          {
+            "aria-label": "Select a Chartbrew dashboard",
+            placeholder: "Select a dashboard or leave empty",
+            value: dropdownProject,
+            onChange: _onSelectProject,
+            children: projects.filter((p) => p).map((p) => {
+              return /* @__PURE__ */ jsx(ComboboxOption, { value: `${p.name}-${p.id}`, children: p.name }, p.id);
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { paddingTop: 6, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => _onGenerateCharts(),
+            size: "L",
+            loading: generating,
+            disabled: selectedCharts.length < 1 || !dropdownTeam,
+            variant: planLimits ? "danger" : "default",
+            children: "Create the charts"
+          }
+        ) }),
+        generationError && /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            closeLabel: "Close alert",
+            title: "The charts could not be created",
+            variant: "danger",
+            action: /* @__PURE__ */ jsx(Link$1, { tag: Link, to: `/settings/${PLUGIN_ID}`, children: "Click here to go to settings" }),
+            onClose: () => setGenerationError(false),
+            children: "There was an error generating your charts. Please make sure all your settings are correct and try again."
+          }
+        ) }),
+        planLimits && /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            closeLabel: "Close alert",
+            title: "You reached the limits of your Chartbrew plan",
+            variant: "danger",
+            action: /* @__PURE__ */ jsx(Link$1, { href: `${store.clientHost}/manage/${userTeam.id}/plans`, children: "Click here to go to your Chartbrew accounts settings" }),
+            onClose: () => setPlanLimits(false),
+            children: "Your plan does not allow to create more charts in this project, or to create new projects. Please update your Chartbrew subscription to add more charts. "
+          }
+        ) })
+      ] })
+    ] }) })
+  ] });
+}
+function App() {
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(Dashboard, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: `create`, element: /* @__PURE__ */ jsx(Create, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] }) });
+}
+export {
+  App
+};