`frontend/src/components/PhaseBar.tsx`

69 lines
const PHASES = [
  { id: 'caucus', label: 'Caucus' },
  { id: 'call_to_order', label: 'Call to Order' },
  { id: 'old_business', label: 'Old Business' },
  { id: 'current_business', label: 'Current Business' },
  { id: 'new_business', label: 'New Business' },
  { id: 'breakout', label: 'Breakout' },
  { id: 'minutes', label: 'Minutes' },
  { id: 'adjournment', label: 'Adjournment' },
];

interface Props {
  currentPhase: string | null;
  status: string | null;
}

export default function PhaseBar({ currentPhase, status }: Props) {
  const activeIdx = PHASES.findIndex(p => p.id === currentPhase);

  return (
    <div style={styles.bar}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <span style={{ fontSize: 12, fontWeight: 700 }}>Meeting Phases</span>
        {status && (
          <span style={{
            ...styles.statusBadge,
            background: status === 'in_progress' ? '#22c55e22' : status === 'halted' ? '#ef444422' : '#7a7f9622',
            color: status === 'in_progress' ? '#22c55e' : status === 'halted' ? '#ef4444' : '#7a7f96',
          }}>
            {status.replace('_', ' ')}
          </span>
        )}
      </div>
      <div style={styles.phases}>
        {PHASES.map((p, i) => {
          const isActive = i === activeIdx;
          const isPast = i < activeIdx;
          return (
            <div
              key={p.id}
              style={{
                ...styles.phase,
                background: isActive ? '#8b5cf6' : isPast ? '#8b5cf644' : '#252540',
                color: isActive ? '#fff' : isPast ? '#b0b3c0' : '#7a7f96',
                fontWeight: isActive ? 700 : 400,
                boxShadow: isActive ? '0 0 12px #8b5cf644' : 'none',
              }}
            >
              <span style={{ fontSize: 8, opacity: 0.6 }}>{i + 1}</span>
              <span style={{ fontSize: 10 }}>{p.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  bar: { background: '#1a1a2e', borderRadius: 12, padding: 16, border: '1px solid #252540' },
  phases: { display: 'flex', gap: 4 },
  phase: {
    flex: 1, padding: '8px 4px', borderRadius: 6, textAlign: 'center' as const,
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
    transition: 'all 0.3s',
  },
  statusBadge: { padding: '3px 10px', borderRadius: 4, fontSize: 10, fontWeight: 600 },
};