# Modo Editor

O **Modo Editor** é onde você ajusta o que a IA gerou. Use para mudanças específicas no **backend**. Use também para entender o **scaffold do frontend**.

### Pré-requisitos

* Você tem permissão de edição no projeto.
* Seu app abre no **Preview**.

{% hint style="info" %}
Use o Modo Editor para ajustes “cirúrgicos”. Para geração grande, prefira o Chat AI.
{% endhint %}

### Fluxo típico

{% stepper %}
{% step %}

### Ajuste módulo e menus

* Revise o card do módulo na Home.
* Revise menus e URL Path.
  {% endstep %}

{% step %}

### Crie/ajuste componentes (entidades)

* Defina nome, módulo e nome exibido.
* Conecte scripts aos eventos do componente.
  {% endstep %}

{% step %}

### Modele campos e relacionamentos

* Crie campos e restrições (obrigatório, único).
* Configure 1-N e N-N.
  {% endstep %}

{% step %}

### (Opcional) Crie consultas

* Salve consultas para reaproveitar em listas e relatórios.
  {% endstep %}

{% step %}

### Crie relatórios e dashboards

* Use o editor visual para montar relatórios e dashboards.
  {% endstep %}
  {% endstepper %}

### Backend

#### Módulos

Você pode **adicionar, editar e remover** módulos.

No cadastro do módulo, você configura:

* **Nome do módulo**
* **Ícone**
* **Descrição**
* **Display Name Translations** (nome exibido por idioma)

O **Display Name** aparece na **Home** como um card do módulo.

Idiomas comuns nas traduções:

* `en` (inglês)
* `de` (alemão)
* `es` (espanhol)
* `fr` (francês)
* `it` (italiano)
* `zh` (chinês)
* `ja` (japonês)
* `pt-BR` (português Brasil)
* `pt-PT` (português Portugal)

**Menus do módulo**

Dentro do módulo, você pode cadastrar menus. Cada menu tem:

* **Nome**
* **URL Path**
* **Ícone**
* **Display Name Translations**

{% hint style="warning" %}
Trocar **URL Path** pode quebrar links existentes. Teste o fluxo no Preview.
{% endhint %}

#### Componentes (entidades)

Um **Componente** no Madrix é uma entidade. Ele representa uma **tabela no banco** e pode ter **scripts** associados.

Você pode **adicionar, editar e remover** componentes. No cadastro do componente, você configura:

* **Nome** (use lowercase)
* **Descrição**
* **Módulo**
* **Display Name Translations**
* Scripts por evento:
  * **Before Insert**
  * **After Insert**
  * **Before Update**
  * **After Update**
  * **Before Delete**
  * **After Delete**

Ao salvar um componente, o sistema pode perguntar:

* **Create frontend files**
* **Create menu automatically**
* **Ícone do menu**

#### Base de dados

**Campos**

Você pode **adicionar, editar e remover** campos do componente.

Cada campo costuma ter:

* **Nome**
* **Tipo**
* Flag **Obrigatório**
* **Largura na grid** (runtime)
* Flag **Único** (não permitir duplicados)
* **Display Name Translations**

Tipos de campo:

* `String`
* `Boolean`
* `Date` (configura formato)
* `Datetime` (configura formato)
* `Decimal` (casas decimais; flag de moeda)
* `Integer`
* `Picklist` (lista de opções)
* `Component` (relacionamento com outro componente)
* `User`
* `Attachments`
* `Text`

Exemplos:

* `Picklist`: **Prioridade** = `Alta | Média | Baixa`
* `Decimal` como moeda: marque **Moeda** e defina as casas decimais

**Campo `Component` (relacionamento)**

No relacionamento, você configura:

* o **componente relacionado**
* se é **1-N** ou **N-N** (múltiplos valores)
* qual campo do relacionado é o **Display Field**
* a flag **deleteCascade**

`deleteCascade` define se, ao remover um registro “pai”, o sistema remove relações em cascata.

Exemplo:

* `OrdemDeServico`
* `ItemDaOS` com um campo `ordemDeServico` (tipo `Component`)
* com `deleteCascade = true`, ao apagar a OS, apaga os itens relacionados

{% hint style="danger" %}
Use `deleteCascade` com cuidado. Ele pode apagar dados em massa.
{% endhint %}

**Consultas**

Você pode **adicionar, editar e remover** consultas na tabela do componente. Use para padronizar filtros e reaproveitar listagens.

#### Scripts (Python)

Você pode **adicionar, editar e remover** scripts em Python. Use para regras de negócio no backend, ligadas aos eventos do componente.

#### Dashboards e relatórios

Você pode **adicionar, editar e remover** relatórios e dashboards no editor visual.

<details>

<summary>Treinamento do editor visual</summary>

Conteúdo em vídeo (em breve).

</details>

### Frontend (estrutura gerada)

Quando você marca **Create frontend files**, o Madrix cria a estrutura base do frontend. Ela funciona como scaffold para telas, rotas e tema.

<details>

<summary>Estrutura de pastas (resumo)</summary>

* Pasta pública
  * `favicon.ico`
* Pasta privada
  * `components/`
    * `background/` (`background.tsx`, `classes.ts`, `index.ts`)
    * `forms/`
      * `{{nome_componente_form.tsx}}` (um form por componente)
  * `layouts/`
  * `pages/`
    * `protected/`
      * `Home/`
      * `{modulo}/`
        * `components/` (telas de criar/editar/listar)
        * `kanban-view/`
        * `reports/`
    * `public/`
      * `login/index.tsx`
  * `routes/`
  * `schemas/`
  * `settings/`
  * `theme/`
  * `app.tsx`
  * `global-config.ts`
  * `global.css`
  * `main.tsx`
  * `vite-env.d.ts`
  * `sads/`
* Arquivos na raiz
  * `bun.lock`
  * `index.html`
  * `vercel.json`
  * Arquivos marcados como **locked** (não editar):
    * `bunfig.toml`
    * `package.json`
    * `tsconfig.json`
    * `tsconfig.node.json`
    * `vite.config.ts`

</details>

{% hint style="info" %}
Arquivo **locked** é gerenciado pela plataforma.&#x20;
{% endhint %}

### Falar sobre Updating Madrix Core


---

# 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://docs.madrix.dev/br/documentacao/modo-editor.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.