# Componentes Reutilizáveis - Ativos TI

Componentes criados para reutilização entre Demandas, Ativos TI e Chamados TI.

## Autocomplete

### user-ativos-ti
Busca de usuários com autocomplete.

```blade
<x-autocomplete.user-ativos-ti
    name="user_id"
    inputId="eq-user-display"
    hiddenId="eq-user-id"
    suggestId="eq-user-sugest"
    clearId="eq-user-clear"
    :value="old('_user_display', '')"
    label="Usuário Responsável" />
```

### equipamento-ativos-ti
Busca de equipamentos com autocomplete.

```blade
<x-autocomplete.equipamento-ativos-ti
    name="equipamento_id"
    inputId="lic-eq-display"
    hiddenId="lic-eq-id"
    suggestId="lic-eq-sugest"
    clearId="lic-eq-clear"
    :value="old('_eq_display', '')"
    label="PC / Equipamento" />
```

## Badges

### status-ativos-ti
Badge de status com cores automáticas.

```blade
<x-badge.status-ativos-ti
    status="ativo"
    label="Ativo" />
```

Status suportados: `ativo`, `inativo`, `manutencao`, `alugada`, `vitalicia`, `vencida`

## Detail Cards

### card-ativos-ti
Card individual com ícone, label e valor.

```blade
<x-detail.card-ativos-ti
    icon="fa-barcode"
    label="Patrimônio"
    value="{{ $equipamento->patrimonio }}" />
```

## Grids

### details-ativos-ti
Grid de detalhes com responsividade (6 cols móvel, 4 tablet, 3 desktop).

```blade
<x-grid.details-ativos-ti :campos="[
    ['icon' => 'fa-barcode', 'label' => 'Patrimônio', 'value' => $equipamento->patrimonio],
    ['icon' => 'fa-tag', 'label' => 'Etiqueta TI', 'value' => $equipamento->etiqueta_ti],
]" />
```

## Panels

### identity-ativos-ti
Painel de identidade superior com resumo.

```blade
<x-panel.identity-ativos-ti
    icon="fa-desktop"
    title="{{ $equipamento->patrimonio }}"
    status-color="{{ $equipamento->status_color }}"
    status-label="{{ $equipamento->status_label }}"
    subtitle="Dell Inspiron 15"
    :right-info="[
        ['icon' => 'fa-building', 'label' => $unidade->abbreviation],
        ['icon' => 'fa-user', 'label' => $responsavel->name],
    ]" />
```

## Form Sections

### section-ativos-ti
Seção de formulário com ícone.

```blade
<x-form.section-ativos-ti
    icon="fa-info-circle"
    title="Dados Básicos"
    color="primary" />
```

## Script

Não esqueça de incluir o script de autocomplete em create/edit:

```blade
@push('after-scripts')
    <script src="{{ asset('pmar/js/ativos-ti.js') }}"></script>
@endpush
```

## Benefícios

✅ Menos duplicação de código
✅ Consistência visual
✅ Manutenção centralizada
✅ Fácil de estender