@fastr-pro/global-header

Installation

 npm install @fastr-pro/global-header

Peer Dependencies

Make sure your project has React 18+ installed:

npm install react react-dom

Quick Start (Using Full Config)

import React from "react";
import { GlobalHeader } from "@fastr-pro/global-header";
import { Activity, TrendingUp, Zap } from "lucide-react";
import "@fastr-pro/global-header/style.css";

const headerConfig = {
  authApiUrl: "https://auth.fastrpro.com/api",
  authRedirectUrl: "https://auth.fastrpro.com",
  profileGetter: async () => {
    const res = await fetch("https://auth.fastrpro.com/api/user/profile", { credentials: "include" });
    return res.json();
  },
  uiTheme: "dark",
  currentApp: "xray",
  apps: {
    xray: {
      id: "xray",
      name: "Stock X-Ray",
      url: "https://xray.fastrpro.com",
      icon: Activity, // or JSX node: <Activity className="size-4 text-yellow-400" />
      bannerImage: "/images/bull_market.png",
      badgeColor: "text-yellow-400",
      footerNote: "Click any section to inspect diagnostic",
      menuHeader: "Matrices",
      description: "Comprehensive multi-dimensional stock diagnostics & matrix insights for precision trading.",
      pages: [
        {
          id: "performance",
          icon: TrendingUp,
          label: "Performance",
          value: "performance_matrix",
          description: "Relative Rotation Grade, Stage Identification & Momentum Analysis",
          sections: [
            {
              id: "rrg",
              title: "Relative Rotation Grade",
              desc: "Leading, Weakening, Lagging & Improving zones",
              route: "/performance_matrix#rrg",
            },
            {
              id: "stage",
              title: "Stage Identifier",
              desc: "Accumulation, Markup, Distribution & Markdown",
              route: "/performance_matrix#stage",
            },
            {
              id: "price-strength",
              title: "Price Strength",
              desc: "Comparative outperformance against benchmark",
              route: "/performance_matrix#price-strength",
            },
            {
              id: "momentum",
              title: "Momentum",
              desc: "Speed and acceleration across short to long terms",
              route: "/performance_matrix#momentum",
            },
          ],
        },
      ],
    },
  },
};

export default function App() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <GlobalHeader config={headerConfig} />
      <main className="p-6">
        <h1>Welcome to Stock X-Ray</h1>
      </main>
    </div>
  );
}

Configuration Schema

interface HeaderConfig {
  /** SSO / Auth API base URL for fetching profile or logging in */
  authApiUrl?: string;

  /** SSO Frontend / Redirect base URL (for login, register, purchase, profile) */
  authRedirectUrl?: string;

  /** Async or sync function to retrieve the authenticated user profile */
  profileGetter?: () => Promise<User> | User;

  /** Default or initial UI theme ("light" | "dark" | "system") */
  uiTheme?: "light" | "dark" | "system" | string;

  /** Identifier of the currently active app (e.g. "xray", "derivatives", etc.) */
  currentApp?: string;

  /** Directly pass user object (takes precedence over profileGetter) */
  user?: User | null;

  /** Custom logout callback */
  logout?: () => void | Promise<void>;

  /** Micro-application endpoints mapping */
  urls?: {
    landing?: string;
    sso?: string;
    purchase?: string;
    profile?: string;
    xray?: string;
    scanner?: string;
    charting?: string;
    macro?: string;
    derivatives?: string;
  };

  /** Dictionary of apps configuration */
  apps?: Record<string, AppConfig> | AppConfig[];
}

App Configuration (AppConfig)

| Field | Type | Description | | :--- | :--- | :--- | | id | string | Unique application identifier (e.g. "xray", "scanner", "charting", "derivatives"). | | name / label | string | Display name in the navbar. | | url | string | Base URL of the application. | | icon | Component \| JSX | Lucide icon component, functional component, or pre-rendered JSX element. | | bannerImage | string | Image URL displayed in the leftmost overview card. | | badge | string | Badge label displayed over the banner card (defaults to name). | | badgeColor | string | Tailwind text color class for the icon/badge (e.g. "text-yellow-400"). | | description | string | Description text rendered inside the overview card. | | menuHeader | string | Header text above the category/pages column (e.g. "Matrices", "Filter Groups"). | | footerNote | string | Helper note in the bottom of the overview card. | | quickActions | QuickAction[] | Action buttons rendered at the bottom of the overview card (e.g. "Saved Filters", "Live Radar"). | | pages / categories | AppPage[] | List of category pages rendered in the middle navigation column. |

Page Configuration (AppPage)

| Field | Type | Description | | :--- | :--- | :--- | | id | string | Unique page identifier. | | label / title | string | Display title of the category. | | icon | Component \| JSX | Category icon. | | description | string | Overview description of the page shown in the right column header. | | sections / items | AppItem[] | List of items or sub-sections rendered in the right-side grid. | | onClick | (page, app) => void | Optional custom click handler when clicking the category tab. |

Section / Item Configuration (AppItem)

| Field | Type | Description | | :--- | :--- | :--- | | id | string | Unique item identifier. | | title / name | string | Item title. | | desc / description| string | Subtitle / description for the item card. | | route / href | string | Target route or URL when clicked. | | onClick | (item, page, app) => void | Custom click handler for the item. |

Modifying Defaults (createHeaderConfig)

You can extend or modify the default Fastr Pro configuration using createHeaderConfig:

import { GlobalHeader, createHeaderConfig, defaultHeaderConfig } from "@fastr-pro/global-header";

const myConfig = createHeaderConfig({
  uiTheme: "dark",
  currentApp: "scanner",
  apps: {
    scanner: {
      menuHeader: "Custom Scans",
      footerNote: "Custom screener note",
    },
  },
});

export default function Header() {
  return <GlobalHeader config={myConfig} />;
}

Exports

• GlobalHeader (default and named)
• GlobalMegaMenu
• FasterProLogo
• createHeaderConfig, defaultHeaderConfig
• renderIcon
• Data matrices: stockXRayCategories, chartingCategories, scannerCategories, macroPulseCategories, derivativesCategories
• UI primitives: NavigationMenu*, DropdownMenu*, Popover*, cn