# UI: Resource Structure Cards

> Reference for step-03b-ui.md — exact JSON formats for section resources (SmartTable, SmartForm) and wireframes.

## specification.sections[] (with resources)

```json
{
  "code": "list",
  "labels": { "fr": "Liste", "en": "List", "it": "Elenco", "de": "Liste" },
  "route": "/business/{app}/{module}/list",
  "icon": "list",
  "permission": "business.{app}.{module}.read",
  "wireframe": "{module}-list",
  "useCases": ["UC-{PREFIX}-001", "UC-{PREFIX}-002"],
  "businessRules": ["BR-VAL-{PREFIX}-001"],
  "resources": [
    {
      "code": "{module}-grid",
      "type": "SmartTable",
      "entity": "{MainEntity}",
      "permission": "business.{app}.{module}.read",
      "columns": ["name", "status", "createdAt"],
      "columnDefs": [
        { "field": "code", "label": {"fr": "Code", "en": "Code"}, "format": "text", "sortable": true, "filterable": true, "clickAction": "navigate:detail" },
        { "field": "name", "label": {"fr": "Nom", "en": "Name"}, "format": "text", "sortable": true, "filterable": true },
        { "field": "status", "label": {"fr": "Statut", "en": "Status"}, "format": "badge", "sortable": true, "filterable": true, "colorMap": "stateMachine:{Entity}" },
        { "field": "createdAt", "label": {"fr": "Créé le", "en": "Created"}, "format": "date-relative", "sortable": true }
      ],
      "actions": ["view", "edit", "delete"],
      "rowActions": [
        { "action": "view", "icon": "eye", "permission": "business.{app}.{module}.read" },
        { "action": "edit", "icon": "edit", "permission": "business.{app}.{module}.update", "showWhen": {"status": ["draft"]} },
        { "action": "delete", "icon": "trash", "permission": "business.{app}.{module}.delete", "confirm": true }
      ],
      "filters": ["status", "dateRange"],
      "defaultSort": { "field": "createdAt", "direction": "desc" },
      "defaultPageSize": 20,
      "emptyState": { "icon": "inbox", "message": {"fr": "Aucun enregistrement", "en": "No records"}, "createAction": true }
    }
  ]
}
```

**MANDATORY for SmartTable:** `columnDefs`, `rowActions`, `defaultSort`, `emptyState`

## SmartForm resource (for create/edit sections)

```json
{
  "code": "{module}-form",
  "type": "SmartForm",
  "entity": "{MainEntity}",
  "permission": "business.{app}.{module}.create",
  "fields": [
    { "name": "code", "component": "Input", "required": true, "validation": "Unique, auto-generated" },
    { "name": "name", "component": "Input", "required": true },
    { "name": "type", "component": "Select", "required": true, "source": "EntityTypeEnum" },
    { "name": "description", "component": "TextArea", "required": false },
    { "name": "parentId", "component": "EntitySelect", "source": "ParentEntity", "required": true },
    { "name": "startDate", "component": "DatePicker", "required": true },
    { "name": "isActive", "component": "Toggle", "default": true }
  ],
  "formLayout": {
    "type": "tabs",
    "tabs": [
      { "code": "general", "label": {"fr": "Général", "en": "General"}, "fields": ["code", "name", "type", "description"] },
      { "code": "details", "label": {"fr": "Détails", "en": "Details"}, "fields": ["parentId", "startDate", "isActive"] }
    ]
  }
}
```

**MANDATORY for SmartForm:** `fields` with `component` type, `formLayout`

## specification.uiWireframes[]

```json
{
  "screen": "{module}-{section}",
  "section": "{section}",
  "description": "Description of the screen",
  "mockupFormat": "ascii",
  "mockup": "╔═══...",
  "elements": ["DataGrid", "FilterBar", "Pagination", "CreateButton"],
  "actions": ["filter", "sort", "create", "view-detail"],
  "permissionsRequired": ["business.{app}.{module}.read"],
  "componentMapping": [
    { "wireframeElement": "DataGrid", "reactComponent": "SmartTable" },
    { "wireframeElement": "FilterBar", "reactComponent": "SmartFilter" },
    { "wireframeElement": "CreateButton", "reactComponent": "Button" }
  ],
  "layout": {
    "type": "page",
    "regions": [
      { "id": "toolbar", "position": "top", "components": [
        { "type": "FilterBar", "resourceRef": "{module}-filters" },
        { "type": "ActionMenu", "resourceRef": "{module}-actions", "permission": "business.{app}.{module}.create" }
      ]},
      { "id": "content", "position": "main", "span": 12, "components": [
        { "type": "SmartTable", "resourceRef": "{module}-grid" }
      ]}
    ]
  }
}
```

**REQUIRED fields:** `screen`, `mockup`, `elements`, `section`, `componentMapping`, `layout` are ALL mandatory.
A wireframe without `componentMapping` or `layout` will FAIL validation in step 9.
**layout.regions[].components[].resourceRef** MUST match a `sections[].resources[].code`.
