@campfire-interactive/shell-header 0.5.3 → 0.6.1

package/dist/index.d.ts

@@ -10,6 +10,12 @@ interface AppDefinition {
     color: string;
     /** Local dev port (e.g., 3000). Omit if the app doesn't run locally. */
     localPort?: number;
+    /**
+     * If set, the app tile is only visible when the host passes a
+     * `currentTenantRole` that matches one of these values. Used to gate
+     * admin-style apps (e.g. User Management → ['admin', 'owner']).
+     */
+    requiresRole?: string[];
 }
 interface ShellUser {
     name: string;
@@ -32,6 +38,12 @@ interface LocaleOption {
     /** Human-readable label shown in the dropdown, e.g. "English", "Deutsch". */
     label: string;
 }
+interface CurrencyOption {
+    /** ISO-4217 code, e.g. "USD", "EUR", "JPY". */
+    code: string;
+    /** Human-readable label shown in the dropdown, e.g. "US Dollar", "Euro". */
+    label: string;
+}
 /**
  * Subset of the platform-notifications `Notification` shape that the bell UI
  * actually renders. Hosts typically map their fetched items (e.g., from
@@ -53,6 +65,13 @@ interface ShellHeaderProps {
     user: ShellUser;
     /** App IDs the user is authorized to access in the current tenant */
     authorizedApps: string[];
+    /**
+     * The user's role in their currently-active tenant (e.g. "admin", "owner",
+     * "member"). Apps in the catalog with `requiresRole` are shown only when
+     * this matches one of the allowed roles. Hosts typically derive this from
+     * `user.tenants.find(t => t.id === user.tenant.id)?.role`.
+     */
+    currentTenantRole?: string;
     /** Unread count for the bell badge. */
     notificationCount?: number;
     /**
@@ -110,13 +129,31 @@ interface ShellHeaderProps {
      * pick up the change.
      */
     onLocaleChange?: (locale: string) => void | Promise<void>;
+    /**
+     * Current display currency (ISO-4217, e.g. "USD"). When provided alongside
+     * `supportedCurrencies` and `onCurrencyChange`, a Currency section renders
+     * inside the dropdown. Omitting any of the three hides it.
+     *
+     * The picker is a UI-only surface — this package neither knows nor cares
+     * about FX rates or conversion. Hosts handle rate tables, conversion, and
+     * persistence themselves.
+     */
+    currency?: string;
+    /** Currencies the user can pick from. */
+    supportedCurrencies?: ReadonlyArray<CurrencyOption>;
+    /**
+     * Called when the user picks a different currency. Consumer is responsible
+     * for persisting the choice (typically to localStorage or a user-prefs
+     * endpoint) and for propagating it through the rest of the UI.
+     */
+    onCurrencyChange?: (currency: string) => void | Promise<void>;
     /** Fixed width for the app brand area (e.g., to align with a sidebar below). */
     brandWidth?: number;
     /** Optional content in the left/center area (filters, search, breadcrumbs, etc.) */
     children?: React.ReactNode;
 }
 
-declare function ShellHeader({ appId, user, authorizedApps, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, locale, supportedLocales, onLocaleChange, tenant, tenants, onTenantSwitch, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ShellHeader({ appId, user, authorizedApps, currentTenantRole, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, locale, supportedLocales, onLocaleChange, currency, supportedCurrencies, onCurrencyChange, tenant, tenants, onTenantSwitch, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface LocaleSwitcherProps {
     currentLocale: string;

package/dist/index.js

@@ -34,7 +34,7 @@ var appCatalog = [
   { id: "pim", name: "Price Index", icon: "BarChart3", letter: "P", color: "#f97316", localPort: 3300 },
   { id: "cpq", name: "CPQ", icon: "Calculator", letter: "C", color: "#4f46e5", localPort: 3400 },
   { id: "omsf", name: "OMSF", icon: "FileText", letter: "O", color: "#0ea5e9", localPort: 3500 },
-  { id: "identity", name: "Identity", icon: "Shield", letter: "I", color: "#8b5cf6", localPort: 3600 },
+  { id: "identity", name: "User Management", icon: "Shield", letter: "U", color: "#8b5cf6", localPort: 3600, requiresRole: ["admin", "owner"] },
   { id: "bom", name: "BOM", icon: "Network", letter: "B", color: "#0d9488", localPort: 3700 }
 ];
 function getAppUrl(app) {
@@ -66,7 +66,8 @@ import {
   LogOut,
   Globe,
   ChevronDown,
-  Check
+  Check,
+  Coins
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconMap = {
@@ -97,10 +98,12 @@ function GridIcon({ size = 20 }) {
 
 // src/AppSwitcher.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function AppSwitcher({ currentAppId, authorizedApps }) {
+function AppSwitcher({ currentAppId, authorizedApps, currentTenantRole }) {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
-  const visibleApps = appCatalog.filter((a) => authorizedApps.includes(a.id));
+  const visibleApps = appCatalog.filter(
+    (a) => authorizedApps.includes(a.id) && (!a.requiresRole || currentTenantRole !== void 0 && a.requiresRole.includes(currentTenantRole))
+  );
   useEffect(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {
@@ -260,12 +263,16 @@ function UserMenu({
   locale,
   supportedLocales,
   onLocaleChange,
+  currency,
+  supportedCurrencies,
+  onCurrencyChange,
   tenant,
   tenants,
   onTenantSwitch
 }) {
   const [open, setOpen] = useState3(false);
   const [langExpanded, setLangExpanded] = useState3(false);
+  const [currExpanded, setCurrExpanded] = useState3(false);
   const [tenantExpanded, setTenantExpanded] = useState3(false);
   const [updating, setUpdating] = useState3(false);
   const ref = useRef3(null);
@@ -274,6 +281,7 @@ function UserMenu({
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
         setLangExpanded(false);
+        setCurrExpanded(false);
         setTenantExpanded(false);
       }
     }
@@ -283,6 +291,7 @@ function UserMenu({
   useEffect3(() => {
     if (!open) {
       setLangExpanded(false);
+      setCurrExpanded(false);
       setTenantExpanded(false);
     }
   }, [open]);
@@ -303,6 +312,22 @@ function UserMenu({
       setOpen(false);
     }
   }
+  const showCurrency = currency !== void 0 && supportedCurrencies !== void 0 && supportedCurrencies.length > 0 && onCurrencyChange !== void 0;
+  const currentCurrency = showCurrency ? supportedCurrencies.find((c) => c.code === currency) : void 0;
+  async function handleCurrencySelect(code) {
+    if (code === currency || !onCurrencyChange) {
+      setCurrExpanded(false);
+      return;
+    }
+    setUpdating(true);
+    try {
+      await onCurrencyChange(code);
+    } finally {
+      setUpdating(false);
+      setCurrExpanded(false);
+      setOpen(false);
+    }
+  }
   const showTenant = tenant !== void 0;
   const canSwitchTenant = showTenant && onTenantSwitch !== void 0 && Array.isArray(tenants) && tenants.length > 1;
   async function handleTenantSelect(tenantId) {
@@ -310,15 +335,6 @@ function UserMenu({
       setTenantExpanded(false);
       return;
     }
-    const target = tenants?.find((t) => t.id === tenantId);
-    const targetName = target?.name ?? "this tenant";
-    const confirmed = window.confirm(
-      `Switch to ${targetName}? Other open suite tabs will reload.`
-    );
-    if (!confirmed) {
-      setTenantExpanded(false);
-      return;
-    }
     setUpdating(true);
     try {
       await onTenantSwitch(tenantId);
@@ -424,6 +440,43 @@ function UserMenu({
           loc.code
         )) })
       ] }),
+      showCurrency && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "cfi-sh-menu-item cfi-sh-locale-row",
+            onClick: () => setCurrExpanded(!currExpanded),
+            "aria-expanded": currExpanded,
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4(Coins, { size: 14 }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-label", children: "Currency" }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-current", children: currentCurrency?.code ?? currency }),
+              /* @__PURE__ */ jsx4(
+                ChevronDown,
+                {
+                  size: 14,
+                  className: currExpanded ? "cfi-sh-locale-chevron cfi-sh-locale-chevron-open" : "cfi-sh-locale-chevron"
+                }
+              )
+            ]
+          }
+        ),
+        currExpanded && /* @__PURE__ */ jsx4("div", { className: "cfi-sh-locale-sublist", children: supportedCurrencies.map((cur) => /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: cur.code === currency ? "cfi-sh-menu-item cfi-sh-locale-sub-item cfi-sh-locale-item-active" : "cfi-sh-menu-item cfi-sh-locale-sub-item",
+            onClick: () => handleCurrencySelect(cur.code),
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-label", children: cur.label }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-code", children: cur.code })
+            ]
+          },
+          cur.code
+        )) })
+      ] }),
       /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
       /* @__PURE__ */ jsxs4(
         "button",
@@ -449,6 +502,7 @@ function ShellHeader({
   appId,
   user,
   authorizedApps,
+  currentTenantRole,
   notificationCount,
   onNotificationClick,
   notifications,
@@ -459,6 +513,9 @@ function ShellHeader({
   locale,
   supportedLocales,
   onLocaleChange,
+  currency,
+  supportedCurrencies,
+  onCurrencyChange,
   tenant,
   tenants,
   onTenantSwitch,
@@ -487,7 +544,7 @@ function ShellHeader({
           onItemClick: onNotificationItemClick
         }
       ),
-      /* @__PURE__ */ jsx5(AppSwitcher, { currentAppId: appId, authorizedApps }),
+      /* @__PURE__ */ jsx5(AppSwitcher, { currentAppId: appId, authorizedApps, currentTenantRole }),
       /* @__PURE__ */ jsx5(
         UserMenu,
         {
@@ -497,6 +554,9 @@ function ShellHeader({
           locale,
           supportedLocales,
           onLocaleChange,
+          currency,
+          supportedCurrencies,
+          onCurrencyChange,
           tenant,
           tenants,
           onTenantSwitch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/shell-header",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Shared shell header with app switcher for Campfire Suite",
   "type": "module",
   "main": "dist/index.js",