# Manual do Sistema — Views e UX

> Todas as telas ficam no CMS (AdminLTE). O módulo **não tem** telas no
> portal público.

---

## 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:294-301` | Item "Manual do Sistema" |
| Partials de input | `v6/resources/views/components/inputs/input.blade.php`, `textarea.blade.php` | campos do formulário |
| Erros | `v6/resources/views/components/layout/errors.blade.php` | bloco de erros do formulário |

> O menu do AdminLTE **não** condiciona o item a `$modulos['manual-do-sistema']`
> nem a `has_access` — ao contrário de "e-Vacina", "Fornecedores" e "Logs
> do sistema", que são guardados. O item aparece para qualquer operador
> autenticado, e o clique resulta em "Você não tem autorização para
> acessar esta funcionalidade!" (flash) para quem não tem a permissão.

---

## 2. Telas

### 2.1 Índice dos manuais

`v6/resources/views/prefecture/configurations/manual-usuario/index.blade.php`

- Título: `{{ $title }}` = "Manual do Sistema" (vindo do controller).
- Botão "Cadastrar Manual do Sistema" — visível apenas com
  `has_access(['manual-usuario.create'])`.
- Corpo: um "Índice" com `<ul>` de 3 colunas, um item por manual,
  ordenado por título (`collect($content)->sortBy('titulo')`).
- Cada item é um link para `manual-usuario.show`.

### 2.2 Formulário (criação e edição)

`v6/resources/views/prefecture/configurations/manual-usuario/create.blade.php`
+ `form.blade.php`.

| Campo | Componente | Obrigatório |
|---|---|---|
| `titulo` | `components.inputs.input` | sim |
| `url_portal` | `components.inputs.input` | não |
| `url_cms` | `components.inputs.input` | não |
| `objetivo` | `components.inputs.textarea` | sim |

- O `form.blade.php` inclui `prefecture.configurations.manual-usuario.area.index`
  **apenas quando `$data` existe** (ou seja, só na edição).
- O botão de submit mostra "Registrar e Continuar" no cadastro e apenas
  "Registrar" na edição.
- O controller `edit()` renderiza **esta mesma view** (`create.blade.php`),
  com `$data` preenchido — por isso o `form.blade.php` tem todos os
  `isset($data) ? ... : ...`.

### 2.3 Detalhe do manual

`v6/resources/views/prefecture/configurations/manual-usuario/show.blade.php`

- Título: `{{ $data->titulo }}`.
- Botões "Editar {titulo}" (`manual-usuario.edit`) e "Deletar {titulo}"
  (`manual.delete`), ambos condicionados a `has_access`.
- Corpo: objetivo, links "URL no Portal" e "URL no CMS" (quando
  preenchidos) e, para cada área (`$data->areas->sortBy('id')`):
  - imagem de destaque dentro de um container `lightgallery` (com
    `data-src`, `data-thumb`, `data-download-url`);
  - a descrição renderizada com `@php echo ($area->descricao) @endphp` —
    **HTML sem escape**.
- Scripts: `assets/plugins/lightgallery/picturefill.min.js` e
  `assets/vendor/portal/js/lightgallery-all.min.js`, com
  `$('.lightgallery').lightGallery()`.

### 2.4 Áreas (listagem embutida)

`v6/resources/views/prefecture/configurations/manual-usuario/area/index.blade.php`

- Botão "Cadastrar Nova Área" que abre o modal `#modal_area`.
- Tabela `#datatableManual` com colunas Título / Ações, alimentada
  **client-side** (o JS busca os dados e adiciona as linhas).
- Inclui `prefecture.configurations.manual-usuario.area.modal`.

### 2.5 Modal de área

`v6/resources/views/prefecture/configurations/manual-usuario/area/modal.blade.php`

Campos: `#id` (hidden, usado para alternar entre create e update),
`#titulo_area`, editor Summernote (`.summernote`) para a descrição e
`#archive` (input de arquivo).

---

## 3. JavaScript / Ajax

`v6/public/assets/js/custom/contents/manual-sistema/areas.js`.

| Operação | Endpoint | Método |
|---|---|---|
| Listar áreas do manual | `/cms/manual/get/{manual_id}` | GET |
| Criar área | `/cms/manual-area` | POST (FormData) |
| Atualizar área | `/cms/manual-area/{id}` | PUT (FormData) |
| Carregar área no modal | `/cms/manual-area/{id}/edit` | GET |
| Excluir área | `/cms/manual-area/{id}` | DELETE |

Detalhes relevantes:

```js
let data = new FormData();
data.append('titulo', titulo.value);
data.append('descricao', descricao.value);
data.append('manual_id', document.querySelector('.id_data').value);
data.append('arquivo', arquivo.files[0] ? arquivo.files[0] : false);
```

- O campo `arquivo` recebe o **literal** `false` quando não há arquivo —
  o PHP converte a string `"false"` em `true` (é string não vazia), e o
  `ManualAreaRepository` compara `$request->arquivo != 'false'`, o que
  funciona por acidente: `"false" != 'false'` é falso, logo o bloco de
  upload é **pulado**. Funciona, mas por comparação de string.
- `.id_data` é o input hidden `#id_data` do `form.blade.php`, presente
  **somente** na edição. Na criação, `document.querySelector('.id_data')`
  é `null` e o JS lançaria `TypeError` — mas o bloco de áreas só é
  renderizado quando há `$data`, então não ocorre na prática.
- A tabela é criada com `$('#datatableManual').DataTable({...})` e as linhas
  são adicionadas via `table.row.add([...]).node()`.
- Após qualquer operação, `refreshAreas()` recarrega a lista.
- A exclusão usa `myFetch(url, 'DELETE')` e o `deleteAll.js` confirma via
  `bootstrap-confirmation`.

Helpers usados: `myFetch` e `myXHR`
(`v6/public/assets/js/custom/utilities/functions.js:64,90`).

**Não há polling** nem atualização automática.

---

## 4. Exportações

**Nenhuma.**

---

## 5. O que o operador vê (resumo)

1. Engrenagem no topo do CMS -> **Manual do Sistema**.
2. Índice com os manuais (ex.: "Manual de Notícias", "Manual de
   Licitações", ...), em três colunas.
3. Clicar em um manual abre a tela de detalhe: objetivo, links e as áreas
   com as capturas de tela ampliáveis.
4. "Editar" abre o formulário com as áreas embutidas abaixo.
5. "Deletar" aciona `GET /cms/manual/delete/{id}` e volta ao índice.

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

**Nada.** O portal não tem página de manual do sistema. O "Manual de
Navegação" do portal (`route('static.show', 'manual-de-navegacao')`) é uma
**página estática** distinta, servida a partir da tabela de conteúdos.

---

## 7. Itens de UX a preservar na v7

- Índice em colunas, ordenado alfabeticamente.
- Edição em tela única (manual + áreas).
- Modal de área com Summernote e upload de imagem.
- Zoom (lightgallery) nas imagens de destaque.
- Os links "URL no Portal" e "URL no CMS" como atalho para a
  funcionalidade documentada.