# 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