@umituz/web-dashboard 4.6.4 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.6.4",
+  "version": "4.7.0",
   "description": "Installable app skeleton for the fleet — layouts, auth, onboarding, analytics (dependency-free SVG charts), calendar, i18n injection, permissions/session/module registry; ships its own udb-* stylesheet and --u-* tokens",
   "type": "module",
   "main": "./src/index.ts",

package/src/domains/layouts/components/DashboardHeader.tsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
 import {
   Bell, X, Sun, Moon, Menu, User, Settings, LogOut,
-  ChevronDown, CreditCard
+  ChevronDown
 } from "lucide-react";
 import { Button } from "../../../primitives";
 import { useNavigate } from "react-router-dom";
 import { useT } from "../../../i18n";
-import type { DashboardHeaderProps } from "../types/layout";
+import type { DashboardHeaderProps, HeaderProfileItem } from "../types/layout";
 import type { DashboardNotification } from "../types/notification";
 import type { DashboardUser } from "../types/user";
 import { formatNotificationTime } from "../utils/dashboard";
@@ -26,8 +26,9 @@ interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
   settingsRoute?: string;
   /** Profile route */
   profileRoute?: string;
-  /** Billing route */
-  billingRoute?: string;
+  /** Host-injected profile-menu entries — billing and friends live here,
+    *  not in the skeleton. */
+  extraProfileItems?: HeaderProfileItem[];
 }
 
 /**
@@ -53,7 +54,7 @@ export const DashboardHeader = ({
   onDismissNotification,
   settingsRoute = "/dashboard/settings",
   profileRoute = "/dashboard/profile",
-  billingRoute = "/dashboard/billing",
+  extraProfileItems = [],
 }: DashboardHeaderPropsExtended) => {
   const navigate = useNavigate();
   const t = useT();
@@ -200,14 +201,21 @@ export const DashboardHeader = ({
                     <User className="udb-menu__item-icon" />
                     {t('common.profile')}
                   </button>
-                  <button
-                    type="button"
-                    onClick={() => { navigate(billingRoute); setProfileOpen(false); }}
-                    className="udb-menu__item"
-                  >
-                    <CreditCard className="udb-menu__item-icon" />
-                    {t('common.billing')}
-                  </button>
+                  {extraProfileItems.map((item) => (
+                    <button
+                      key={item.key}
+                      type="button"
+                      onClick={() => {
+                        if (item.to) navigate(item.to);
+                        item.onSelect?.();
+                        setProfileOpen(false);
+                      }}
+                      className="udb-menu__item"
+                    >
+                      {item.icon}
+                      {item.label}
+                    </button>
+                  ))}
                   <button
                     type="button"
                     onClick={() => { navigate(settingsRoute); setProfileOpen(false); }}

package/src/domains/layouts/components/PageHeader.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { PageHeader } from './PageHeader';
+
+describe('PageHeader markup smoke', () => {
+  it('renders kicker before title and omits it when undefined', () => {
+    const html = renderToString(
+      <PageHeader kicker="Customer area" title="Policies" subtitle="Your coverage at a glance" />,
+    );
+    const kickerAt = html.indexOf('udb-pageheader__kicker');
+    const titleAt = html.indexOf('udb-pageheader__title');
+    expect(kickerAt).toBeGreaterThan(-1);
+    expect(kickerAt).toBeLessThan(titleAt);
+    expect(html).toContain('Customer area');
+
+    const bare = renderToString(<PageHeader title="Policies" />);
+    expect(bare).not.toContain('udb-pageheader__kicker');
+  });
+
+  it('renders actions and breadcrumb nodes in their slots', () => {
+    const html = renderToString(
+      <PageHeader
+        title="Claims"
+        breadcrumbs={<a href="/policies">Policies</a>}
+        actions={<button type="button">New claim</button>}
+      />,
+    );
+    expect(html).toContain('udb-pageheader__breadcrumbs');
+    expect(html).toContain('udb-pageheader__actions');
+    expect(html).toContain('New claim');
+  });
+});

package/src/domains/layouts/components/PageHeader.tsx

@@ -6,6 +6,7 @@ export interface PageHeaderCrumb {
 }
 
 export interface PageHeaderProps {
+  kicker?: ReactNode;
   title?: ReactNode;
   subtitle?: ReactNode;
   description?: ReactNode;
@@ -17,7 +18,7 @@ export interface PageHeaderProps {
 const isCrumbList = (value: ReactNode | readonly PageHeaderCrumb[]): value is readonly PageHeaderCrumb[] =>
   Array.isArray(value) && value.every((item) => typeof item === "object" && item !== null && "label" in item);
 
-export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
+export const PageHeader = ({ kicker, title, subtitle, description, breadcrumbs, actions, className }: PageHeaderProps) => {
   const crumbNode =
     breadcrumbs === undefined
       ? undefined
@@ -32,6 +33,7 @@ export const PageHeader = ({ title, subtitle, description, breadcrumbs, actions,
     <div className={`udb-pageheader${className ? ` ${className}` : ""}`}>
       {crumbNode !== undefined && <div className="udb-pageheader__breadcrumbs">{crumbNode}</div>}
       <div className="udb-pageheader__main">
+        {kicker !== undefined && <p className="udb-pageheader__kicker">{kicker}</p>}
         {title !== undefined && <h1 className="udb-pageheader__title">{title}</h1>}
         {(subtitle ?? description) !== undefined && (
           <p className="udb-pageheader__subtitle">{subtitle ?? description}</p>

package/src/domains/layouts/types/index.ts

@@ -3,7 +3,7 @@
  */
 
 export type { SidebarItem, SidebarGroup } from './sidebar';
-export type { DashboardHeaderProps, DashboardSidebarProps, DashboardLayoutConfig } from './layout';
+export type { DashboardHeaderProps, DashboardSidebarProps, DashboardLayoutConfig, HeaderProfileItem } from './layout';
 export type { DashboardTheme, DashboardThemePreset } from './theme';
 export type { DashboardNotification } from './notification';
 export type { DashboardUser, UserNavMenuItem } from './user';

package/src/domains/layouts/types/layout.ts

@@ -22,6 +22,24 @@ export interface DashboardHeaderProps {
   onToggleTheme?: () => void;
 }
 
+/**
+ * Host-injected profile-menu entry — the extension seam for pages the
+ * skeleton does not own (billing, referrals, anything). Rendered above
+ * Settings; `to` navigates, `onSelect` runs, both close the menu.
+ */
+export interface HeaderProfileItem {
+  /** Stable key for list rendering */
+  key: string;
+  /** Display label (already translated by the host) */
+  label: string;
+  /** Optional icon node — bring your own sizing (`udb-menu__item-icon`) */
+  icon?: React.ReactNode;
+  /** Route to navigate to */
+  to?: string;
+  /** Click handler (runs after navigation when both are set) */
+  onSelect?: () => void;
+}
+
 /**
  * Dashboard sidebar props
  */

package/src/index.ts

@@ -11,18 +11,6 @@
 export * from './domains/layouts';
 export * from './domains/settings';
 export * from './domains/calendar';
-export {
-  OnboardingWizard,
-  useOnboarding,
-  useOnboardingStep,
-} from './domains/onboarding';
-
-export type {
-  OnboardingStep,
-  OnboardingState,
-  OnboardingConfig,
-} from './domains/onboarding';
-
 export {
   AuthLayout,
   LoginForm,