{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "openlmis-dashboard-card",
"title": "Dashboard Card",
"description": "Card frame for a dashboard: a title with its count in a badge, a one-line description, placeholders and an error with Try Again for a body whose data is not ready, and a row that sets a wide card beside a narrow one when there is room.",
"dependencies": [
"lucide-react@^1",
"@base-ui/react@^1"
],
"registryDependencies": [
"badge",
"button",
"card",
"skeleton"
],
"files": [
{
"path": "registry/blocks/openlmis/dashboard-card/dashboard-card.tsx",
"content": "import { AlertCircleIcon, WifiOffIcon } from \"lucide-react\"\nimport type { ReactNode } from \"react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\n/** Counts like 1,204, in one fixed locale so a server render and the browser agree. */\nexport const formatCount = new Intl.NumberFormat(\"en-US\").format\n\ntype DashboardCardProps = {\n title: ReactNode\n /** Beside the title, usually a `DashboardCardCount`. */\n badge?: ReactNode\n /** One line on what the card shows; pass a `Skeleton` while it loads. */\n description: ReactNode\n children: ReactNode\n}\n\n/** A dashboard card's chrome: title with its count, a line on what it shows, then the body. */\nexport function DashboardCard({\n title,\n badge,\n description,\n children,\n}: DashboardCardProps) {\n return (\n \n \n \n \n {title}\n {badge}\n \n \n {description}\n \n {children}\n \n )\n}\n\n/** The card's total beside its title; a placeholder while it loads, nothing when it failed. */\nexport function DashboardCardCount({\n value,\n failed = false,\n}: {\n value: number | undefined\n failed?: boolean\n}) {\n if (failed) return null\n if (value === undefined) {\n // A plain element, since Skeleton owns its corner radius and a badge is a pill.\n return (\n \n )\n }\n return {formatCount(value)}\n}\n\ntype DashboardCardErrorProps = {\n onRetry: () => void\n /** `offline` asks for a connection quietly instead of reporting a failure. */\n variant?: \"error\" | \"offline\"\n message?: ReactNode\n retryLabel?: ReactNode\n}\n\n/** A card body that failed to load, with a Try Again of its own so the rest of the page stays. */\nexport function DashboardCardError({\n onRetry,\n variant = \"error\",\n message = variant === \"offline\"\n ? \"Connect To Download This Data\"\n : \"This could not be loaded.\",\n retryLabel = \"Try Again\",\n}: DashboardCardErrorProps) {\n const offline = variant === \"offline\"\n\n return (\n \n {offline ? (\n \n ) : (\n \n )}\n {message}\n \n \n )\n}\n\n/** The description's placeholder while a card's data loads. */\nexport function DashboardCardDescriptionSkeleton() {\n return \n}\n\n/** A wide card beside a narrow one when the row has room, stacked otherwise; each fills the row's height. */\nexport function DashboardRow({\n wide,\n narrow,\n}: {\n wide?: ReactNode\n narrow?: ReactNode\n}) {\n return (\n // Its own container, so the split follows the room the row has, not the window.\n