# Editor Mode

The **Editor Mode** is where you adjust what the AI generated. Use for specific changes in the **backend**. Also use to understand the **frontend scaffold**.

### Prerequisites

* You have edit permission on the project.
* Your app opens in the **Preview**.

{% hint style="info" %}
Use Editor Mode for “surgical” adjustments. For large generation, prefer Chat AI.
{% endhint %}

### Typical flow

{% stepper %}
{% step %}

### Adjust module and menus

* Review the module card on the Home.
* Review menus and URL Path.
  {% endstep %}

{% step %}

### Create/adjust components (entities)

* Set name, module and display name.
* Connect scripts to component events.
  {% endstep %}

{% step %}

### Model fields and relationships

* Create fields and constraints (required, unique).
* Configure 1-N and N-N.
  {% endstep %}

{% step %}

### (Optional) Create queries

* Save queries to reuse in lists and reports.
  {% endstep %}

{% step %}

### Create reports and dashboards

* Use the visual editor to build reports and dashboards.
  {% endstep %}
  {% endstepper %}

### Backend

#### Modules

You can **add, edit and remove** modules.

In the module registration, you configure:

* **Module Name**
* **Icon**
* **Description**
* **Display Name Translations** (display name per language)

The **Display Name** appears in the **Home** as a module card.

Common languages in translations:

* `en` (English)
* `de` (German)
* `es` (Spanish)
* `fr` (French)
* `it` (Italian)
* `zh` (Chinese)
* `ja` (Japanese)
* `pt-BR` (Portuguese Brazil)
* `pt-PT` (Portuguese Portugal)

**Module menus**

Inside the module, you can register menus. Each menu has:

* **Name**
* **URL Path**
* **Icon**
* **Display Name Translations**

{% hint style="warning" %}
Changing **URL Path** can break existing links. Test the flow in Preview.
{% endhint %}

#### Components (entities)

A **Component** in Madrix is an entity. It represents a **table in the database** and can have **scripts** associated.

You can **add, edit and remove** components. In the component registration, you configure:

* **Name** (use lowercase)
* **Description**
* **Module**
* **Display Name Translations**
* Scripts per event:
  * **Before Insert**
  * **After Insert**
  * **Before Update**
  * **After Update**
  * **Before Delete**
  * **After Delete**

When saving a component, the system may ask:

* **Create frontend files**
* **Create menu automatically**
* **Menu icon**

#### Database

**Fields**

You can **add, edit and remove** component fields.

Each field usually has:

* **Name**
* **Type**
* Flag **Required**
* **Width in grid** (runtime)
* Flag **Unique** (do not allow duplicates)
* **Display Name Translations**

Field types:

* `String`
* `Boolean`
* `Date` (sets format)
* `Datetime` (sets format)
* `Decimal` (decimal places; currency flag)
* `Integer`
* `Picklist` (list of options)
* `Component` (relationship with another component)
* `User`
* `Attachments`
* `Text`

Examples:

* `Picklist`: **Priority** = `High | Medium | Low`
* `Decimal` as currency: check **Currency** and set the decimal places

**Field `Component` (relationship)**

In the relationship, you configure:

* the **related component**
* if it is **1-N** or **N-N** (multiple values)
* which field of the related is the **Display Field**
* the flag **deleteCascade**

`deleteCascade` defines whether, when removing a “parent” record, the system removes relations in cascade.

Example:

* `ServiceOrder`
* `ServiceOrderItem` with a field `serviceOrder` (type `Component`)
* with `deleteCascade = true`, when deleting the SO, deletes the related items

{% hint style="danger" %}
Use `deleteCascade` be careful. It can delete data in bulk.
{% endhint %}

**Queries**

You can **add, edit and remove** queries on the component table. Use to standardize filters and reuse listings.

#### Scripts (Python)

You can **add, edit and remove** Python scripts. Use for backend business rules, tied to component events.

#### Dashboards and reports

You can **add, edit and remove** reports and dashboards in the visual editor.

<details>

<summary>Visual editor training</summary>

Video content (coming soon).

</details>

### Frontend (generated structure)

When you check **Create frontend files**, Madrix creates the base frontend structure. It works as a scaffold for screens, routes and theme.

<details>

<summary>Folder structure (summary)</summary>

* Public folder
  * `favicon.ico`
* Private folder
  * `components/`
    * `background/` (`background.tsx`, `classes.ts`, `index.ts`)
    * `forms/`
      * `{{component_name_form.tsx}}` (one form per component)
  * `layouts/`
  * `pages/`
    * `protected/`
      * `Home/`
      * `{module}/`
        * `components/` (create/edit/list screens)
        * `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/`
* Files at the root
  * `bun.lock`
  * `index.html`
  * `vercel.json`
  * Files marked as **locked** (do not edit):
    * `bunfig.toml`
    * `package.json`
    * `tsconfig.json`
    * `tsconfig.node.json`
    * `vite.config.ts`

</details>

{% hint style="info" %}
File **locked** is managed by the platform.&#x20;
{% endhint %}

### Talk about Updating Madrix Core