# Health Panel

The Health Panel component provides real-time monitoring of Brazilian financial systems status. It displays the health status of SPB, SPI, STA, Nuclea, and SISBAJUD systems in a visually intuitive grid layout.

## Overview

The Health Panel (`src/features/dashboard/components/HealthPanel.vue`) monitors:

| System | Full Name | Description |
|--------|-----------|-------------|
| **SPB** | Sistema de Pagamentos Brasileiro | Brazilian Payments System |
| **SPI** | Sistema de Pagamentos Instantaneos | Instant Payments (PIX) |
| **STA** | Sistema de Transferencia de Arquivos | File Transfer System |
| **Nuclea** | Nuclea | Clearing infrastructure |

## Component Structure

```vue
<template>
  <v-card class="health-card">
    <v-card-title class="d-flex align-center pa-6 pb-4">
      <div class="d-flex align-center">
        <div class="icon-wrapper mr-3">
          <v-icon color="primary" size="24">mdi-heart-pulse</v-icon>
        </div>
        <div>
          <span class="text-h6 font-weight-bold">{{ t('dashboard.health') }}</span>
          <p class="text-caption text-medium-emphasis mb-0">
            Monitoramento em tempo real
          </p>
        </div>
      </div>
      <v-spacer />
      <v-btn icon size="small" variant="tonal" color="primary" @click="dashboardStore.refreshHealth">
        <v-icon>mdi-refresh</v-icon>
      </v-btn>
    </v-card-title>

    <v-card-text class="px-6 pb-6">
      <div class="systems-grid">
        <div
          v-for="system in dashboardStore.healthStatus"
          :key="system.id"
          class="system-card"
          :class="{ 'system-offline': system.status === 'offline' }"
          @click="$router.push(`/settings/${system.id}`)"
        >
          <div class="system-indicator" :class="system.status"></div>
          <div class="system-info">
            <div class="system-name">{{ system.name }}</div>
            <div class="system-status">
              <v-icon
                :color="system.status === 'online' ? 'success' : 'error'"
                size="14"
                class="mr-1"
              >
                {{ system.status === 'online' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
              </v-icon>
              {{ system.status === 'online' ? t('dashboard.online') : t('dashboard.offline') }}
            </div>
          </div>
          <div class="system-time text-caption text-medium-emphasis">
            {{ formatTime(system.lastCheck) }}
          </div>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>
```

## Props

The component does not accept props. It retrieves data directly from the Dashboard store.

## Data Interface

```typescript
interface HealthStatus {
  id: string       // System identifier (e.g., 'spb', 'spi')
  name: string     // Display name (e.g., 'SPB', 'SPI')
  status: 'online' | 'offline'  // Current status
  lastCheck: string // ISO timestamp of last health check
}
```

## Usage

```vue
<script setup lang="ts">
import HealthPanel from '@/features/dashboard/components/HealthPanel.vue'
</script>

<template>
  <v-row>
    <v-col cols="12">
      <HealthPanel />
    </v-col>
  </v-row>
</template>
```

## Features

### Status Indicators

Each system card displays a colored indicator bar at the top:

- **Online (Green)**: System is operational
- **Offline (Red)**: System is down or unreachable

```css
.system-indicator.online {
  background: linear-gradient(90deg, #4caf50 0%, #81c784 100%);
}

.system-indicator.offline {
  background: linear-gradient(90deg, #f44336 0%, #e57373 100%);
}
```

### Offline Animation

Offline systems have a pulsing animation to draw attention:

```css
.system-card.system-offline {
  background: linear-gradient(135deg, #fff8f8 0%, #ffefef 100%);
  border-color: #ffcdd2;
  animation: pulseOffline 2s infinite;
}

@keyframes pulseOffline {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.2);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(244, 67, 54, 0);
  }
}
```

### Hover Effects

Cards respond to hover with elevation:

```css
.system-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
```

### Click Navigation

Clicking a system card navigates to its settings page:

```vue
@click="$router.push(`/settings/${system.id}`)"
```

### Time Formatting

The last check time is formatted for Brazilian locale:

```typescript
function formatTime(isoString: string): string {
  return new Date(isoString).toLocaleTimeString('pt-BR', {
    hour: '2-digit',
    minute: '2-digit'
  })
}
```

## Responsive Grid

The systems grid adapts to screen size:

```css
.systems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 960px) {
  .systems-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .systems-grid {
    grid-template-columns: 1fr;
  }
}
```

## Refresh Functionality

The refresh button triggers a health check update:

```vue
<v-btn icon @click="dashboardStore.refreshHealth">
  <v-icon>mdi-refresh</v-icon>
</v-btn>
```

```typescript
// In dashboard store
function refreshHealth() {
  healthStatus.value = healthStatus.value.map(h => ({
    ...h,
    lastCheck: new Date().toISOString()
  }))
}
```

## Mock Data

The component uses mock data for demonstration:

```typescript
// src/mocks/health.ts
export const mockHealthStatus: HealthStatus[] = [
  { id: 'spb', name: 'SPB', status: 'online', lastCheck: new Date().toISOString() },
  { id: 'spi', name: 'SPI', status: 'online', lastCheck: new Date().toISOString() },
  { id: 'sta', name: 'STA', status: 'offline', lastCheck: new Date(Date.now() - 900000).toISOString() },
  { id: 'nuclea', name: 'NUCLEA', status: 'online', lastCheck: new Date().toISOString() }
]
```

## Customization

### Adding New Systems

1. Update the mock data:

```typescript
// src/mocks/health.ts
export const mockHealthStatus: HealthStatus[] = [
  // ... existing systems
  { id: 'sisbajud', name: 'SISBAJUD', status: 'online', lastCheck: new Date().toISOString() }
]
```

2. Add the corresponding settings route:

```typescript
// src/router/index.ts
{
  path: '/settings/:section',
  name: 'settings',
  component: () => import('@/features/settings/views/SettingsView.vue')
}
```

### Connecting to Real API

Replace mock data with API calls:

```typescript
// src/stores/dashboard.ts
async function fetchHealthStatus() {
  try {
    const response = await fetch('/api/health')
    healthStatus.value = await response.json()
  } catch (error) {
    console.error('Failed to fetch health status:', error)
  }
}
```

### Custom Styling

Override the default colors:

```css
/* In your component or global styles */
.system-card {
  background: linear-gradient(135deg, #your-color-1 0%, #your-color-2 100%);
}
```

## Accessibility

- **Keyboard Navigation**: Cards are clickable and focusable
- **Screen Readers**: Status icons have semantic colors
- **Color Contrast**: Uses WCAG-compliant color combinations

## Related Documentation

- [Dashboard](/guide/dashboard) - Main dashboard view
- [SISBAJUD Orders](/components/sisbajud-orders) - Judicial orders panel
- [Pinia Stores](/api/stores) - Dashboard store details