@cccsaurora/howler-ui 2.14.0-dev.257 → 2.14.0-dev.263

package/components/routes/hits/view/HitViewer.js

@@ -0,0 +1,336 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Icon } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@iconify+react@4.1.1_react@18.3.1/node_modules/@iconify/react/dist/iconify.js";
+import { ViewAgenda, QueryStats, DataObject, Code, Comment, History, LinkSharp } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, useMediaQuery, Skeleton, Box, Collapse, CardContent, Stack, Tooltip, IconButton, Tabs, Tab, Badge } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import PageCenter from "../../../../commons/components/pages/PageCenter.js";
+import useMatchers from "../../../app/hooks/useMatchers.js";
+import { HitContext } from "../../../app/providers/HitProvider.js";
+import FlexOne from "../../../elements/addons/layout/FlexOne.js";
+import HowlerCard from "../../../elements/display/HowlerCard.js";
+import BundleButton from "../../../elements/display/icons/BundleButton.js";
+import SocketBadge from "../../../elements/display/icons/SocketBadge.js";
+import JSONViewer from "../../../elements/display/json/JSONViewer.js";
+import HitActions from "../../../elements/hit/HitActions.js";
+import HitBanner from "../../../elements/hit/HitBanner.js";
+import HitComments from "../../../elements/hit/HitComments.js";
+import HitDetails from "../../../elements/hit/HitDetails.js";
+import HitLabels from "../../../elements/hit/HitLabels.js";
+import { HitLayout } from "../../../elements/hit/HitLayout.js";
+import HitNotebooks from "../../../elements/hit/HitNotebooks.js";
+import HitOutline from "../../../elements/hit/HitOutline.js";
+import HitOverview from "../../../elements/hit/HitOverview.js";
+import HitRelated from "../../../elements/hit/HitRelated.js";
+import HitWorklog from "../../../elements/hit/HitWorklog.js";
+import PivotLink from "../../../elements/hit/related/PivotLink.js";
+import RelatedLink from "../../../elements/hit/related/RelatedLink.js";
+import { useMyLocalStorageItem } from "../../../hooks/useMyLocalStorage.js";
+import useMyUserList from "../../../hooks/useMyUserList.js";
+import uniqBy from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/uniqBy.js";
+import { useState, useCallback, useEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useParams, useNavigate } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+import { StorageKey } from "../../../../utils/constants.js";
+import { getUserList } from "../../../../utils/hitFunctions.js";
+import { tryParse } from "../../../../utils/utils.js";
+import LeadRenderer from "./LeadRenderer.js";
+var Orientation = /* @__PURE__ */ ((Orientation2) => {
+  Orientation2["VERTICAL"] = "vertical";
+  Orientation2["HORIZONTAL"] = "horizontal";
+  return Orientation2;
+})(Orientation || {});
+const HitViewer = () => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const { t, i18n } = useTranslation();
+  const params = useParams();
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const isUnderLg = useMediaQuery(theme.breakpoints.down("lg"));
+  const [orientation, setOrientation] = useMyLocalStorageItem(
+    StorageKey.VIEWER_ORIENTATION,
+    "vertical"
+    /* VERTICAL */
+  );
+  const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
+  const getHit = useContextSelector(HitContext, (ctx) => ctx.getHit);
+  const hit = useContextSelector(HitContext, (ctx) => ctx.hits[params.id]);
+  const [userIds, setUserIds] = useState(/* @__PURE__ */ new Set());
+  const users = useMyUserList(userIds);
+  const [tab, setTab] = useState("details");
+  const [analytic, setAnalytic] = useState();
+  const [dossiers, setDossiers] = useState([]);
+  const [hasOverview, setHasOverview] = useState(false);
+  const fetchData = useCallback(async () => {
+    var _a2;
+    try {
+      if (!hit) {
+        await getHit(params.id, true);
+        return;
+      }
+      setUserIds(getUserList(hit));
+      setAnalytic(await getMatchingAnalytic(hit));
+    } catch (err) {
+      if (((_a2 = err.cause) == null ? void 0 : _a2.api_status_code) === 404) {
+        navigate("/404");
+      }
+    }
+  }, [hit, getMatchingAnalytic, getHit, params.id, navigate]);
+  useEffect(() => {
+    if (isUnderLg) {
+      setOrientation(
+        "horizontal"
+        /* HORIZONTAL */
+      );
+    }
+  }, [isUnderLg, setOrientation]);
+  useEffect(() => {
+    fetchData();
+  }, [params.id, fetchData, hit]);
+  const onOrientationChange = useCallback(
+    () => setOrientation(
+      orientation === "vertical" ? "horizontal" : "vertical"
+      /* VERTICAL */
+    ),
+    [orientation, setOrientation]
+  );
+  useEffect(() => {
+    getMatchingOverview(hit).then((_overview) => setHasOverview(!!_overview));
+  }, [getMatchingOverview, hit]);
+  useEffect(() => {
+    if (hasOverview && tab === "details") {
+      setTab("overview");
+    } else if (!hasOverview && tab === "overview") {
+      setTab("details");
+    }
+  }, [hasOverview]);
+  const tabContent = useMemo(() => {
+    var _a2, _b2, _c2;
+    if (!tab || !hit) {
+      return;
+    }
+    return (_c2 = (_b2 = {
+      overview: () => /* @__PURE__ */ jsx(HitOverview, { hit }),
+      details: () => /* @__PURE__ */ jsx(HitDetails, { hit }),
+      hit_comments: () => /* @__PURE__ */ jsx(HitComments, { hit, users }),
+      hit_raw: () => /* @__PURE__ */ jsx(JSONViewer, { data: hit }),
+      hit_data: () => {
+        var _a3, _b3;
+        return /* @__PURE__ */ jsx(JSONViewer, { data: (_b3 = (_a3 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a3.data) == null ? void 0 : _b3.map((entry) => tryParse(entry)), collapse: false });
+      },
+      hit_worklog: () => /* @__PURE__ */ jsx(HitWorklog, { hit, users }),
+      hit_related: () => /* @__PURE__ */ jsx(HitRelated, { hit }),
+      ...Object.fromEntries(
+        ((_a2 = hit == null ? void 0 : hit.howler.dossier) == null ? void 0 : _a2.map((lead, index) => ["lead:" + index, () => /* @__PURE__ */ jsx(LeadRenderer, { lead, hit })])) ?? []
+      ),
+      ...Object.fromEntries(
+        dossiers.flatMap(
+          (_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
+            `external-lead:${dossierIndex}:${leadIndex}`,
+            () => /* @__PURE__ */ jsx(LeadRenderer, { lead: _lead, hit })
+          ])
+        )
+      )
+    })[tab]) == null ? void 0 : _c2.call(_b2);
+  }, [dossiers, hit, tab, users]);
+  useEffect(() => {
+    if (!hit) {
+      return;
+    }
+    getMatchingDossiers(hit).then(setDossiers);
+  }, [getMatchingDossiers, hit]);
+  if (!hit) {
+    return /* @__PURE__ */ jsx(PageCenter, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: "520px" }) });
+  }
+  return /* @__PURE__ */ jsx(PageCenter, { maxWidth: "1500px", children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "grid",
+        position: "relative",
+        gridTemplateColumns: `1fr ${orientation === "vertical" ? "300px" : "0px"}`,
+        alignItems: "stretch",
+        gap: theme.spacing(2),
+        transition: `${theme.transitions.duration.standard}ms`,
+        mb: 1
+      },
+      textAlign: "left",
+      children: [
+        /* @__PURE__ */ jsx(
+          Collapse,
+          {
+            sx: { gridColumn: "1 / span 2", "& [class*=MuiStack-root]": { padding: "0 !important" } },
+            in: orientation === "horizontal",
+            children: /* @__PURE__ */ jsx(HitActions, { hit, orientation: "horizontal" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              "& > .MuiPaper-root": { flex: 1 },
+              mr: orientation === "vertical" ? 0 : -2
+            },
+            children: [
+              /* @__PURE__ */ jsx(HowlerCard, { tabIndex: 0, sx: { position: "relative" }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
+                /* @__PURE__ */ jsx(HitBanner, { hit, layout: HitLayout.COMFY, useListener: true }),
+                /* @__PURE__ */ jsx(HitOutline, { hit, layout: HitLayout.COMFY }),
+                /* @__PURE__ */ jsx(HitLabels, { hit }),
+                (((_b = (_a = hit == null ? void 0 : hit.howler) == null ? void 0 : _a.links) == null ? void 0 : _b.length) > 0 || ((_c = analytic == null ? void 0 : analytic.notebooks) == null ? void 0 : _c.length) > 0 || dossiers.filter((_dossier) => {
+                  var _a2;
+                  return ((_a2 = _dossier.pivots) == null ? void 0 : _a2.length) > 0;
+                }).length > 0) && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [
+                  ((_d = analytic == null ? void 0 : analytic.notebooks) == null ? void 0 : _d.length) > 0 && /* @__PURE__ */ jsx(HitNotebooks, { analytic, hit }),
+                  ((_f = (_e = hit == null ? void 0 : hit.howler) == null ? void 0 : _e.links) == null ? void 0 : _f.length) > 0 && uniqBy(hit.howler.links, "href").slice(0, 3).map((l) => /* @__PURE__ */ jsx(RelatedLink, { compact: true, ...l }, l.href)),
+                  dossiers.flatMap(
+                    (_dossier) => (_dossier.pivots ?? []).map((_pivot, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      /* @__PURE__ */ jsx(PivotLink, { pivot: _pivot, hit, compact: true }, _dossier.dossier_id + index)
+                    ))
+                  )
+                ] })
+              ] }) }),
+              !isUnderLg && /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  spacing: 1,
+                  sx: {
+                    position: "absolute",
+                    top: theme.spacing(2),
+                    right: theme.spacing(-6)
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Tooltip, { title: t("page.hits.view.layout"), children: /* @__PURE__ */ jsx(IconButton, { onClick: onOrientationChange, children: /* @__PURE__ */ jsx(
+                      ViewAgenda,
+                      {
+                        sx: { transition: "rotate 250ms", rotate: orientation === "vertical" ? "90deg" : "0deg" }
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsx(SocketBadge, { size: "medium" }),
+                    analytic && /* @__PURE__ */ jsx(Tooltip, { title: t("hit.panel.analytic.open"), children: /* @__PURE__ */ jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: /* @__PURE__ */ jsx(QueryStats, {}) }) }),
+                    ((_g = hit == null ? void 0 : hit.howler.bundles) == null ? void 0 : _g.length) > 0 && /* @__PURE__ */ jsx(BundleButton, { ids: hit.howler.bundles })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(HowlerCard, { sx: [orientation === "horizontal" && { height: "0px" }], children: /* @__PURE__ */ jsx(CardContent, { sx: { padding: 1, position: "relative" }, children: /* @__PURE__ */ jsx(HitActions, { hit, orientation: "vertical" }) }) }),
+        /* @__PURE__ */ jsx(Box, { sx: { gridColumn: "1 / span 2", mb: 1 }, children: /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            value: tab === "overview" && !hasOverview ? "details" : tab,
+            sx: { display: "flex", flexDirection: "row", pr: 2, alignItems: "center" },
+            children: [
+              ((_h = hit == null ? void 0 : hit.howler) == null ? void 0 : _h.is_bundle) && /* @__PURE__ */ jsx(Tab, { label: t("hit.viewer.aggregate"), value: "hit_aggregate", onClick: () => setTab("hit_aggregate") }),
+              hasOverview && /* @__PURE__ */ jsx(Tab, { label: t("hit.viewer.overview"), value: "overview", onClick: () => setTab("overview") }),
+              /* @__PURE__ */ jsx(Tab, { label: t("hit.viewer.details"), value: "details", onClick: () => setTab("details") }),
+              (_i = hit == null ? void 0 : hit.howler.dossier) == null ? void 0 : _i.map((lead, index) => /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+                    lead.icon && /* @__PURE__ */ jsx(Icon, { icon: lead.icon }),
+                    /* @__PURE__ */ jsx("span", { children: i18n.language === "en" ? lead.label.en : lead.label.fr })
+                  ] }),
+                  value: "lead:" + index,
+                  onClick: () => setTab("lead:" + index)
+                },
+                "lead:" + index
+              )),
+              dossiers.flatMap(
+                (_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => /* @__PURE__ */ jsx(
+                  Tab,
+                  {
+                    label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+                      _lead.icon && /* @__PURE__ */ jsx(Icon, { icon: _lead.icon }),
+                      /* @__PURE__ */ jsx("span", { children: i18n.language === "en" ? _lead.label.en : _lead.label.fr })
+                    ] }),
+                    value: `external-lead:${dossierIndex}:${leadIndex}`,
+                    onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`)
+                  },
+                  `external-lead:${dossierIndex}:${leadIndex}`
+                ))
+              ),
+              /* @__PURE__ */ jsx(FlexOne, {}),
+              /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  sx: { px: 2, minWidth: 0 },
+                  label: /* @__PURE__ */ jsx(Tooltip, { title: t("hit.viewer.data"), children: /* @__PURE__ */ jsx(DataObject, {}) }),
+                  value: "hit_data",
+                  onClick: () => setTab("hit_data"),
+                  disabled: !((_j = hit == null ? void 0 : hit.howler) == null ? void 0 : _j.data)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  sx: { px: 2, minWidth: 0 },
+                  label: /* @__PURE__ */ jsx(Tooltip, { title: t("hit.viewer.json"), children: /* @__PURE__ */ jsx(Code, {}) }),
+                  value: "hit_raw",
+                  onClick: () => setTab("hit_raw")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  sx: { px: 2, minWidth: 0 },
+                  label: /* @__PURE__ */ jsx(Tooltip, { title: t("hit.viewer.comments"), children: /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      sx: {
+                        "& > .MuiBadge-badge": {
+                          backgroundColor: theme.palette.divider,
+                          zIndex: 1,
+                          right: theme.spacing(-0.5)
+                        },
+                        "& > svg": { zIndex: 2 }
+                      },
+                      badgeContent: ((_k = hit == null ? void 0 : hit.howler.comment) == null ? void 0 : _k.length) ?? 0,
+                      children: /* @__PURE__ */ jsx(Comment, {})
+                    }
+                  ) }),
+                  value: "hit_comments",
+                  onClick: () => setTab("hit_comments")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  sx: { px: 2, minWidth: 0 },
+                  label: /* @__PURE__ */ jsx(Tooltip, { title: t("hit.viewer.worklog"), children: /* @__PURE__ */ jsx(History, {}) }),
+                  value: "hit_worklog",
+                  onClick: () => setTab("hit_worklog")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Tab,
+                {
+                  sx: { px: 2, minWidth: 0 },
+                  label: /* @__PURE__ */ jsx(Tooltip, { title: t("hit.viewer.related"), children: /* @__PURE__ */ jsx(LinkSharp, {}) }),
+                  value: "hit_related",
+                  onClick: () => setTab("hit_related")
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              gridColumn: "1 / span 2",
+              "& > div": { padding: 0 },
+              "& .react-json-view": { backgroundColor: "transparent !important" }
+            },
+            children: tabContent
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Orientation,
+  HitViewer as default
+};

package/components/routes/hits/view/LeadRenderer.d.ts

@@ -0,0 +1,7 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { Lead } from '@cccsaurora/howler-ui/models/entities/generated/Lead';
+declare const _default: import('react').NamedExoticComponent<{
+    lead: Lead;
+    hit?: Hit;
+}>;
+export default _default;

package/components/routes/hits/view/LeadRenderer.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Box, Stack, Typography, Divider } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import HandlebarsMarkdown from "../../../elements/display/HandlebarsMarkdown.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { usePluginStore } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-pluggable@0.4.3_react@18.3.1/node_modules/react-pluggable/dist/react-pluggable.esm.js";
+const LeadRenderer = ({ lead, hit }) => {
+  const { t } = useTranslation();
+  const pluginStore = usePluginStore();
+  if (lead.format === "markdown") {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          mt: -2
+        },
+        children: /* @__PURE__ */ jsx(HandlebarsMarkdown, { disableLinks: true, md: lead.content, object: hit ?? lead })
+      }
+    );
+  }
+  const pluginLead = pluginStore.executeFunction(`lead.${lead.format}`, lead.content, lead.metadata, hit);
+  if (pluginLead) {
+    return pluginLead;
+  }
+  return /* @__PURE__ */ jsxs(Stack, { p: 3, direction: "column", spacing: 2, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h3", color: "error.light", children: t("lead.invalid") }),
+    /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("lead.invalid.description") })
+  ] });
+};
+const LeadRenderer$1 = memo(LeadRenderer);
+export {
+  LeadRenderer$1 as default
+};

package/components/routes/home/AddNewCard.d.ts

@@ -0,0 +1,7 @@
+import { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import { FC } from 'react';
+declare const AddNewCard: FC<{
+    dashboard: HowlerUser['dashboard'];
+    addCard: (newCard: any) => void;
+}>;
+export default AddNewCard;

package/components/routes/home/AddNewCard.js

@@ -0,0 +1,216 @@
+import { jsx, jsxs, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useState, useCallback, useEffect, useMemo, createElement } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { Check } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Grid, Card, CardHeader, Typography, CardContent, Stack, FormControl, InputLabel, Select, MenuItem, Divider, Autocomplete, TextField, Box, Slider } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { a as api } from "../../../index-BPPnUdfP.js";
+import { ViewContext } from "../../app/providers/ViewProvider.js";
+import CustomButton from "../../elements/addons/buttons/CustomButton.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useContextSelector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/use-context-selector@2.0.0_react@18.3.1_scheduler@0.23.2/node_modules/use-context-selector/dist/index.js";
+const TYPES = {
+  view: ["viewId", "limit"],
+  analytic: ["analyticId", "type"]
+};
+const VISUALIZATIONS = ["assessment", "created", "escalation", "status", "detection"];
+const AddNewCard = ({ dashboard, addCard }) => {
+  var _a, _b;
+  const { t } = useTranslation();
+  const views = useContextSelector(ViewContext, (ctx) => ctx.views ?? {});
+  const fetchViews = useContextSelector(ViewContext, (ctx) => ctx.fetchViews);
+  const [selectedType, setSelectedType] = useState("");
+  const [analytics, setAnalytics] = useState([]);
+  const [analyticsLoading, setAnalyticsLoading] = useState(false);
+  const [config, _setConfig] = useState({});
+  const [viewOpen, setViewOpen] = useState(false);
+  const [viewLoading, setViewLoading] = useState(false);
+  const setConfig = useCallback((key, value) => _setConfig((_config) => ({ ..._config, [key]: value })), []);
+  const _addCard = useCallback(() => {
+    if (!selectedType) {
+      return;
+    }
+    addCard({
+      entry_id: selectedType === "view" ? config.viewId : `${config.analyticId}-${config.type}`,
+      type: selectedType,
+      config: JSON.stringify(config)
+    });
+    ["type", "viewId"].forEach((key) => {
+      if (key in config) {
+        setConfig(key, "");
+      }
+    });
+  }, [selectedType, addCard, config, setConfig]);
+  const fetchAllAnalytics = async () => {
+    setAnalyticsLoading(true);
+    const batchSize = 150;
+    let offset = 0;
+    let allAnalytics = [];
+    let total = 0;
+    do {
+      const response = await api.search.analytic.post({
+        query: "*:*",
+        rows: batchSize,
+        offset
+      });
+      allAnalytics = [...allAnalytics, ...response.items ?? []];
+      total = response.total ?? 0;
+      offset += batchSize;
+    } while (offset < total);
+    setAnalytics(allAnalytics);
+    setAnalyticsLoading(false);
+  };
+  useEffect(() => {
+    fetchAllAnalytics();
+  }, []);
+  const filteredAnalyticVisualizations = useMemo(() => {
+    const existingAnalyticCards = dashboard.filter((_card) => _card.type === "analytic");
+    return VISUALIZATIONS.filter((viz) => {
+      return !existingAnalyticCards.some((_card) => {
+        const parsedConfig = JSON.parse(_card.config);
+        return parsedConfig.analyticId === config.analyticId && parsedConfig.type === viz;
+      });
+    });
+  }, [dashboard, config.analyticId]);
+  useEffect(() => {
+    if (selectedType === "view") {
+      _setConfig({
+        limit: 3
+      });
+    } else {
+      _setConfig({});
+    }
+  }, [selectedType]);
+  const onViewOpen = useCallback(async () => {
+    setViewOpen(true);
+    setViewLoading(true);
+    try {
+      await fetchViews();
+    } finally {
+      setViewLoading(false);
+    }
+  }, [fetchViews]);
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Card, { variant: "outlined", sx: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: t("route.home.add"),
+        subheader: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("route.home.add.description") })
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsxs(FormControl, { sx: (theme) => ({ mt: `${theme.spacing(2)} !important` }), children: [
+        /* @__PURE__ */ jsx(InputLabel, { children: t("route.home.add.type") }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: selectedType,
+            onChange: (event) => setSelectedType(event.target.value),
+            label: t("route.home.add.type"),
+            children: Object.keys(TYPES).map((type) => /* @__PURE__ */ jsx(MenuItem, { value: type, children: /* @__PURE__ */ jsxs(Stack, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })
+            ] }) }, type))
+          }
+        )
+      ] }),
+      selectedType && /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+      selectedType === "analytic" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("route.home.add.analytic.title") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("route.home.add.analytic.description") }),
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            sx: { pt: 1 },
+            onChange: (__, opt) => setConfig("analyticId", opt.analytic_id),
+            loading: analyticsLoading,
+            options: analytics,
+            filterOptions: (options, state) => options.filter(
+              (opt) => {
+                var _a2, _b2;
+                return opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) || ((_b2 = (_a2 = opt.description) == null ? void 0 : _a2.split("\n")[0]) == null ? void 0 : _b2.toLowerCase().includes(state.inputValue.toLowerCase()));
+              }
+            ),
+            renderOption: (props, option) => {
+              var _a2;
+              return /* @__PURE__ */ createElement("li", { ...props, key: option.analytic_id }, /* @__PURE__ */ jsxs(Stack, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body1", children: option.name }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: (_a2 = option.description) == null ? void 0 : _a2.split("\n")[0] })
+              ] }));
+            },
+            getOptionLabel: (option) => option.name,
+            renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: t("route.home.add.analytic") })
+          }
+        ),
+        /* @__PURE__ */ jsxs(FormControl, { sx: (theme) => ({ mt: `${theme.spacing(2)} !important` }), children: [
+          /* @__PURE__ */ jsx(InputLabel, { children: t("route.home.add.visualization") }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: config.type ?? "",
+              onChange: (event) => setConfig("type", event.target.value),
+              label: t("route.home.add.visualization"),
+              children: filteredAnalyticVisualizations.length > 0 ? filteredAnalyticVisualizations.map((viz) => /* @__PURE__ */ jsx(MenuItem, { value: viz, children: /* @__PURE__ */ jsxs(Stack, { children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })
+              ] }) }, viz)) : /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: t("route.home.add.visualization.unavailable") }) })
+            }
+          )
+        ] })
+      ] }),
+      selectedType === "view" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            sx: { pt: 1 },
+            value: views[config.viewId] || null,
+            onChange: (__, opt) => setConfig("viewId", opt.view_id),
+            onOpen: onViewOpen,
+            onClose: () => setViewOpen(false),
+            open: viewOpen,
+            loading: viewLoading,
+            options: Object.values(views),
+            filterOptions: (options, state) => options.filter(
+              (opt) => !!opt && !(dashboard == null ? void 0 : dashboard.find(
+                (entry) => entry.type === "view" && JSON.parse(entry.config).viewId === opt.view_id
+              )) && (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) || opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))
+            ),
+            renderOption: (props, option) => /* @__PURE__ */ createElement("li", { ...props, key: option.view_id }, /* @__PURE__ */ jsxs(Stack, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t(option.title) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })
+            ] })),
+            getOptionLabel: (option) => t(option.title),
+            renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: t("route.home.add.view") })
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t("route.home.add.limit") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: t("route.home.add.limit.description") }),
+        /* @__PURE__ */ jsx(Box, { sx: { px: 0.5 }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            value: config.limit ?? 3,
+            valueLabelDisplay: "auto",
+            onChange: (_, value) => setConfig("limit", value),
+            min: 1,
+            max: 10,
+            step: 1,
+            marks: true
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "end", children: /* @__PURE__ */ jsx(
+        CustomButton,
+        {
+          variant: "outlined",
+          size: "small",
+          color: "primary",
+          startIcon: /* @__PURE__ */ jsx(Check, {}),
+          disabled: !selectedType || ((_b = (_a = TYPES[selectedType]) == null ? void 0 : _a.filter((field) => !config[field])) == null ? void 0 : _b.length) > 0,
+          onClick: _addCard,
+          children: t("create")
+        }
+      ) })
+    ] }) })
+  ] }) });
+};
+export {
+  AddNewCard as default
+};

package/components/routes/home/AnalyticCard.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface AnalyticSettings {
+    analyticId: string;
+    type: 'assessment' | 'created' | 'escalation';
+}
+declare const AnalyticCard: FC<AnalyticSettings>;
+export default AnalyticCard;