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
Branded health overview card composing vitals-display, medication-reminder, and appointment-card primitives with malachite mineral accent. Shows key health metrics, upcoming appointments, and medication schedule at a glance. Sovereign data — all health data stays in the user pod.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"
/* ═══════════════════════════════════════════════════════════════
NYUCHI HEALTH DASHBOARD — Brand Component (Pre-Wired)
Mineral: Malachite (wellness, health, vitality).
Sovereign health data overview — all data stays in user pod.
✅ HARNESS ✅ TOKENS ✅ STRICT MINERAL RULES ✅ TOUCH 48px+
═══════════════════════════════════════════════════════════════ */
interface Vital { label: string; value: string; unit?: string; trend?: "up" | "down" | "stable" }
interface Appointment { provider: string; specialty: string; date: string; time: string }
interface Medication { name: string; dosage: string; nextDue?: string; taken?: boolean }
interface NyuchiHealthDashboardProps {
vitals?: Vital[]; appointments?: Appointment[]; medications?: Medication[]
lastSync?: string; onViewAll?: () => void; className?: string
}
export function NyuchiHealthDashboard({ loading = false, vitals = [], appointments = [], medications = [], lastSync, onViewAll, className }: NyuchiHealthDashboardProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("health-dashboard")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
if (loading) return (<div data-slot="nyuchi-health-dashboard" data-portal="https://design.nyuchi.com/components/nyuchi-health-dashboard" data-loading role="region" aria-label="Health overview" className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card ring-1 ring-foreground/10 overflow-hidden"><div className="border-b border-border px-4 py-3"><div className="h-4 w-1/3 rounded bg-muted" /></div><div className="grid grid-cols-2 gap-px bg-border">{Array.from({length:4}).map((_,i)=>(<div key={i} className="bg-card p-3 space-y-1.5"><div className="h-2.5 w-1/2 rounded bg-muted" /><div className="h-5 w-2/3 rounded bg-muted" /></div>))}</div></div>)
const trendIcon = { up: "↑", down: "↓", stable: "→" }
return (
<div data-slot="nyuchi-health-dashboard" role="region" aria-label="Health overview" className={cn("bg-card rounded-[var(--radius-lg,14px)] border border-border overflow-hidden", className)}>
<div className="border-b border-border px-4 py-3 flex items-center justify-between">
<h3 className="text-sm font-semibold text-foreground" style={{ fontFamily: "var(--font-serif)" }}>Health Overview</h3>
{lastSync && <span className="text-[10px] text-muted-foreground">Synced {lastSync}</span>}
</div>
{vitals.length > 0 && (
<div className="grid grid-cols-2 gap-px bg-border">{vitals.slice(0, 4).map((v, i) => (
<div key={i} className="bg-card p-3 space-y-0.5">
<p className="text-[10px] text-muted-foreground">{v.label}</p>
<p className="text-lg font-bold text-foreground">{v.value}<span className="text-xs font-normal text-muted-foreground ml-1">{v.unit}</span></p>
{v.trend && <span className={cn("text-[10px] font-medium", v.trend === "up" ? "text-[var(--status-success, #22C55E)]" : v.trend === "down" ? "text-red-400" : "text-muted-foreground")}>{trendIcon[v.trend]} {v.trend}</span>}
</div>
))}</div>
)}
{appointments.length > 0 && (
<div className="border-t border-border px-4 py-3 space-y-2">
<p className="text-[11px] font-semibold text-muted-foreground">Upcoming</p>
{appointments.slice(0, 2).map((a, i) => (
<div key={i} className="flex items-center gap-3">
<div className="size-8 rounded-full bg-[var(--status-success, #22C55E)]/10 flex items-center justify-center text-sm">🏥</div>
<div className="flex-1 min-w-0"><p className="text-xs font-medium text-foreground truncate">{a.provider}</p><p className="text-[10px] text-muted-foreground">{a.specialty} · {a.date} {a.time}</p></div>
</div>
))}
</div>
)}
{medications.length > 0 && (
<div className="border-t border-border px-4 py-3 space-y-2">
<p className="text-[11px] font-semibold text-muted-foreground">Medications</p>
{medications.slice(0, 3).map((m, i) => (
<div key={i} className="flex items-center gap-3">
<div className={cn("size-5 rounded-full border-2 flex items-center justify-center text-[10px]", m.taken ? "border-[var(--status-success, #22C55E)] bg-[var(--status-success, #22C55E)]/20 text-[var(--status-success, #22C55E)]" : "border-border text-transparent")}>✓</div>
<div className="flex-1"><p className="text-xs text-foreground">{m.name} · {m.dosage}</p>{m.nextDue && !m.taken && <p className="text-[10px] text-muted-foreground">Due: {m.nextDue}</p>}</div>
</div>
))}
</div>
)}
{onViewAll && <div className="border-t border-border p-3"><button onClick={onViewAll} className="flex h-12 w-full items-center justify-center rounded-full bg-[var(--status-success, #22C55E)] text-[#0A0A0A] text-[13px] font-medium transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] hover:opacity-80">View All Health Data</button></div>}
</div>
)
}
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-health-dashboardFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-health-dashboard