@wisemen/wise-crm-web 2.0.0-alpha.40 → 2.0.0-alpha.42

package/README.md

@@ -4,7 +4,7 @@ Vue 3 CRM package: business, individual and deal overviews, detail views, dialog
 
 ## Extending the detail views
 
-The business and individual detail views can be extended with content from the host app in two places.
+The detail views can be extended with content from the host app in three places.
 
 ### Custom tabs
 
@@ -88,3 +88,65 @@ Individual sections receive `individualUuid: WiseCrmIndividualUuid` instead. A c
 ```
 
 A section that becomes visible after the sidebar has mounted still opens by default.
+
+### Custom header badges
+
+Badges rendered in the header of the business, individual and deal sidebars. Business and individual badges follow the built-in entity badge; deal badges get their own row below the deal number and client. They show in both the detail view and the quick-view dialog. Register them through `headerBadges` on the `business` / `individual` / `deals` options of `useWiseCrmConfig().init()`:
+
+```ts
+useWiseCrmConfig().init({
+  // ...
+  options: {
+    business: {
+      headerBadges: [
+        {
+          key: 'open-invoices',
+          color: 'warning',
+          icon: FileAttachment01Icon,
+          getData: async ({ uuid }) => {
+            const count = await InvoiceService.getOpenCountForBusiness(uuid)
+
+            return count > 0 ? t('crm.business.badges.open_invoices', { count }) : null
+          },
+        },
+      ],
+    },
+    deals: {
+      // ...
+      headerBadges: [...],
+    },
+    individual: {
+      headerBadges: [...],
+    },
+  },
+})
+```
+
+| Field                                 | Description                                                                                                 |
+| ------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `key`                                 | Unique per entity; used to cache the badge's data.                                                          |
+| `getData`                             | Receives `{ uuid }` and resolves to the badge label, or to `{ label, color?, variant?, icon?, dot? }` when the style depends on the data. Resolve to `null` or an empty label to hide the badge. |
+| `color`, `variant`, `icon`, `dot`     | Optional, passed to `UIBadge`. Defaults match the built-in badges (`gray`, `translucent`).                  |
+
+Styles returned from `getData` override the ones on the badge, for example to color a score by its value:
+
+```ts
+{
+  key: 'credit-score',
+  getData: async ({ uuid }) => {
+    const { score, isHealthy } = await CreditService.getForBusiness(uuid)
+
+    return {
+      label: t('crm.business.badges.credit_score', { score }),
+      color: isHealthy ? 'success' : 'error',
+    }
+  },
+}
+```
+
+Type the arrays with `WiseCrmBusinessHeaderBadge`, `WiseCrmIndividualHeaderBadge` or `WiseCrmDealHeaderBadge`; `uuid` is then a `WiseCrmBusinessUuid`, `WiseCrmIndividualUuid` or `WiseCrmDealUuid`.
+
+- The label is rendered as is, so translate it in `getData`. Badges refetch when the locale changes. Long labels are truncated with a tooltip.
+- A skeleton is shown while `getData` is pending.
+- When `getData` throws, the badge is hidden and the error is logged; it is not retried.
+- Badges are not refetched when the entity is edited in the CRM, since the host app's data usually only follows through an event. To refresh them, for example on a websocket event, invalidate the `wiseCrmHeaderBadge` query key.

package/dist/{BusinessDetailView-CzYmbWDI.js → BusinessDetailView-DCLbk1zs.js}

@@ -1,8 +1,8 @@
 import { defineComponent as n, openBlock as o, createBlock as r, unref as s, withCtx as a, createVNode as u } from "vue";
 import { useRouteParams as m } from "@vueuse/router";
-import { _ as p } from "./index-BM5Kw4_U.js";
+import { _ as p } from "./index-D0Wq9rrv.js";
 import { br as c } from "./uuid.util-SYJY4Bt5.js";
-import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-Cnn_HfDr.js";
+import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-hKRJ0iTD.js";
 const x = /* @__PURE__ */ n({
   __name: "BusinessDetailView",
   props: {

package/dist/{CrmDetailView.vue_vue_type_script_setup_true_lang-Cnn_HfDr.js → CrmDetailView.vue_vue_type_script_setup_true_lang-hKRJ0iTD.js}

@@ -1,7 +1,7 @@
 import { defineComponent as v, ref as h, unref as e, openBlock as d, createElementBlock as u, createElementVNode as t, renderSlot as x, createVNode as r, withCtx as f, Fragment as y, renderList as g, createBlock as w, toValue as m, createCommentVNode as b } from "vue";
 import { onKeyStroke as C } from "@vueuse/core";
 import { UITabsRouterLink as k, UITabsRouterLinkItem as R, UIIconButton as B } from "@wisemen/vue-core-design-system";
-import { h as E, j as I, $ as T, ac as V } from "./index-BM5Kw4_U.js";
+import { h as E, j as I, $ as T, ad as V } from "./index-D0Wq9rrv.js";
 import { useRoute as $, RouterView as j } from "vue-router";
 class A {
   /**

package/dist/{DealCommunicationTabView-DJ3O_RbV.js → DealCommunicationTabView-DLpKFEzi.js}

@@ -1,7 +1,7 @@
 import { defineComponent as y, openBlock as t, createElementBlock as _, createElementVNode as s, createBlock as o, resolveDynamicComponent as x, unref as e, toDisplayString as p, createVNode as r, withCtx as n, createCommentVNode as f, Fragment as b, renderList as w, normalizeClass as k, computed as I } from "vue";
 import { useRouteParams as U } from "@vueuse/router";
 import { useOffsetInfiniteQuery as M } from "@wisemen/vue-core-api-utils";
-import { M as z, u as E, a as L, T as j, b as B, W as F, F as T, c as S, D as h, g as A, d as D, m as N, e as V, A as H } from "./index-BM5Kw4_U.js";
+import { M as z, u as E, a as L, T as j, b as B, W as F, F as T, c as S, D as h, g as A, d as D, m as N, e as V, A as H } from "./index-D0Wq9rrv.js";
 import { UIIconButton as Q, UIEmptyState as q, UIBadge as P } from "@wisemen/vue-core-design-system";
 import { AnimatePresence as W, Motion as O } from "motion-v";
 import { AccordionRoot as R, AccordionItem as G, AccordionHeader as J, AccordionTrigger as K, AccordionContent as X } from "reka-ui";