A client-side React component that renders a styled card UI for displaying MSP organization details, supporting optional navigation links, action buttons, device counts, and configurable footer stats. ## Key Components ### Interfaces - **`Organization`** — Data model for an MSP organization, including `id`, `name`, `imageUrl`, `industry`, `tier`, `totalDevices`, `activeDevices`, `mrrUsd`, and an index signature for custom fields. - **`OrganizationCardProps`** — Props contract for the card, supporting: - `organization` — Required organization data object - `fetchedImageUrl` — Optional externally resolved image URL (overrides `organization.imageUrl`) - `href` — Makes the card a navigable `Link` - `actionButton` — Configurable icon button with `ghost` or `primary` variant (mutually exclusive with `deviceCount`) - `footerStats` — Array of `{ icon, value, label }` stat items rendered in the card footer - `customFooter` — Fully custom footer `ReactNode` override - `deviceCount` — Displays a `Monitor` icon + count badge in the top-right corner ### Exported Function - **`OrganizationCard`** — Main card component. Renders a bordered, rounded card with an `EntityImage`, name, subtitle (industry/tier/website), optional description, and footer. Wraps in a `` when `href` is provided. ## Usage Example ```typescript import { OrganizationCard } from "@openframe-oss-lib/ui" import { Trash2 } from "lucide-react" const org = { id: "org_123", name: "Acme Corp", industry: "Healthcare", description: "A leading healthcare provider.", totalDevices: 42, } // Linkable card with device count // Card with action button and footer stats , label: "Remove organization", variant: "ghost", onClick: (org, e) => console.log("Remove", org.id), }} footerStats={[ { value: 42, label: "devices" }, { value: "$1,200", label: "MRR" }, ]} /> ``` ## Notes - `deviceCount` and `actionButton` are mutually exclusive — the action button only renders when `deviceCount` is `undefined`. - `customFooter` takes precedence over `footerStats` when both are provided. - Source: [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/components/organization-card.tsx)