# Dashboard

The Dashboard is the main view of Monetarie NPC Backoffice, providing real-time monitoring of financial systems and judicial orders. This guide covers the dashboard architecture, components, and customization options.

## Overview

The dashboard consists of:

1. **Health Panel** - Real-time system status monitoring
2. **SISBAJUD Orders Panel** - Judicial order management table
3. **Layout Integration** - Responsive grid layout with sidebars

```
┌─────────────────────────────────────────────────────────────┐
│                         TopBar                               │
├────────────┬────────────────────────────────┬───────────────┤
│            │                                │               │
│   Left     │         Dashboard              │    Right      │
│  Sidebar   │   ┌──────────────────────┐    │    Panel      │
│            │   │    Health Panel       │    │               │
│  - Accounts│   │  SPB  SPI  STA Nuclea │    │  - RSS Feed   │
│  - Settings│   └──────────────────────┘    │  - Notifica-  │
│            │   ┌──────────────────────┐    │    tions      │
│            │   │  SISBAJUD Orders     │    │               │
│            │   │  [Data Table]        │    │               │
│            │   └──────────────────────┘    │               │
└────────────┴────────────────────────────────┴───────────────┘
```

## Dashboard View

The main dashboard view (`src/features/dashboard/views/DashboardView.vue`) orchestrates the layout:

```vue
<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1 class="text-h4">{{ t('dashboard.title') }}</h1>
      <p class="text-body-1 text-medium-emphasis mt-1">
        Bem-vindo de volta, {{ authStore.user?.name?.split(' ')[0] }}
      </p>
    </div>

    <v-row class="mt-6">
      <v-col cols="12">
        <HealthPanel />
      </v-col>
    </v-row>

    <v-row class="mt-4">
      <v-col cols="12">
        <SisbajudOrdersPanel />
      </v-col>
    </v-row>
  </div>
</template>
```

### Personalized Greeting

The dashboard displays a personalized welcome message:

```typescript
const authStore = useAuthStore()
// Shows: "Bem-vindo de volta, Administrador"
```

### Animated Entry

The dashboard uses a fade-in animation:

```css
.dashboard {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

## Dashboard Store

The `useDashboardStore` manages dashboard data:

```typescript
// src/stores/dashboard.ts
export const useDashboardStore = defineStore('dashboard', () => {
  const healthStatus = ref<HealthStatus[]>([...mockHealthStatus])
  const sisbajudOrders = ref<SisbajudOrder[]>([...mockSisbajudOrders])
  const rssFeed = ref<RssFeedItem[]>([...mockRssFeed])

  function refreshHealth() {
    healthStatus.value = healthStatus.value.map(h => ({
      ...h,
      lastCheck: new Date().toISOString()
    }))
  }

  return {
    healthStatus,
    sisbajudOrders,
    rssFeed,
    refreshHealth
  }
})
```

### Data Types

```typescript
interface HealthStatus {
  id: string
  name: string
  status: 'online' | 'offline'
  lastCheck: string
}

interface SisbajudOrder {
  id: string
  type: 'Bloqueio' | 'Desbloqueio' | 'Transferencia'
  account: string
  value: number
  status: 'Pendente' | 'Executado' | 'Rejeitado'
  date: string
}

interface RssFeedItem {
  id: number
  title: string
  source: string
  date: string
  url: string
}
```

## Component Integration

### Using Dashboard Store in Components

```vue
<script setup lang="ts">
import { useDashboardStore } from '@/stores/dashboard'

const dashboardStore = useDashboardStore()

// Access reactive state
const systems = computed(() => dashboardStore.healthStatus)
const orders = computed(() => dashboardStore.sisbajudOrders)
</script>
```

### Refreshing Data

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

## Layout Responsiveness

The dashboard uses Vuetify's grid system for responsive layouts:

```vue
<v-row class="mt-6">
  <v-col cols="12" md="6" lg="4">
    <!-- Card content -->
  </v-col>
</v-row>
```

### Breakpoints

| Breakpoint | Width | Columns |
|------------|-------|---------|
| xs | < 600px | 12 |
| sm | >= 600px | 12 |
| md | >= 960px | 6 |
| lg | >= 1280px | 4 |
| xl | >= 1920px | 4 |

## Internationalization

Dashboard texts are fully internationalized:

```typescript
// pt-BR.ts
dashboard: {
  title: 'Painel',
  health: 'Saude do Sistema',
  online: 'Online',
  offline: 'Offline',
  lastCheck: 'Ultima verificacao',
  sisbajudOrders: 'Ordens SISBAJUD',
  // ...
}
```

Usage in components:

```vue
<template>
  <h1>{{ t('dashboard.title') }}</h1>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
```

## Customization

### Adding New Dashboard Widgets

1. Create the component in `src/features/dashboard/components/`:

```vue
<!-- src/features/dashboard/components/NewWidget.vue -->
<template>
  <v-card class="widget-card">
    <v-card-title>New Widget</v-card-title>
    <v-card-text>
      <!-- Widget content -->
    </v-card-text>
  </v-card>
</template>
```

2. Import and use in `DashboardView.vue`:

```vue
<script setup lang="ts">
import NewWidget from '../components/NewWidget.vue'
</script>

<template>
  <v-row>
    <v-col cols="12" md="6">
      <NewWidget />
    </v-col>
  </v-row>
</template>
```

### Extending the Dashboard Store

```typescript
// Add new state
const customData = ref<CustomType[]>([])

// Add new actions
function fetchCustomData() {
  // API call or data processing
}

return {
  // ... existing
  customData,
  fetchCustomData
}
```

## Performance Considerations

### Lazy Loading

The dashboard view is lazy-loaded:

```typescript
// router/index.ts
{
  path: '/',
  component: () => import('@/features/dashboard/views/DashboardView.vue')
}
```

### Computed Properties

Use computed properties for derived data:

```typescript
const onlineSystems = computed(() =>
  dashboardStore.healthStatus.filter(s => s.status === 'online')
)

const pendingOrders = computed(() =>
  dashboardStore.sisbajudOrders.filter(o => o.status === 'Pendente')
)
```

## Related Documentation

- [Health Panel](/components/health-panel) - System monitoring component
- [SISBAJUD Orders](/components/sisbajud-orders) - Order management component
- [Sidebars](/guide/sidebars) - Navigation and information panels
- [Pinia Stores](/api/stores) - State management details