Function BillingAlerts

web/src/components/organization/billing-alerts.tsx:35–157

({ organizationId }: BillingAlertsProps)

}

export function BillingAlerts({ organizationId }: BillingAlertsProps) {
  const [alerts, setAlerts] = useState<BillingAlert[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchAlerts()

    // Poll for new alerts every 30 seconds
    const interval = setInterval(fetchAlerts, 30000)
    return () => clearInterval(interval)
  }, [organizationId])

  const fetchAlerts = async () => {
    try {
      const response = await fetch(`/api/orgs/${organizationId}/alerts`)

      if (response.ok) {
        const data = await response.json()
        setAlerts(data.alerts || [])
      }
    } catch (error) {
      console.error('Error fetching billing alerts:', error)
    } finally {
      setLoading(false)
    }
  }

  const dismissAlert = async (alertId: string) => {
    try {
      await fetch(`/api/orgs/${organizationId}/alerts/${alertId}/dismiss`, {
        method: 'POST',
      })

      setAlerts(alerts.filter((alert) => alert.id !== alertId))
    } catch (error) {
      console.error('Error dismissing alert:', error)
    }
  }

  const getAlertIcon = (type: string, severity: string) => {
    if (severity === 'critical') {
      return <AlertTriangle className="h-4 w-4 text-red-600" />
    } else if (severity === 'warning') {
      return <AlertTriangle className="h-4 w-4 text-yellow-600" />
    } else if (type === 'high_usage') {
      return <TrendingUp className="h-4 w-4 text-blue-600" />
    } else if (type === 'auto_topup_failed') {
      return <CreditCard className="h-4 w-4 text-red-600" />
    }
    return <CheckCircle className="h-4 w-4 text-green-600" />
  }

  const getAlertColor = (severity: string) => {
    switch (severity) {
      case 'critical':
        return 'destructive'
      case 'warning':
        return 'secondary'