# SISBAJUD Orders Panel

The SISBAJUD Orders Panel component displays and manages judicial orders from the Sistema de Busca de Ativos do Poder Judiciario (Judicial Asset Search System). It provides a comprehensive data table with filtering, sorting, and pagination capabilities.

## Overview

SISBAJUD is the Brazilian judicial system for asset searches and blocks. The panel handles three types of orders:

| Type | Portuguese | Description |
|------|------------|-------------|
| **Block** | Bloqueio | Freeze account funds |
| **Unblock** | Desbloqueio | Release previously blocked funds |
| **Transfer** | Transferencia | Transfer funds to judicial deposit |

## Component Structure

```vue
<template>
  <v-card class="orders-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="deep-purple" size="24">mdi-gavel</v-icon>
        </div>
        <div>
          <span class="text-h6 font-weight-bold">{{ t('dashboard.sisbajudOrders') }}</span>
          <p class="text-caption text-medium-emphasis mb-0">Ordens judiciais recentes</p>
        </div>
      </div>
      <v-spacer />
      <v-chip size="small" color="primary" variant="tonal">
        {{ dashboardStore.sisbajudOrders.length }} ordens
      </v-chip>
    </v-card-title>

    <v-card-text class="pa-0">
      <v-data-table
        :headers="headers"
        :items="dashboardStore.sisbajudOrders"
        :items-per-page="5"
        class="modern-table"
        hover
      >
        <!-- Custom column slots -->
      </v-data-table>
    </v-card-text>
  </v-card>
</template>
```

## Data Interface

```typescript
interface SisbajudOrder {
  id: string                                    // Order ID (e.g., '2024-001')
  type: 'Bloqueio' | 'Desbloqueio' | 'Transferencia'  // Order type
  account: string                               // Masked account (e.g., '****1234')
  value: number                                 // Amount in BRL
  status: 'Pendente' | 'Executado' | 'Rejeitado'  // Execution status
  date: string                                  // Order date (ISO format)
}
```

## Table Configuration

### Column Headers

```typescript
const headers = computed(() => [
  { title: t('dashboard.orderId'), key: 'id', sortable: true },
  { title: t('dashboard.orderType'), key: 'type', sortable: true },
  { title: t('dashboard.orderAccount'), key: 'account', sortable: false },
  { title: t('dashboard.orderValue'), key: 'value', sortable: true, align: 'end' },
  { title: t('dashboard.orderStatus'), key: 'status', sortable: true },
  { title: t('dashboard.orderDate'), key: 'date', sortable: true }
])
```

### Custom Column Templates

#### Order ID

```vue
<template #item.id="{ item }">
  <span class="font-weight-medium text-primary">{{ item.id }}</span>
</template>
```

#### Order Type with Icons

```vue
<template #item.type="{ item }">
  <div class="d-flex align-center">
    <v-icon :color="getTypeColor(item.type)" size="18" class="mr-2">
      {{ getTypeIcon(item.type) }}
    </v-icon>
    <span>{{ item.type }}</span>
  </div>
</template>
```

```typescript
function getTypeColor(type: string): string {
  switch (type) {
    case 'Bloqueio': return 'error'
    case 'Desbloqueio': return 'success'
    case 'Transferencia': return 'info'
    default: return 'grey'
  }
}

function getTypeIcon(type: string): string {
  switch (type) {
    case 'Bloqueio': return 'mdi-lock'
    case 'Desbloqueio': return 'mdi-lock-open'
    case 'Transferencia': return 'mdi-bank-transfer'
    default: return 'mdi-file-document'
  }
}
```

#### Account Display

```vue
<template #item.account="{ item }">
  <code class="account-code">{{ item.account }}</code>
</template>
```

#### Currency Formatting

```vue
<template #item.value="{ item }">
  <span class="font-weight-bold">{{ formatCurrency(item.value) }}</span>
</template>
```

```typescript
function formatCurrency(value: number): string {
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
  }).format(value)
}
```

#### Status Chips

```vue
<template #item.status="{ item }">
  <v-chip
    :color="getStatusColor(item.status)"
    size="small"
    variant="flat"
    class="status-chip"
  >
    <v-icon start size="12">{{ getStatusIcon(item.status) }}</v-icon>
    {{ getStatusText(item.status) }}
  </v-chip>
</template>
```

```typescript
function getStatusColor(status: string): string {
  switch (status) {
    case 'Pendente': return 'warning'
    case 'Executado': return 'success'
    case 'Rejeitado': return 'error'
    default: return 'grey'
  }
}

function getStatusIcon(status: string): string {
  switch (status) {
    case 'Pendente': return 'mdi-clock-outline'
    case 'Executado': return 'mdi-check'
    case 'Rejeitado': return 'mdi-close'
    default: return 'mdi-help'
  }
}

function getStatusText(status: string): string {
  switch (status) {
    case 'Pendente': return t('dashboard.pending')
    case 'Executado': return t('dashboard.executed')
    case 'Rejeitado': return t('dashboard.rejected')
    default: return status
  }
}
```

#### Date Formatting

```vue
<template #item.date="{ item }">
  <span class="text-medium-emphasis">{{ formatDate(item.date) }}</span>
</template>
```

```typescript
function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('pt-BR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}
```

## Pagination

Custom pagination footer:

```vue
<template #bottom>
  <div class="table-footer">
    <v-pagination
      v-model="page"
      :length="Math.ceil(dashboardStore.sisbajudOrders.length / 5)"
      :total-visible="5"
      density="comfortable"
      rounded="circle"
    />
  </div>
</template>
```

## Styling

### Table Styles

```css
.modern-table {
  border-radius: 0 0 16px 16px;
}

.modern-table :deep(thead) {
  background: #f8fafc;
}

.modern-table :deep(th) {
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

.modern-table :deep(td) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.modern-table :deep(tr:hover td) {
  background: #f8fafc !important;
}
```

### Account Code Styling

```css
.account-code {
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.85rem;
  color: #475569;
}
```

### Status Chip Styling

```css
.status-chip {
  font-weight: 600;
  font-size: 0.75rem;
}
```

## Usage

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

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

## Mock Data

```typescript
// src/mocks/sisbajud.ts
export const mockSisbajudOrders: SisbajudOrder[] = [
  {
    id: '2024-001',
    type: 'Bloqueio',
    account: '****1234',
    value: 15000.00,
    status: 'Pendente',
    date: '2024-02-03'
  },
  {
    id: '2024-002',
    type: 'Desbloqueio',
    account: '****5678',
    value: 8500.00,
    status: 'Executado',
    date: '2024-02-02'
  },
  // ... more orders
]
```

## Customization

### Adding Row Actions

```vue
<template #item.actions="{ item }">
  <v-btn icon size="small" variant="text" @click="viewOrder(item)">
    <v-icon>mdi-eye</v-icon>
  </v-btn>
  <v-btn icon size="small" variant="text" @click="processOrder(item)">
    <v-icon>mdi-play</v-icon>
  </v-btn>
</template>
```

### Adding Filters

```vue
<template>
  <v-card>
    <v-card-title>
      <!-- ... -->
      <v-select
        v-model="statusFilter"
        :items="['Todos', 'Pendente', 'Executado', 'Rejeitado']"
        density="compact"
        hide-details
        class="ml-4"
        style="max-width: 150px"
      />
    </v-card-title>
    <!-- ... -->
  </v-card>
</template>

<script setup>
const statusFilter = ref('Todos')

const filteredOrders = computed(() => {
  if (statusFilter.value === 'Todos') {
    return dashboardStore.sisbajudOrders
  }
  return dashboardStore.sisbajudOrders.filter(o => o.status === statusFilter.value)
})
</script>
```

### Connecting to Real API

```typescript
// src/stores/dashboard.ts
async function fetchSisbajudOrders() {
  try {
    const response = await fetch('/api/sisbajud/orders')
    sisbajudOrders.value = await response.json()
  } catch (error) {
    console.error('Failed to fetch orders:', error)
  }
}

async function updateOrderStatus(orderId: string, newStatus: string) {
  try {
    await fetch(`/api/sisbajud/orders/${orderId}`, {
      method: 'PATCH',
      body: JSON.stringify({ status: newStatus })
    })
    await fetchSisbajudOrders()
  } catch (error) {
    console.error('Failed to update order:', error)
  }
}
```

## Internationalization

All text is internationalized:

```typescript
// pt-BR.ts
dashboard: {
  sisbajudOrders: 'Ordens SISBAJUD',
  orderId: 'ID da Ordem',
  orderType: 'Tipo',
  orderAccount: 'Conta',
  orderValue: 'Valor',
  orderStatus: 'Status',
  orderDate: 'Data',
  pending: 'Pendente',
  executed: 'Executada',
  rejected: 'Rejeitada'
}
```

## Related Documentation

- [Health Panel](/components/health-panel) - System status monitoring
- [Dashboard](/guide/dashboard) - Main dashboard layout
- [Pinia Stores](/api/stores) - Dashboard store details