# Fornecedores — Views e UX

> Telas no CMS (AdminLTE). O módulo **não** tem representação no portal.

---

## 1. Layouts e assets

| Item | 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:275-282` | Item "Fornecedores" |
| JS da listagem | `v6/public/assets/js/custom/config/fornecedor/datatable.js` | Colunas e botões da tabela |
| Helper de DataTable | `v6/public/assets/js/custom/utilities/table.js` | `runDatatables()`, `createBTN()`, `createActiveButton()` |
| Helpers de fetch | `v6/public/assets/js/custom/utilities/functions.js` | `myFetch()` |

---

## 2. Tela de listagem

`v6/resources/views/prefecture/configurations/fornecedor/index.blade.php`

- Cabeçalho "Lista de Fornecedores".
- Botão "Cadastrar" -> `route('supplier.create')`, visível apenas com
  `has_access(['supplier.create'])`.
- Tabela `#tabela_fornecedor` com colunas: ID (5%), Nome, E-mail,
  Telefone, Endereço, Ícone, Imagem, Ações (20%).

As linhas são preenchidas pelo DataTable, alimentado pela view SQL
`fornecedores` (que expõe `titulo`, `email`, `telefone`, `endereco`,
`icone`, `imagem`, `id`, `status`).

---

## 3. Colunas e botões (JavaScript)

`v6/public/assets/js/custom/config/fornecedor/datatable.js`:

```js
let collums = [
    { data: 'titulo',    render: data => `<div class='vertical-middle' style='padding:8px'>${data}</div>` },
    { data: 'email',     render: data => `...${data}...` },
    { data: 'telefone',  render: data => `...${changeToFone(data)}...` },
    { data: 'endereco',  render: data => `...${data}...` },
    { data: 'icone',     render: data => `<img style="width: 48px;height: 48px;background: #ccc;" src="/storage/${data}" />` },
    { data: 'imagem',    render: data => `<img style="max-width: 102px;max-height: 79px;background: #ccc;" src="/storage/${data}" />` },
    {
        data: null,
        orderable: false,
        render: data =>
            `<div class='flex justify-center'>`
            + createActiveButton(data.status, data.id, 'item', data.active, data.inactivate, `/cms/fornecedores_switch`, true)
            + createBTN(data.id, `fornecedores/editar/${data.id}`, data.edit, data.delete, `fornecedores/excluir/${data.id}`)
            + `</div>`
    }
];

runDatatables('fornecedor', collums);
```

Características:

- O **telefone** é formatado por `changeToFone(data)` (máscara de
  exibição).
- As imagens são carregadas de `/storage/{caminho}` (caminho relativo
  gravado no banco).
- O **botão de alternância** chama `createActiveButton(...)` com a URL
  `/cms/fornecedores_switch`; o `true` final é o `refreshAllButtons`.
- Os botões de editar/excluir usam `createBTN`, que respeita as flags
  `edit`/`delete` injetadas pelo backend (`struct_views`).
- **Não há** botão de **visualizar** (detalhe) — só editar e excluir.

---

## 4. Formulário

`v6/resources/views/prefecture/configurations/fornecedor/create.blade.php`,
`edit.blade.php` e `form.blade.php`.

| Campo | Componente | Observação |
|---|---|---|
| `name` | `components.inputs.input` | obrigatório |
| `email` | `components.inputs.input` | obrigatório |
| `site` | `components.inputs.input` | obrigatório |
| `phone` | `components.inputs.input` (com máscara JS) | obrigatório |
| `whatsapp` | `components.inputs.input` | opcional |
| `address` | `components.inputs.input` | obrigatório |
| `locale` | `components.inputs.input` (URL do mapa) | obrigatório |
| `image` | `components.inputs.image` | logotipo (opcional) |
| `icon` | `components.inputs.image` | ícone (opcional) |

O `create` abre `Form::open(['url' => '/cms/fornecedores', 'files' => true])`
e o `edit` usa `Form::model($supplier, ['route' => ['supplier.update',
$supplier->id], 'method' => 'PUT', 'files' => true])`.

> A máscara de telefone é aplicada por JavaScript (plugin de máscara);
> a validação `min:5` do servidor roda sobre o valor **com** máscara.

---

## 5. Página de Suporte (consumo do fornecedor ativo)

`v6/resources/views/admin/layouts/about.blade.php` — detalhada no dossiê
do módulo `suporte`. Consome o fornecedor ativo e mostra: logotipo,
nome, site, e-mail, telefone, WhatsApp, endereço e o mapa (iframe).

## 6. Rodapé do CMS

`v6/resources/views/vendor/adminlte/page.blade.php:417-437`:

```blade
@inject('fornecedorDados', 'App\Http\Model\Prefecture\Supplier')
@php
    $fornecedor = $fornecedorDados->where('fornecedor_ativo', true)->first();
@endphp
...
<strong>Copyright © {{ $copyright }}
    @if ($fornecedor)
        <a href="{{ $fornecedor->site ?? '' }}" target="_blank"
           title="{{ $fornecedor->name ?? '' }}">{{ $fornecedor->name ?? '' }}</a>
    @endif}.
</strong> Todos os direitos reservados.
```

---

## 7. JavaScript / Ajax

| Endpoint | Método | Uso |
|---|---|---|
| `/cms/datatable/fornecedor` | GET | lista (Yajra) |
| `/cms/fornecedores_switch` | POST | ativa/desativa o fornecedor |
| `/cms/fornecedores/excluir/{id}` | DELETE | exclui |

**Não há polling** nem atualização automática (exceto o
`refreshAllButtons` após a alternância).

---

## 8. Exportações

**Nenhuma.**

---

## 9. O que o operador vê

1. Engrenagem do CMS -> **Fornecedores** (visível apenas com
   `supplier.index` e com o módulo ativo).
2. Tabela com nome, e-mail, telefone, endereço, ícone e logotipo.
3. Botão de alternância por linha (verde = ativo) e botões de
   editar/excluir.
4. Formulário de cadastro/edição com os dados de contato e as imagens.

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

**Nada.** O módulo é interno ao CMS. O portal público não lista
fornecedores.

---

## 11. Itens de UX a preservar na v7

- A coluna de logotipo em miniatura e o ícone quadrado de 48px.
- O botão de alternância do fornecedor ativo.
- A máscara de telefone com `changeToFone`.
- A listagem com as duas imagens (logotipo grande + ícone pequeno).
- O formulário único para cadastro e edição.