# Customização do Frontend

### Introdução e Avisos Importantes

O código do frontend do Z-PRO é aberto e permite customizações para adequá-lo à sua marca.

{% hint style="danger" %}
**AVISO: CONHECIMENTO TÉCNICO NECESSÁRIO**

* As alterações descritas nesta documentação exigem conhecimento técnico em desenvolvimento **Vue.js** e administração de servidores Linux.
* Antes de iniciar **qualquer** procedimento, crie um **ponto de restauração (snapshot)** completo do seu servidor VPS. Alterações incorretas podem comprometer o funcionamento da sua plataforma.
* Todas as alterações devem ser feitas logado na VPS com o usuário `deployzdg`. **Não realize os procedimentos se estiver logado como `root`**.
* O Z-PRO não se responsabilza com alterações no frontend e suporte para essas personalizações.
  {% endhint %}

### Procedimento Obrigatório Após Alterações

Após realizar qualquer modificação nos arquivos do frontend, você **precisa** "compilar" o código para que as mudanças apareçam na sua aplicação. Siga os passos abaixo:

```markup
1. navegar até a pasta do frontend pelo terminal
2. cd zpro.io
3. cd frontend
4. export NODE_OPTIONS=--openssl-legacy-provider && npx quasar build -P -m pwa
5. pm2 restart all
6. limpar os cookies/cache do navegador
```

***

### Guia de Customização por Elemento

#### Ícones

* **Local:** `frontend/public/icons`
* **Ação:** Gere e substitua os arquivos de ícone nos tamanhos disponíveis nesta pasta.

#### Logos e Favicon

* **Local:** `frontend/public/`
* **Ação:** Substitua os seguintes arquivos pelos seus:
  * `frontend/public/zpro.png`
  * `frontend/public/favicon.ico`

#### Vídeos e Sons

* **Local:** `frontend/src/assets`
* **Ação:** Substitua os seguintes arquivos:
  * `frontend/src/assets/110694.mp4` (Vídeo da tela de login)
  * `frontend/src/assets/sound.mp3` (Som de notificação)
  * `frontend/src/assets/sound.ogg` (Som de notificação)

#### Nomes da Aplicação

* **Ação:** Altere o nome "Z-PRO" para o nome da sua marca nos seguintes arquivos e locais:
  * **Arquivo:** `frontend/quasar.conf.js`

    ```javascript
    name: "Z-PRO",
    short_name: "Z-PRO",
    appId: "Z-PRO",
    ```
  * **Arquivo:** `frontend/src/App.vue`

    ```javascript
    name: 'Z-PRO',
    ```
  * **Arquivo:** `frontend/src/index.template.html`

    ```html
    <title>Z-PRO</title>
    ```

#### Cores

* **Ação:** Altere os códigos hexadecimais de cor (`#5c67f2`, etc.) nos seguintes arquivos:
  * **Arquivo:** `frontend/src/css/app.sass` (Estilos e Fontes)
  * **Arquivo:** `frontend/src/css/quasar.variables.sass` (Cores Básicas)

    ```sass
    $primary: #5c67f2
    $secondary: #f5f5f9
    // ...e outras variáveis de cor
    ```
  * **Arquivo:** `frontend/src/pages/dashboard/Index.vue` (Cores Dashboard)

    ```css
    background-color: #5c67f2;
    ```
  * **Arquivo:** `frontend/src/components/EssentialLink.vue` (Borda Esquerda do Menu)

    ```css
    border-left: 4px solid #5c67f2
    ```
  * **Arquivo:** `frontend/src/pages/relatorios/ccListaRelatorios.vue` (Bordas dos Relatórios)

    ```css
    border-left: solid #5c67f2 3px
    ```
  * **Arquivos:** `frontend/src/pages/atendimento/ModalLayout.vue` e `frontend/src/layouts/ModalLayout.vue` (Borda do Modal de Atendimento)

    ```css
    background-color: #5c67f2 !important;
    ```
  * **Arquivos do Construtor de Chatbot (`frontend/src/components/ccFlowBuilder/`):**
    * `panel.vue`: `paintStyle: { strokeWidth: 3, stroke: '#5c67f2' }`
    * `node.vue`: `border-left: 5px solid #5c67f2 !important;`
    * `mixins.js`: `stroke: '#5c67f2'` e `HoverPaintStyle: { stroke: '#5c67f2', ... }`
    * `jsplumb.js`: `EndpointStyle: { fill: "#5c67f2" }` e `PaintStyle: { ..., stroke: "#5c67f2" }`
    * `defaultFlow.js`: `paintStyle: { strokeWidth: 3, stroke: '#5c67f2' }`
    * `index.css`: Altere as variáveis CSS como `--primary-color: #5c67f2;`

***

### Precisa de Ajuda Profissional?

Como mencionado, a customização do frontend requer a ajuda de um desenvolvedor com experiência em Vue.js.

Se precisar de indicações, temos uma lista de profissionais e parceiros externos que podem te auxiliar. Para isso, por favor, abra um chamado no departamento **"Preciso de indicação de profissional para manutenção e desenvolvimento"**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajuda.zdg.com.br/avancado-recursos-tecnicos/customizacao-do-frontend.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.