edgeguard-native/management-ui/src/components/MaintenanceBanner.tsx

import { Alert } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'

import apiClient, { isEnvelope } from '../api/client'

interface MaintenanceState {
  enabled: boolean
  message: string
}

// MaintenanceBanner: globaler Hinweis im AppLayout dass Whole-Box-
// Maintenance-Mode aktiv ist. Polled /system/maintenance alle 60s.
// Pflicht-sichtbar damit der Admin nie vergisst dass er ALLE Customer-
// Domains gerade auf 503 hat.
export default function MaintenanceBanner() {
  const { t } = useTranslation()
  const { data } = useQuery({
    queryKey: ['system', 'maintenance'],
    queryFn: async () => {
      const r = await apiClient.get('/system/maintenance')
      return isEnvelope(r.data)
        ? (r.data.data as MaintenanceState)
        : { enabled: false, message: '' }
    },
    refetchInterval: 60_000,
    refetchOnWindowFocus: true,
  })
  if (!data?.enabled) return null
  return (
    <Alert
      type="error"
      banner
      showIcon
      icon={<ExclamationCircleOutlined />}
      message={t('settings.maintenanceActiveTitle')}
      description={data.message || t('settings.maintenanceActiveDesc')}
    />
  )
}