> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anivahealth.com/llms.txt
> Use this file to discover all available pages before exploring further.

# System Status

> Real-time status of Aniva services and APIs

/*Active Incidents*/
/*Services List with 90-Day Uptime Bars*/
// Calculate exact availability
/*Title Line: Name + Icon on Left, Uptime on Right*/
/*90-Day Uptime Bars*/
// Soften grey color for non-monitored to look exactly like the screenshot
/*Time labels below the bar*/
/*Sleek, Subtle Status Footer*/
export const StatusDashboard = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  useEffect(() => {
    fetch('https://status.anivahealth.com/index.json').then(res => {
      if (!res.ok) throw new Error('Failed to fetch status JSON');
      return res.json();
    }).then(json => {
      setData(json);
      setLoading(false);
    }).catch(err => {
      console.error('Error fetching status JSON:', err);
      setError(true);
      setLoading(false);
    });
  }, []);
  const formatDate = dateStr => {
    if (!dateStr) return '';
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const parts = dateStr.split('-');
    if (parts.length !== 3) return dateStr;
    const [year, month, day] = parts;
    const monthName = months[parseInt(month, 10) - 1] || month;
    return `${monthName} ${parseInt(day, 10)}, ${year}`;
  };
  const getStatusLabel = status => {
    switch (status) {
      case 'operational':
        return 'Operational';
      case 'not_monitored':
        return 'Not monitored';
      case 'downtime':
        return 'Downtime';
      case 'degraded':
        return 'Degraded Performance';
      case 'maintenance':
        return 'Maintenance';
      default:
        return status;
    }
  };
  if (loading) {
    return <div style={{
      padding: '3rem 2rem',
      textAlign: 'center',
      background: 'rgba(255,255,255,0.02)',
      borderRadius: '12px',
      border: '1px solid rgba(255,255,255,0.08)',
      margin: '20px 0'
    }}>
<div style={{
      display: 'inline-block',
      width: '24px',
      height: '24px',
      border: '3px solid rgba(231, 108, 43, 0.2)',
      borderTopColor: '#e76c2b',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite',
      marginBottom: '12px'
    }}></div>
<p style={{
      color: '#a1a1aa',
      margin: 0,
      fontSize: '0.925rem'
    }}>Loading real-time status details...</p>
<style>{`           @keyframes spin {
            to { transform: rotate(360deg); }
          }
        `}</style>
</div>;
  }
  if (error || !data) {
    return <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '16px'
    }}>
<iframe src="https://status.anivahealth.com" style={{
      width: '100%',
      height: '800px',
      border: 'none',
      borderRadius: '8px'
    }}></iframe>
<Note>
If the status page does not load, you can access it directly at [status.anivahealth.com](https://status.anivahealth.com).
</Note>
</div>;
  }
  const attributes = data.data?.attributes;
  const overallState = attributes?.aggregate_state || 'operational';
  const resources = data.included?.filter(item => item.type === 'status_page_resource') || [];
  const activeReports = data.included?.filter(item => item.type === 'status_report' && !item.attributes?.ends_at) || [];
  const stateConfig = {
    operational: {
      label: 'All systems are fully operational',
      color: '#10b981',
      bg: 'rgba(16, 185, 129, 0.08)',
      border: '#10b981',
      icon: <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" style={{
        color: '#10b981'
      }}>
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
    },
    degraded: {
      label: 'Systems are experiencing degraded performance',
      color: '#f59e0b',
      bg: 'rgba(245, 158, 11, 0.08)',
      border: '#f59e0b',
      icon: <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" style={{
        color: '#f59e0b'
      }}>
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
    },
    downtime: {
      label: 'Systems are experiencing active service interruptions',
      color: '#ef4444',
      bg: 'rgba(239, 68, 68, 0.08)',
      border: '#ef4444',
      icon: <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" style={{
        color: '#ef4444'
      }}>
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
    },
    maintenance: {
      label: 'Systems are undergoing scheduled maintenance',
      color: '#3b82f6',
      bg: 'rgba(59, 130, 246, 0.08)',
      border: '#3b82f6',
      icon: <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" style={{
        color: '#3b82f6'
      }}>
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a1 1 0 11-2 0 1 1 0 012 0zm-1 9a1 1 0 01-1-1v-4a1 1 0 112 0v4a1 1 0 01-1 1z" clipRule="evenodd" />
</svg>
    },
    not_monitored: {
      label: 'Systems are currently unmonitored',
      color: '#71717a',
      bg: 'rgba(113, 113, 122, 0.08)',
      border: '#71717a',
      icon: <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" style={{
        color: '#71717a'
      }}>
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
</svg>
    }
  };
  const currentConfig = stateConfig[overallState] || stateConfig.operational;
  return <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '24px',
    width: '100%',
    marginTop: '0'
  }}>
{}
{activeReports.length > 0 && <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '12px',
    padding: '20px',
    backgroundColor: 'rgba(239, 68, 68, 0.04)',
    border: '1px solid rgba(239, 68, 68, 0.15)',
    borderRadius: '8px',
    marginBottom: '10px'
  }}>
<h4 style={{
    margin: 0,
    color: '#ef4444',
    fontSize: '0.95rem',
    fontWeight: '600'
  }}>Active Incidents</h4>
{activeReports.map(report => <div key={report.id} style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '4px'
  }}>
<span style={{
    fontWeight: '600',
    color: '#ffffff',
    fontSize: '0.9rem'
  }}>{report.attributes?.title}</span>
{report.attributes?.announcement && <span style={{
    fontSize: '0.85rem',
    color: '#a1a1aa',
    lineHeight: '1.4'
  }}>{report.attributes.announcement}</span>}
</div>)}
</div>}

      {}
      <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '20px'
  }}>
        {resources.map(res => {
    const resStatus = res.attributes?.status || 'operational';
    const resConfig = stateConfig[resStatus] || stateConfig.operational;
    const history = res.attributes?.status_history || [];
    const availability = res.attributes?.availability;
    const availabilityPct = availability !== undefined ? (availability * 100).toFixed(availability === 1.0 ? 0 : 2) + '% uptime' : '100% uptime';
    return <div key={res.id} style={{
      display: 'flex',
      flexDirection: 'column',
      padding: '22px 24px',
      backgroundColor: 'rgba(255,255,255,0.015)',
      border: '1px solid rgba(255,255,255,0.06)',
      borderRadius: '10px',
      gap: '14px'
    }}>
              {}
              <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      width: '100%'
    }}>
                <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: '10px'
    }}>
                  {resConfig.icon}
                  <span style={{
      fontWeight: '600',
      color: '#ffffff',
      fontSize: '0.975rem',
      letterSpacing: '-0.01em'
    }}>
                    {res.attributes?.public_name}
                  </span>
                </div>
                <span style={{
      fontSize: '0.875rem',
      color: '#10b981',
      fontWeight: '600'
    }}>
                  {availabilityPct}
                </span>
              </div>

              {}
              <div>
                <div style={{
      display: 'flex',
      alignItems: 'stretch',
      justifyContent: 'space-between',
      width: '100%',
      height: '28px',
      gap: '2.5px'
    }}>
                  {history.map((dayData, idx) => {
      const dayStatus = dayData.status || 'not_monitored';
      const dayColor = stateConfig[dayStatus]?.color || '#2d2d30';
      const finalColor = dayStatus === 'not_monitored' ? 'rgba(255, 255, 255, 0.12)' : dayColor;
      const tooltipText = `${formatDate(dayData.day)}: ${getStatusLabel(dayStatus)}${dayData.downtime_duration > 0 ? ` (Downtime: ${Math.round(dayData.downtime_duration / 60)}m)` : ''}`;
      return <div key={idx} title={tooltipText} style={{
        flex: '1',
        backgroundColor: finalColor,
        borderRadius: '1.5px',
        cursor: 'pointer',
        transition: 'all 0.15s ease'
      }} onMouseOver={e => {
        e.target.style.transform = 'scaleY(1.15)';
        if (dayStatus !== 'not_monitored') {
          e.target.style.boxShadow = `0 0 6px ${dayColor}`;
        }
      }} onMouseOut={e => {
        e.target.style.transform = 'scaleY(1)';
        e.target.style.boxShadow = 'none';
      }} />;
    })}
                </div>

                {}
                <div style={{
      display: 'flex',
      justifyContent: 'space-between',
      width: '100%',
      marginTop: '8px',
      color: '#71717a',
      fontSize: '0.725rem',
      fontWeight: '500'
    }}>
                  <span>90 days ago</span>
                  <span>Today</span>
                </div>
              </div>
            </div>;
  })}
      </div>

      {}
      <div style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: '20px',
    marginTop: '20px',
    borderTop: '1px solid rgba(255, 255, 255, 0.06)',
    flexWrap: 'wrap',
    gap: '12px'
  }}>
        <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  }}>
          <span style={{
    width: '8px',
    height: '8px',
    borderRadius: '50%',
    backgroundColor: currentConfig.color,
    boxShadow: `0 0 8px ${currentConfig.color}`,
    display: 'inline-block'
  }}></span>
          <span style={{
    fontSize: '0.875rem',
    color: '#a1a1aa',
    fontWeight: '500'
  }}>
            {currentConfig.label}
          </span>
        </div>
        <a href="https://status.anivahealth.com" target="_blank" rel="noopener noreferrer" style={{
    fontSize: '0.875rem',
    color: '#ffffff',
    fontWeight: '500'
  }}>
          View live dashboard →
        </a>
      </div>
    </div>;
};


## Current status by service

<StatusDashboard />