Benjamin Sutter
70c0d79d8c
Design tokens: - lib/ds.ts: DS_COLORS (resultType/confidence/risk/availability/freshness/dataQuality), scoreToConfidenceLevel(), scoreToDataQualityLevel() - lib/constants.ts: added CONFIDENCE_LABELS, DATA_QUALITY_LABELS Badge system (src/components/badges/): - ResultTypeBadge, ConfidenceBadge, RiskBadge, AvailabilityBadge, FreshnessBadge, DataQualityBadge - All use DS_COLORS, MUI Chip size=small, lucide icons, German labels from constants Score components (src/components/scores/): - ConfidenceScore: numeric % with color from utils.confidenceHex - DataQualityScore: LinearProgress + qualitative label - ScoreBar: horizontal bar with label/value/weight - ScoreBreakdownMini: ScoreFactor[] mapped to ScoreBars with Tooltip explanations Card system (src/components/cards/): - DecisionCard: header+badges+score+body+actions, selected/loading/restricted states - CompactCard: single-row 48px card with leading/trailing slots - MetricCard: KPI card with label/value/delta/icon (extracted pattern from SupplyDashboard) Panel system (src/components/panels/): - InfoPanel: outlined Paper with icon+title header - DetailPanel: Accordion sections in bordered Paper - WarningPanel: MUI Alert with warning/critical severity Table components (src/components/tables/): - DataTableShell: Paper+TableContainer+Table with loading/empty/toolbar slots - TableToolbar: flex row with title/count/filters/actions - FilterBar: deletable Chips with clear-all - EmptyTableState: centered empty row spanning all cols - LoadingRows: Skeleton cell rows Form components (src/components/forms/): - TextInput: MUI TextField wrapper with onChange(string) signature - SelectField: generic SelectField<T extends string> with MUI Select - PriorityChipGroup: togglable Chip set (single/multi select) - FieldWithConfidence: label+value+ConfidenceBadge for AI-parsed fields UI additions (src/components/ui/): - CardSkeleton, PanelLoadingState, UnauthorizedState, RestrictedState Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { Box, LinearProgress, Typography } from '@mui/material'
|
|
import { dataQualityHex } from '../../lib/utils'
|
|
import { scoreToDataQualityLevel } from '../../lib/ds'
|
|
import { DATA_QUALITY_LABELS } from '../../lib/constants'
|
|
|
|
interface DataQualityScoreProps {
|
|
score: number
|
|
compact?: boolean
|
|
}
|
|
|
|
export function DataQualityScore({ score, compact = false }: DataQualityScoreProps) {
|
|
const color = dataQualityHex(score)
|
|
const pct = Math.round(score * 100)
|
|
const level = scoreToDataQualityLevel(score)
|
|
const label = DATA_QUALITY_LABELS[level] ?? level
|
|
|
|
if (compact) {
|
|
return (
|
|
<Typography
|
|
component="span"
|
|
sx={{ fontSize: '0.875rem', fontWeight: 700, color, fontVariantNumeric: 'tabular-nums' }}
|
|
>
|
|
{pct}%
|
|
</Typography>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, minWidth: 120 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>{label}</Typography>
|
|
<Typography sx={{ fontSize: '0.75rem', fontWeight: 600, color, fontVariantNumeric: 'tabular-nums' }}>
|
|
{pct}%
|
|
</Typography>
|
|
</Box>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={pct}
|
|
sx={{
|
|
height: 4,
|
|
borderRadius: 2,
|
|
bgcolor: 'rgba(0,0,0,0.06)',
|
|
'& .MuiLinearProgress-bar': { bgcolor: color, borderRadius: 2 },
|
|
}}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|