nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Creator and platform revenue metrics with earnings chart, payout history, next payout date, and revenue split visualization. Used in creator dashboards (Novels, Bytes) and Nyuchi Console financial overview.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface PayoutEntry {
date: string
amount: number
status: "paid" | "pending" | "scheduled"
}
interface RevenueDashboardWidgetProps extends React.ComponentProps<"div"> {
totalEarnings: number
periodLabel?: string
currency?: string
platformFee?: number
creatorShare?: number
nextPayoutDate?: string
nextPayoutAmount?: number
recentPayouts?: PayoutEntry[]
}
function RevenueDashboardWidget({
totalEarnings, periodLabel = "This month", currency = "MXT",
platformFee, creatorShare, nextPayoutDate, nextPayoutAmount, recentPayouts,
loading = false, className, ...props
}: RevenueDashboardWidgetProps) {
return (
<div
data-slot="revenue-dashboard-widget" data-portal="https://design.nyuchi.com/components/revenue-dashboard-widget" role="article"
className={cn("rounded-[var(--radius-xl,17px)] border border-border bg-card p-5", className)}
{...props}
>
<div className="text-xs text-muted-foreground">{periodLabel}</div>
<div className="mt-1 text-2xl font-bold tabular-nums">{totalEarnings.toLocaleString()} {currency}</div>
{(platformFee !== undefined && creatorShare !== undefined) && (
<div className="mt-3 flex gap-3 text-xs">
<div>
<span className="text-muted-foreground">Your share: </span>
<span className="font-medium text-[var(--color-malachite,#64FFDA)]">{creatorShare}%</span>
</div>
<div>
<span className="text-muted-foreground">Platform: </span>
<span className="font-medium">{platformFee}%</span>
</div>
</div>
)}
{nextPayoutDate && (
<div className="mt-3 rounded-[var(--radius-md,12px)] bg-muted/30 p-3">
<div className="text-[10px] text-muted-foreground">Next payout</div>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">{nextPayoutDate}</span>
{nextPayoutAmount && <span className="text-sm font-bold tabular-nums">{nextPayoutAmount.toLocaleString()} {currency}</span>}
</div>
</div>
)}
{recentPayouts && recentPayouts.length > 0 && (
<div className="mt-3 space-y-1.5">
<div className="text-[10px] font-medium text-muted-foreground">Recent payouts</div>
{recentPayouts.map((p, i) => (
<div key={i} className="flex items-center justify-between text-xs">
<span className="text-muted-foreground">{p.date}</span>
<div className="flex items-center gap-2">
<span className="font-medium tabular-nums">{p.amount.toLocaleString()} {currency}</span>
<span className={cn(
"rounded-full px-1.5 py-0.5 text-[9px]",
p.status === "paid" ? "bg-[var(--color-malachite,#64FFDA)]/10 text-[var(--color-malachite,#64FFDA)]"
: p.status === "pending" ? "bg-[var(--color-gold,#FFD740)]/10 text-[var(--color-gold,#FFD740)]"
: "bg-muted text-muted-foreground"
)}>
{p.status}
</span>
</div>
</div>
))}
</div>
)}
</div>
)
}
export { RevenueDashboardWidget }
export type { RevenueDashboardWidgetProps }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/revenue-dashboard-widgetnpx shadcn@latest add https://mzizi.dev/api/v1/ui/revenue-dashboard-widget