cameleer-saas/ui/src/components/UsageIndicator.tsx

import styles from '../styles/platform.module.css';

interface Props {
  used: number;
  limit: number;
  label: string;
}

function barColor(pct: number): string {
  if (pct >= 100) return 'var(--error)';
  if (pct >= 75) return 'var(--warning)';
  return 'var(--success)';
}

export function UsageIndicator({ used, limit, label }: Props) {
  const unlimited = limit < 0;
  const pct = unlimited ? 0 : limit === 0 ? 100 : Math.min((used / limit) * 100, 100);

  return (
    <div className={styles.usageRow}>
      <div className={styles.usageHeader}>
        <span className={styles.usageLabel}>{label}</span>
        <span className={styles.usageValue} style={pct >= 100 ? { color: 'var(--error)', fontWeight: 600 } : undefined}>
          {used.toLocaleString()}{' / '}{unlimited ? '\u221e' : limit.toLocaleString()}
        </span>
      </div>
      {!unlimited && (
        <div className={styles.usageBarTrack}>
          <div
            className={styles.usageBarFill}
            style={{ width: `${Math.max(pct, 2)}%`, background: barColor(pct) }}
          />
        </div>
      )}
    </div>
  );
}