11ステータス バッジカラー管理

用途

架電リスト用 11ステータス × カラーバッジマッピング。badge-gray/orange/red/purple/cyan/green/dark の統一。

特徴

• 11ステータス定義
• カラーマッピング
• CSS クラス設計
• 一貫したUI

コード（コピペ用）

// SCALE CRM: 11 ステータス + バッジカラーマッピング
const CALL_ST = ['コールのみ','担当不在','不通（上限まで架電）','受付ブロック','失注','育成','資料請求','アポ獲得','メール日程調整','架電NG','NGリスト'];

const ST_BADGE = {
  'コールのみ':         'badge-gray',
  '担当不在':           'badge-orange',
  '不通（上限まで架電）': 'badge-red',
  '受付ブロック':       'badge-red',
  '失注':              'badge-red',
  '育成':              'badge-purple',
  '資料請求':          'badge-cyan',
  'アポ獲得':          'badge-green',
  'メール日程調整':     'badge-green',
  '架電NG':            'badge-red',
  'NGリスト':          'badge-dark',
};

// CSS（要 Tailwind or 個別定義）
const BADGE_CSS = `
.badge-gray { background:#71717a;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px; }
.badge-orange { background:#fb923c;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px; }
.badge-red { background:#ef4444;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px; }
.badge-purple { background:#a78bfa;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px; }
.badge-cyan { background:#22d3ee;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px; }
.badge-green { background:#10b981;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px; }
.badge-dark { background:#18181b;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;border:1px solid #3f3f46; }
`;

// 使い方
function renderStatusBadge(status) {
  const cls = ST_BADGE[status] || 'badge-gray';
  return `<span class="${cls}">${status}</span>`;
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加