Data Quality Status
motiq/data-quality-statusFreeComponent
A presentation-only data-quality panel that displays app-supplied freshness/completeness/accuracy metrics (rendering "Unknown" when unmeasured), a filterable list of validation checks with keyboard-expandable per-check issue lists, affected-record counts, last-checked time, and a retry-validation control. Status is icon + text, never colour alone. It never claims accuracy without supplied evidence.
Live preview
live · rendered by the registry
Rendered by motiq on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://www.motiq.dev/r/data-quality-status.jsonSource
1"use client";23import * as React from "react";4import { motion, AnimatePresence } from "motion/react";56import { cn } from "@/lib/utils";7import {8 useReducedMotion,9 useDisclosure,10 useAnimatedNumber,11 statusVars,12 formatTimestamp as sharedFormatTimestamp,13 type StatusTone,14} from "@/lib/motiq";1516/* -------------------------------------------------------------------------- */17/* Types */18/* -------------------------------------------------------------------------- */1920export type TimeValue = Date | number | string;2122/**23 * The outcome of a single validation check, owned by the host application. The24 * component never runs the check and never decides pass/fail — it presents the25 * verdict the app supplies. `unknown` is a first-class, honest state: it means26 * the check has not produced evidence, and it is *never* silently upgraded to a27 * pass.28 */29export type CheckState = "pass" | "warning" | "failure" | "unknown";3031/** Filter selector for the check list (state, or "all"). */32export type CheckFilter = CheckState | "all";3334/** One line of detail for a check, revealed when its row is expanded. */35export interface QualityIssue {36 id: string;37 /** Human-readable description of the problem. */38 message: string;39 /** Records touched by this specific issue (app-supplied). */40 records?: number;41 /** Where the issue lives, e.g. "column: email". */42 location?: string;43}4445/** A single validation check result (app-supplied — never computed here). */46export interface QualityCheck {47 id: string;48 /** Short human label, e.g. "No null emails". */49 label: string;50 /** Verdict supplied by the application. */51 state: CheckState;52 /** One-line summary shown on the collapsed row. */53 summary?: string;54 /** How many records this check flagged (drives the affected-records count). */55 affectedRecords?: number;56 /** Per-check issue detail, shown when the row is expanded. */57 issues?: QualityIssue[];58}5960/**61 * A headline quality metric. Every field is optional so the app can honestly62 * report "Unknown" for anything it has not measured. The component NEVER invents63 * a value: with no `score` and no `label`, the tile shows "Unknown".64 */65export interface QualityMetric {66 /** Normalised 0–1 score, if the app measured one. */67 score?: number | null;68 /** Explicit display value (e.g. "98.6%", "2h behind"). Overrides `score`. */69 label?: string;70// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from motiq
All 100 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Activity Streamactivity-stream | motiq | Components | Free | 1 dep | |
| Adaptive Safe-Zone Gridadaptive-safe-zone-grid | motiq | Components | Free | no deps | |
| Agent Run Timelineagent-run-timeline | motiq | Components | Free | 1 dep | |
| AI Response Streamai-response-stream | motiq | Components | Free | 1 dep | |
| Animated Accordionanimated-accordion | motiq | Components | Free | 2 deps | |
| Animated Buttonanimated-button | motiq | Components | Free | 1 dep | |
| Animated Dialoganimated-dialog | motiq | Components | Free | 2 deps | |
| Animated Gridanimated-grid | motiq | Components | Free | 2 deps |
