react-dashboard/src/components/ScoreCard.jsx

import React from 'react'

/**
 * Reusable KPI scorecard
 * variant: 'g' | 't' | 'b' | 's' | 'p' | 'r'  (green/teal/blue/saffron/purple/red)
 */
export default function ScoreCard({ label, value, sub, variant = 'g' }) {
  return (
    <div className={`sc ${variant}`}>
      <div className="cl">{label}</div>
      <div className={`cv ${variant}`}>{value ?? '—'}</div>
      {sub && <div className="cs">{sub}</div>}
    </div>
  )
}