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

package/components/routes/dossiers/DossierEditor.js

@@ -0,0 +1,198 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { iconExists } 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 { Save, Language, Person } 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 { useMediaQuery, Box, Tooltip, Fab, CircularProgress, Typography, Stack, Paper, TextField, ToggleButtonGroup, ToggleButton, Tabs, Tab } 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 PageCenter from "../../../commons/components/pages/PageCenter.js";
+import { ParameterContext } from "../../app/providers/ParameterProvider.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { isEqual, uniqBy, omit } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { memo, useState, useMemo, useCallback, useEffect } 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 QueryResultText from "../../elements/display/QueryResultText.js";
+import HitQuery from "../hits/search/HitQuery.js";
+import LeadForm from "./LeadForm.js";
+import PivotForm from "./PivotForm.js";
+const DossierEditor = () => {
+  const { t, i18n } = useTranslation();
+  const params = useParams();
+  const { dispatchApi } = useMyApi();
+  const navigate = useNavigate();
+  const setQuery = useContextSelector(ParameterContext, (ctx) => ctx.setQuery);
+  const isNarrow = useMediaQuery(`(max-width: ${i18n.language === "en" ? 1275 : 1375}px)`);
+  const [originalDossier, setOriginalDossier] = useState();
+  const [dossier, setDossier] = useState({
+    type: "global",
+    leads: [],
+    pivots: []
+  });
+  const [tab, setTab] = useState("leads");
+  const [searchTotal, setSearchTotal] = useState(-1);
+  const [searchDirty, setSearchDirty] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const dirty = useMemo(() => !isEqual(originalDossier, dossier), [dossier, originalDossier]);
+  const validationError = useMemo(() => {
+    var _a, _b;
+    if (!dossier) {
+      return t("route.dossiers.manager.validation.error");
+    }
+    if (!dossier.title) {
+      return t("route.dossiers.manager.validation.error.missing", { field: t("route.dossiers.manager.field.title") });
+    }
+    if (searchTotal < 0 || searchDirty) {
+      return t("route.dossiers.manager.validation.search");
+    }
+    if (!dossier.query) {
+      return t("route.dossiers.manager.validation.error.missing", { field: t("route.dossiers.manager.field.query") });
+    }
+    if (!dossier.type) {
+      return t("route.dossiers.manager.validation.error.missing", { field: t("route.dossiers.manager.field.type") });
+    }
+    if ((dossier.leads ?? []).length < 1 && (dossier.pivots ?? []).length < 1) {
+      return t("route.dossiers.manager.validation.error.items");
+    }
+    if (!((_a = dossier.leads ?? []) == null ? void 0 : _a.every(
+      (lead) => {
+        var _a2, _b2;
+        return lead.icon && iconExists(lead.icon) && ((_a2 = lead.label) == null ? void 0 : _a2.en) && ((_b2 = lead.label) == null ? void 0 : _b2.fr) && lead.label && lead.format && lead.content;
+      }
+    ))) {
+      return t("route.dossiers.manager.validation.error.leads");
+    }
+    if (!(dossier.pivots ?? []).every(
+      (pivot) => pivot.icon && iconExists(pivot.icon) && pivot.label && pivot.label.en && pivot.label.fr && pivot.format
+    )) {
+      return t("route.dossiers.manager.validation.error.pivots");
+    }
+    if (!((_b = dossier.pivots) == null ? void 0 : _b.every((pivot) => (pivot.mappings ?? []).length === uniqBy(pivot.mappings ?? [], "key").length))) {
+      return t("route.dossiers.manager.validation.error.pivots.duplicate");
+    }
+    return null;
+  }, [dossier, searchDirty, searchTotal, t]);
+  const save = useCallback(async () => {
+    setLoading(true);
+    try {
+      if (!params.id) {
+        const result = await dispatchApi(api.dossier.post(dossier));
+        navigate(`/dossiers/${result.dossier_id}/edit`);
+      } else {
+        setDossier(await dispatchApi(api.dossier.put(dossier.dossier_id, omit(dossier, ["dossier_id", "id"]))));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatchApi, dossier, navigate, params.id]);
+  useEffect(() => {
+    if (!params.id) {
+      return;
+    }
+    setLoading(true);
+    dispatchApi(api.dossier.get(params.id)).then((_dossier) => {
+      setOriginalDossier(_dossier);
+      setDossier(_dossier);
+    }).finally(() => setLoading(false));
+  }, [dispatchApi, params.id]);
+  useEffect(() => {
+    if (!dossier.query) {
+      return;
+    }
+    setQuery(dossier.query);
+    (async () => {
+      setLoading(true);
+      try {
+        const result = await dispatchApi(api.search.hit.post({ query: dossier.query, rows: 0 }));
+        setSearchTotal(result.total);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [dispatchApi, dossier.query, setQuery]);
+  return /* @__PURE__ */ jsx(PageCenter, { maxWidth: "1000px", width: "100%", textAlign: "left", height: "97%", children: /* @__PURE__ */ jsxs(Box, { position: "relative", height: "100%", children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: validationError, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(
+      Fab,
+      {
+        variant: "extended",
+        size: "large",
+        color: "primary",
+        disabled: !dirty || !!validationError || loading,
+        sx: (theme) => ({
+          textTransform: "none",
+          position: "absolute",
+          right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(2)})`,
+          whiteSpace: "nowrap",
+          pointerEvents: "initial !important",
+          ...isNarrow ? { bottom: theme.spacing(1) } : { top: 0 }
+        }),
+        onClick: save,
+        children: [
+          loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 24, sx: { mr: 1 } }) : /* @__PURE__ */ jsx(Save, { sx: { mr: 1 } }),
+          /* @__PURE__ */ jsx(Typography, { children: t("save") })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs(Stack, { spacing: 1, height: "100%", children: [
+      /* @__PURE__ */ jsx(Paper, { sx: { p: 1 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs(Stack, { spacing: 1, direction: "row", children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              disabled: !dossier || loading,
+              label: "Title",
+              size: "small",
+              value: dossier.title ?? "",
+              onChange: (ev) => setDossier((_dossier) => ({ ..._dossier, title: ev.target.value })),
+              fullWidth: true
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ToggleButtonGroup,
+            {
+              disabled: !dossier || loading,
+              exclusive: true,
+              value: dossier.type ?? "global",
+              onChange: (_ev, type) => setDossier((_dossier) => ({ ..._dossier, type })),
+              children: [
+                /* @__PURE__ */ jsx(Tooltip, { title: t("route.dossiers.manager.global"), children: /* @__PURE__ */ jsx(ToggleButton, { value: "global", size: "small", children: /* @__PURE__ */ jsx(Language, { fontSize: "small" }) }) }),
+                /* @__PURE__ */ jsx(Tooltip, { title: t("route.dossiers.manager.personal"), children: /* @__PURE__ */ jsx(ToggleButton, { value: "personal", size: "small", children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: (theme) => ({
+              color: theme.palette.text.secondary,
+              fontSize: "0.9em",
+              fontStyle: "italic",
+              mb: 0.5
+            }),
+            variant: "body2",
+            children: t("hit.search.prompt")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          HitQuery,
+          {
+            disabled: !dossier || loading,
+            onChange: (_val, isDirty) => setSearchDirty(isDirty),
+            triggerSearch: (query) => setDossier((_dossier) => ({ ..._dossier, query }))
+          }
+        ),
+        searchTotal >= 0 && /* @__PURE__ */ jsx(QueryResultText, { count: searchTotal, query: dossier.query })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Tabs, { value: tab, onChange: (_ev, value) => setTab(value), children: [
+        /* @__PURE__ */ jsx(Tab, { label: t("route.dossiers.manager.tabs.leads"), value: "leads" }),
+        /* @__PURE__ */ jsx(Tab, { label: t("route.dossiers.manager.tabs.pivots"), value: "pivots" })
+      ] }),
+      tab === "leads" && /* @__PURE__ */ jsx(LeadForm, { dossier, setDossier, loading }),
+      tab === "pivots" && /* @__PURE__ */ jsx(PivotForm, { dossier, setDossier, loading })
+    ] })
+  ] }) });
+};
+const DossierEditor$1 = memo(DossierEditor);
+export {
+  DossierEditor$1 as default
+};

package/components/routes/dossiers/Dossiers.d.ts

@@ -0,0 +1,2 @@
+declare const Dossiers: () => import("react/jsx-runtime").JSX.Element;
+export default Dossiers;

package/components/routes/dossiers/Dossiers.js

@@ -0,0 +1,146 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Topic } 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 { Typography } 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 "../../../TuiList-D7-CH2oS.js";
+import TuiListProvider, { TuiListMethodContext } from "../../elements/addons/lists/TuiListProvider.js";
+import ItemManager from "../../elements/display/ItemManager.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { useMyLocalStorageItem } from "../../hooks/useMyLocalStorage.js";
+import useMySnackbar from "../../hooks/useMySnackbar.js";
+import { useContext, useState, useCallback, useEffect } 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 { useNavigate, useSearchParams } 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 { StorageKey } from "../../../utils/constants.js";
+import DossierCard from "./DossierCard.js";
+const DossiersBase = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { dispatchApi } = useMyApi();
+  const { showSuccessMessage } = useMySnackbar();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { load } = useContext(TuiListMethodContext);
+  const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+  const [phrase, setPhrase] = useState("");
+  const [offset, setOffset] = useState(parseInt(searchParams.get("offset")) || 0);
+  const [response, setResponse] = useState(null);
+  const [hasError, setHasError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const onSearch = useCallback(async () => {
+    try {
+      setLoading(true);
+      setHasError(false);
+      if (phrase) {
+        searchParams.set("phrase", phrase);
+      } else {
+        searchParams.delete("phrase");
+      }
+      setSearchParams(searchParams, { replace: true });
+      const query = phrase ? `*:*${phrase}*` : "*:*";
+      setResponse(
+        await dispatchApi(
+          api.search.dossier.post({
+            query,
+            rows: pageCount,
+            offset
+          })
+        )
+      );
+    } catch (e) {
+      setHasError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+  useEffect(() => {
+    if (response) {
+      load(
+        response.items.map((item) => ({
+          id: item.dossier_id,
+          item,
+          selected: false,
+          cursor: false
+        }))
+      );
+    }
+  }, [response, load]);
+  const onPageChange = useCallback(
+    (_offset) => {
+      if (_offset !== offset) {
+        searchParams.set("offset", _offset.toString());
+        setSearchParams(searchParams, { replace: true });
+        setOffset(_offset);
+      }
+    },
+    [offset, searchParams, setSearchParams]
+  );
+  const onDelete = useCallback(
+    async (e, id) => {
+      e.preventDefault();
+      e.stopPropagation();
+      try {
+        await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
+        await onSearch();
+        showSuccessMessage(t("route.dossiers.manager.delete.success"));
+      } catch (_err) {
+        console.warn(_err);
+      }
+    },
+    [dispatchApi, onSearch, showSuccessMessage, t]
+  );
+  useEffect(() => {
+    onSearch();
+    if (!searchParams.has("offset")) {
+      searchParams.set("offset", "0");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, []);
+  useEffect(() => {
+    if ((response == null ? void 0 : response.total) <= offset) {
+      setOffset(0);
+      searchParams.set("offset", "0");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [offset, response == null ? void 0 : response.total, searchParams, setSearchParams]);
+  useEffect(() => {
+    if (!loading) {
+      onSearch();
+    }
+  }, [offset]);
+  const renderer = useCallback(
+    (item, className) => /* @__PURE__ */ jsx(DossierCard, { dossier: item, className, onDelete }),
+    [onDelete]
+  );
+  return /* @__PURE__ */ jsx(
+    ItemManager,
+    {
+      onSearch,
+      onPageChange,
+      phrase,
+      setPhrase,
+      hasError,
+      searching: loading,
+      aboveSearch: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: (theme) => ({ fontStyle: "italic", color: theme.palette.text.disabled, mb: 0.5 }),
+          variant: "body2",
+          children: t("route.dossiers.search.prompt")
+        }
+      ),
+      renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()),
+      response,
+      onSelect: (item) => navigate(`/dossiers/${item.id}/edit`),
+      onCreate: () => navigate("/dossiers/create"),
+      createPrompt: "route.dossiers.create",
+      searchPrompt: "route.dossiers.manager.search",
+      createIcon: /* @__PURE__ */ jsx(Topic, { sx: { mr: 1 } })
+    }
+  );
+};
+const Dossiers = () => {
+  return /* @__PURE__ */ jsx(TuiListProvider, { children: /* @__PURE__ */ jsx(DossiersBase, {}) });
+};
+export {
+  Dossiers as default
+};

package/components/routes/dossiers/LeadEditor.d.ts

@@ -0,0 +1,13 @@
+import { Lead } from '@cccsaurora/howler-ui/models/entities/generated/Lead';
+import { FC } from 'react';
+export interface LeadFormProps {
+    lead?: Lead;
+    metadata?: any;
+    update: (lead: Partial<Lead>) => void;
+    updateMetadata: (data: any) => void;
+}
+declare const LeadEditor: FC<{
+    lead?: Lead;
+    update: (lead: Partial<Lead>) => void;
+}>;
+export default LeadEditor;

package/components/routes/dossiers/LeadEditor.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { iconExists, 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 { useMonaco } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@monaco-editor+react@4.7.0_monaco-editor@0.49.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@monaco-editor/react/dist/index.mjs";
+import { Delete, OpenInNew } 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, Stack, TextField, Button, Typography, IconButton, Autocomplete } 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 ThemedEditor from "../../elements/ThemedEditor.js";
+import { merge } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import howlerPluginStore from "../../../plugins/store.js";
+import { useMemo, useCallback, useEffect } 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 LeadEditor = ({ lead, update }) => {
+  var _a, _b;
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const monaco = useMonaco();
+  const pluginStore = usePluginStore();
+  const icon = useMemo(() => (lead == null ? void 0 : lead.icon) ?? "material-symbols:find-in-page", [lead == null ? void 0 : lead.icon]);
+  const metadata = useMemo(() => JSON.parse((lead == null ? void 0 : lead.metadata) ?? "{}"), [lead == null ? void 0 : lead.metadata]);
+  const updateMetadata = useCallback(
+    (_metadata) => {
+      update({ metadata: JSON.stringify(merge({}, metadata, _metadata)) });
+    },
+    [metadata, update]
+  );
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+    monaco.editor.getModels().forEach((model) => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+  }, [monaco]);
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, pt: 2, sx: { flex: 1 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          label: t("route.dossiers.manager.icon"),
+          value: icon,
+          disabled: !lead,
+          fullWidth: true,
+          error: !iconExists(icon),
+          sx: { "& input": { paddingLeft: "2.25rem" } },
+          onChange: (ev) => update({ icon: ev.target.value })
+        }
+      ),
+      /* @__PURE__ */ jsx(Icon, { fontSize: "1.75rem", icon, style: { position: "absolute", left: "0.5rem" } }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          color: "error",
+          disabled: !lead,
+          sx: { minWidth: "0 !important", ml: 1 },
+          onClick: () => update(null),
+          children: /* @__PURE__ */ jsx(Delete, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: `${theme.spacing(0.5)} !important` }, children: [
+      /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("route.dossiers.manager.icon.description") }),
+      /* @__PURE__ */ jsx(IconButton, { size: "small", component: "a", href: "https://icon-sets.iconify.design/", children: /* @__PURE__ */ jsx(OpenInNew, { fontSize: "small" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          label: t("route.dossiers.manager.label.en"),
+          disabled: !lead,
+          value: ((_a = lead == null ? void 0 : lead.label) == null ? void 0 : _a.en) ?? "",
+          fullWidth: true,
+          onChange: (ev) => update({ label: { en: ev.target.value } })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          label: t("route.dossiers.manager.label.fr"),
+          disabled: !lead,
+          value: ((_b = lead == null ? void 0 : lead.label) == null ? void 0 : _b.fr) ?? "",
+          fullWidth: true,
+          onChange: (ev) => update({ label: { fr: ev.target.value } })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        disabled: !lead,
+        options: ["markdown", ...howlerPluginStore.leadFormats],
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, size: "small", label: t("route.dossiers.manager.format") }),
+        value: (lead == null ? void 0 : lead.format) ?? "",
+        onChange: (_ev, format) => update({ format, metadata: "{}", content: "" })
+      }
+    ),
+    !!(lead == null ? void 0 : lead.format) && (lead.format === "markdown" ? /* @__PURE__ */ jsx(
+      ThemedEditor,
+      {
+        height: "100%",
+        width: "100%",
+        language: "markdown",
+        theme: theme.palette.mode === "light" ? "howler" : "howler-dark",
+        value: (lead == null ? void 0 : lead.content) ?? "",
+        onChange: (content) => update({ content }),
+        options: {}
+      }
+    ) : pluginStore.executeFunction(`lead.${lead.format}.form`, {
+      lead,
+      metadata,
+      update,
+      updateMetadata
+    }))
+  ] });
+};
+export {
+  LeadEditor as default
+};

package/components/routes/dossiers/LeadForm.d.ts

@@ -0,0 +1,8 @@
+import { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import { Dispatch, FC, SetStateAction } from 'react';
+declare const LeadForm: FC<{
+    dossier: Dossier;
+    setDossier: Dispatch<SetStateAction<Partial<Dossier>>>;
+    loading: boolean;
+}>;
+export default LeadForm;

package/components/routes/dossiers/LeadForm.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } 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 { Add } 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 { Paper, Stack, Alert, Tabs, Tab, Button } 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 isNull from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isNull.js";
+import merge from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/merge.js";
+import { useState } 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 LeadEditor from "./LeadEditor.js";
+const LeadForm = ({
+  dossier,
+  setDossier,
+  loading
+}) => {
+  var _a;
+  const { t, i18n } = useTranslation();
+  const [tab, setTab] = useState(0);
+  return /* @__PURE__ */ jsxs(Paper, { sx: { p: 1, display: "flex", flexDirection: "column", flex: 1 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+      !(dossier == null ? void 0 : dossier.leads) || dossier.leads.length < 1 ? /* @__PURE__ */ jsx(
+        Alert,
+        {
+          variant: "outlined",
+          severity: "warning",
+          sx: {
+            mr: 1,
+            px: 1,
+            py: 0,
+            minHeight: "0 !important",
+            display: "flex",
+            alignItems: "center",
+            "& .MuiAlert-icon ": {
+              fontSize: "20px",
+              py: 0
+            },
+            "& .MuiAlert-message": {
+              py: 0.7
+            }
+          },
+          children: t("route.dossiers.manager.lead.create")
+        }
+      ) : /* @__PURE__ */ jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), sx: { minHeight: "0 !important" }, children: (_a = dossier.leads) == null ? void 0 : _a.map((lead, index) => /* @__PURE__ */ jsx(
+        Tab,
+        {
+          disabled: !dossier || loading,
+          sx: { py: 1, minHeight: "0 !important" },
+          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: index
+        },
+        lead.content
+      )) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          sx: { ml: "auto", alignSelf: "end", minWidth: "0 !important" },
+          size: "small",
+          variant: "contained",
+          onClick: () => {
+            var _a2;
+            setTab(((_a2 = dossier.leads) == null ? void 0 : _a2.length) ?? 0);
+            setDossier((_dossier) => ({
+              ..._dossier,
+              leads: [
+                ..._dossier.leads ?? [],
+                { icon: "material-symbols:add-ad", label: { en: "New Lead", fr: "Nouvelle Piste" } }
+              ]
+            }));
+          },
+          children: /* @__PURE__ */ jsx(Add, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      LeadEditor,
+      {
+        lead: (dossier.leads ?? [])[tab],
+        update: (data) => setDossier((_dossier) => ({
+          ..._dossier,
+          leads: (_dossier.leads ?? []).map((lead, index) => {
+            if (index !== tab) {
+              return lead;
+            }
+            if (isNull(data)) {
+              return null;
+            }
+            return merge({}, lead, data);
+          }).filter((_lead) => !isNull(_lead))
+        }))
+      }
+    )
+  ] });
+};
+export {
+  LeadForm as default
+};

package/components/routes/dossiers/PivotForm.d.ts

@@ -0,0 +1,13 @@
+import { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
+import { Dispatch, FC, SetStateAction } from 'react';
+export interface PivotFormProps {
+    pivot: Pivot;
+    update: (pivot: Partial<Pivot>) => void;
+}
+declare const PivotForm: FC<{
+    dossier: Dossier;
+    setDossier: Dispatch<SetStateAction<Partial<Dossier>>>;
+    loading: boolean;
+}>;
+export default PivotForm;