# Suporte — Views e UX

> Duas famílias de telas: a **página de contato do fornecedor** (ativa) e
> o **sistema de tickets** (órfão).

---

## 1. Layouts

| View | Caminho | Papel |
|---|---|---|
| Layout do CMS | `v6/resources/views/admin/layouts/app.blade.php` | Container AdminLTE |
| Menu do AdminLTE | `v6/resources/views/vendor/adminlte/page.blade.php:302-309` | Item "Suporte" |
| Layout do portal (default) | `v6/resources/views/portal/layouts/default/app.blade.php` | Usado pelas views órfãs `support.blade.php` e `tutorial.blade.php` |

---

## 2. Tela ativa: página de contato do fornecedor

`v6/resources/views/admin/layouts/about.blade.php`.

```blade
@extends('admin.layouts.app')
@inject('dadosFornecedor', 'App\Http\Model\Prefecture\Supplier')

@php
    $fornecedor = $dadosFornecedor->where('fornecedor_ativo', true)->first();
@endphp

@section('content')
    @if ($fornecedor)
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="box box-widget widget-user-2">
                    <div class="widget-user-header bg-navy d-flex">
                        <div>
                            <img src="{{ url('storage/' . $fornecedor->image) }}" alt="{{ $fornecedor->name ?? '' }}">
                        </div>
                        ...
                        <h3 class="widget-user-username ml-4"><b>{{ $fornecedor->name ?? '' }}</b></h3>
                    </div>
                    <div class="box-footer no-padding">
                        <ul class="nav nav-stacked">
                            <li><a href="{{ $fornecedor->site }}">Suporte <span ...>{{ $fornecedor->site }}</span></a></li>
                            <li><a href="{{ 'mailto:' . $fornecedor->email }}">E-mail ...</a></li>
                            <li><a href="tel:+{{ $fornecedor->phone }}">Telefone ...</a></li>
                            <li><a href="tel:+{{ $fornecedor->whatsapp }}">Whatsapp ...</a></li>
                            <li><a href="#fornecedor_mapa">Endereço ...</a></li>
                            <li class="p-3">
                                <iframe width="100%" height="320" ... src="{{ $fornecedor->locale ?? '' }}" id="fornecedor_mapa" allowfullscreen></iframe>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
```

Características:

- **Não há mensagem de estado vazio**: sem fornecedor ativo, o
  `@if ($fornecedor)` não renderiza nada e a página fica em branco.
- O logotipo vem de `storage/{image}` (o `image` do fornecedor).
- O mapa é um `<iframe>` de 320px com o `locale` (embed do Google Maps).
- Telefone e WhatsApp usam `tel:+{valor}`; as classes CSS `phonefix` e
  `phone` formatam o número na exibição.

---

## 3. Telas órfãs: sistema de tickets

### 3.1 Lista de tickets

`v6/resources/views/prefecture/support/index.blade.php`

- Cabeçalho "Lista de Tickets".
- Botão "Cadastrar Novo Ticket" -> `route('suporte.create')` (**rota
  inexistente**), visível apenas com `has_access(['support.create'])`
  (slug `support` — note a diferença de grafia: `support` no blade x
  `suporte` nas rotas).
- Tabela **server-side** (sem DataTables): Protocolo / Usuário / Categoria
  / Assunto / Ações.
- Cada linha: `$content->protocolo`, `$content->users->name`,
  `$content->category->name`, `$content->assunto` e um link
  `route('suporte.show', $content->id)` (**rota inexistente**).
- **N+1**: `users` e `category` são carregados lazy por linha.

### 3.2 Formulário de ticket

`v6/resources/views/prefecture/support/create.blade.php` + `form.blade.php`

- `Form::open(['url' => route('email'), 'id' => 'form'])` — **`route('email')`
  não existe**.
- Campos: categoria (`Form::select('supports_categories_id', ...)`),
  assunto (`Form::text`), descrição (`Form::textarea`).
- Botão "Enviar" com `onclick="desabilitaBotao()"` que desabilita o botão
  e submits o form.

### 3.3 Detalhe do ticket

`v6/resources/views/prefecture/support/show.blade.php`

- Painel com Protocolo, Usuário, Categoria, Assunto e Descrição.
- "Voltar" -> `route('suporte.index')` (**rota inexistente**).

### 3.4 Views de portal (`support.blade.php`, `tutorial.blade.php`)

Ambas estendem `portal.layouts.default.app` e usam
`Breadcrumbs::render('static-ouvidoria', $content)`:

- `support.blade.php` — página de "Contato" com o texto da página
  estática e o partial `portal.layouts.default.pages.statics.ouvidoria.form-contact`.
- `tutorial.blade.php` — "Manual de Navegação" com o texto da página
  estática e um `<iframe>` de vídeo (`$content->linksUnique->link`).

> Ambas são **páginas estáticas do portal** (tabela de conteúdos), não o
> sistema de tickets. Estão no diretório `prefecture/support/` por
> coincidência de nomenclatura e **não têm relação** com o módulo.

---

## 4. JavaScript / Ajax

**Nenhum** JavaScript específico do módulo.

O único JS inline é o `desabilitaBotao()` do formulário de ticket
(órfão).

---

## 5. Exportações

**Nenhuma.**

---

## 6. E-mails (implementação órfã)

| View | Caminho | Destinatário |
|---|---|---|
| `email_admin.blade.php` | `v6/resources/views/prefecture/emails/support/email_admin.blade.php` | suporte (configuração `email_suporte`) |
| `email_user.blade.php` | `v6/resources/views/prefecture/emails/support/email_user.blade.php` | o usuário que abriu o ticket |
| `email_header.blade.php` / `email_footer.blade.php` | `v6/resources/views/prefecture/emails/support/` | parcial compartilhado |

Variáveis passadas ao Blade: `prefecture` (nome da prefeitura),
`email` (e-mail do usuário) e `data` (o request + `categoria`, `name` e
`protocolo`).

---

## 7. O que o operador vê

1. Engrenagem do CMS -> **Suporte**.
2. Um cartão com o logotipo, o nome e os contatos do fornecedor ativo,
   mais o mapa.
3. Se não houver fornecedor ativo: **uma página em branco**.

## 8. O que o cidadão vê

**Nada** relativo a este módulo. O portal tem a página institucional
"Apoio ao Usuário" (`/apoio-ao-usuario`), que é conteúdo estático.

---

## 9. Itens de UX a preservar na v7

- O cartão com site, e-mail, telefone, WhatsApp, endereço e mapa.
- A organização em lista de links (Bootstrap `nav nav-stacked`).
- A proteção contra "fornecedor inexistente" (na v7: mensagem explícita
  em vez de página em branco).
- Se o sistema de tickets for reativado: a lista de tickets com protocolo,
  a criação com categoria e o detalhe do ticket.