@controleonline/ui-default 1.0.270 → 1.0.272

package/docs/technical/DefaultTable.md

@@ -0,0 +1,203 @@
+# DefaultTable
+
+Componente orquestrador de listagens genéricas em React Native / RN Web.
+
+**Arquivo:** `src/react/components/table/DefaultTable.js`  
+**Composição:** `DefaultTableToolbar` → `DefaultTableBody` → `DefaultTableFooter` (+ botões de add)
+
+## Responsabilidade
+
+1. Resolver **colunas** (store ou prop).
+2. Em **autoMode** (`data === undefined` e `storeName` preenchido), paginar/ordenar/filtrar via `store.actions`.
+3. Publicar um objeto **`configs`** no store para filhos lerem sem prop-drilling.
+4. Persistir preferências (colunas visíveis, filtros, view mode, sort) por escopo **empresa / store / rota**.
+
+## Auto mode vs dados controlados
+
+| Modo | Condição | Comportamento |
+| --- | --- | --- |
+| **autoMode** | `data === undefined` e `storeName` não vazio | Pagination hook chama actions do store; `items` / `totalItems` vêm do store |
+| **Controlado** | `data` é array | `items` do store são sobrescritos com `data`; refresh/endReached podem ser callbacks externos |
+
+## Props (principais)
+
+| Prop | Tipo / default | Função |
+| --- | --- | --- |
+| `storeName` | string | Nome do store (`useStore`) |
+| `columns` | array | Fallback se `store.getters.columns` vazio |
+| `data` | array \| undefined | Dados controlados; `undefined` ativa autoMode |
+| `actions` | object | Merge sobre `store.actions` |
+| `filters` | object | Filtros iniciais / seed |
+| `requestParams` | object | Params extras em toda request |
+| `pageSize` | number \| null | Tamanho de página |
+| `sort` | `{ field, direction }` \| null | Sort controlado |
+| `onSortChange` | fn | Callback de sort |
+| `hasMore` / `onEndReached` | | Infinite scroll |
+| `isLoading` / `onRefresh` | | Pull-to-refresh |
+| `initialViewMode` | `'table'` \| `'cards'` | Preferência inicial |
+| `forceCardsOnCompact` | true | Cards quando `width <= compactBreakpoint` |
+| `compactBreakpoint` | 768 | Breakpoint de compactação |
+| `showToolbar` / `showSearch` / `showRowActions` | | UI chrome |
+| `showColumnFiltersButton` | true | Botão de filtros de coluna |
+| `add` / `onAdd` / `addLabel` / `addButtonPlacement` | | `'toolbar'` \| `'bottom'` \| `'floating'` |
+| `importAction` / `onImport` / `exportAction` / `onExport` | | Import/export |
+| `onRowPress` / `onEditRow` / `onSaved` | | Interação de linha |
+| `rowActionsComponent` / `rowActionsWidth` / `pinRowActions` | | Ações por linha |
+| `renderCard` / `cardListProps` | | Customização de cards |
+| `summary` / `summaryLabels` | | Rodapé agregado |
+| `footerComponent` | | Slot de footer |
+| `toolbarActions` | array | Ações extras na toolbar |
+| `getOptionsForColumn` | fn | Options locais para selects |
+| `searchKey` | `'search'` | Param de busca textual |
+| `searchPlaceholder` | string | Placeholder |
+| `visibleColumnsPreferenceKey` | string | Chave extra de preferência |
+| `accentColor` / `defaultColor` | | Tema / cor padrão de campos cor |
+| `rowStyle` | | Estilo por linha |
+
+## Contrato do store
+
+Esperado em `useStore(storeName)`:
+
+| Getter / action | Uso |
+| --- | --- |
+| `getters.columns` | Definição de colunas (preferencial) |
+| `getters.items` | Linhas |
+| `getters.totalItems` | Paginação |
+| `getters.filters` | Filtros ativos |
+| `getters.visibleColumns` | Mapa de colunas visíveis |
+| `getters.configs` | Publicado pelo `DefaultTable` para filhos |
+| `getters.add` | Se `true`, habilita add com `actions.save` ou `onAdd` |
+| `actions.getItems` (ou equivalente na paginação) | Load |
+| `actions.save` | Persistência (form/inline) |
+| `actions.setColumns` / `setItems` / `setFilters` / `setVisibleColumns` / `setConfigs` | Preferidos; senão muta getters |
+
+Helpers de publicação interna: `publishStoreValue` / `assignGetterValue`.
+
+### Objeto `configs` (publicação)
+
+O table monta `defaultTableConfigs` e grava em `store.getters.configs`, incluindo: view mode efetivo, sort resolvido, callbacks de refresh/endReached, flags de UI, `sortedData`, `debugFallbackParameters`, preferência scope, etc. Filhos (`Toolbar`, `Body`, `Footer`) leem **só** `storeName` e usam `configs`.
+
+## View modes
+
+1. Preferência persistida (`resolveStoredTableViewModePreference`)
+2. `configs.viewMode` corrente
+3. Compacto: se `width <= compactBreakpoint` e `forceCardsOnCompact`, força `'cards'`
+4. Senão `initialViewMode` (default `'table'`)
+
+`DefaultTableBody` escolhe `DefaultTableRows` vs `DefaultTableCards`.
+
+## Preferências persistidas (escopo por empresa)
+
+Escopo via `resolveDefaultTablePreferenceScope({ companyId, preferenceKey, route, storeName })`.
+
+Estrutura no `localStorage` (chave raiz `default-table`):
+
+```text
+default-table[companyKey][storeKey][routeKey] = {
+  visibleColumns,
+  filters,
+  viewMode,
+  sort
+}
+```
+
+- `companyKey` = identificador estável da empresa ativa (normalizado).
+- `storeKey` = nome do store (`storeName`).
+- `routeKey` = `preferenceKey` explícito, pathname, `route.name` ou `route.key`.
+
+**O que é persistido:** colunas visíveis, filtros de tabela, view mode e sort.
+
+**Sanitização:** `sanitizeVisibleColumnsPreference` / `sanitizeTableFiltersPreference` (só campos de colunas filtráveis + `search`; ignora chaves desconhecidas ou bloqueadas com `filter: false`).
+
+### Comportamento na troca de empresa
+
+1. O escopo muda (`companyKey` novo).
+2. Filtros, colunas, sort e view mode da empresa anterior **não** são reutilizados.
+3. O table hidrata as preferências salvas para a nova empresa (ou defaults se não houver).
+4. Listas/opções de filtros (selects de coluna e filtros externos) devem ser **recarregadas** no contexto da empresa ativa — não reutilizar opções carregadas para a empresa anterior.
+5. Stores e rotas diferentes continuam isolados entre si.
+
+**Compatibilidade com formato legado:** preferências antigas no formato `default-table[store][route]` (sem `companyKey`) **não** são copiadas automaticamente para todas as empresas. Escopos sem `companyKey` são ignorados na leitura/gravação (ver testes em `tableVisibleColumnsPreferences.test.js`).
+
+Referência de implementação: `src/react/utils/tableVisibleColumnsPreferences.js`.
+
+## Paginação e sort
+
+- `useDefaultTablePagination` — monta query (`buildRequestQuery`), página corrente, refresh, end reached
+- `useDefaultTableSortState` / `useDefaultTableSortedData` — sort remoto/local
+- Utils: `resolveDefaultSort`, `isSortableColumn`, `getSortField`, `mergeSortedDataWithLiveItems`
+
+Constantes úteis (`DefaultTable.utils.js`):
+
+- `DEFAULT_COMPACT_BREAKPOINT = 768`
+- `END_REACHED_THRESHOLD = 0.75`
+- larguras mínimas de célula (identity / money / default)
+
+## Composição interna
+
+| Peça | Papel |
+| --- | --- |
+| `DefaultTableToolbar` | Search, controles, import modal, ações |
+| `DefaultTableControls` | Column menu, filters modal, debug |
+| `DefaultTableSearch` / `DefaultSearchModal` | Busca (compacta ou modal) |
+| `DefaultTableRows` | Cabeçalho, filtros por coluna, células, inline edit |
+| `DefaultTableCards` | Layout card + `renderCard` opcional |
+| `DefaultTableInput` | Ponte célula → `DefaultInput` |
+| `DefaultTableFooter` | Totais / summary / paginação visual |
+| `DefaultTableEmptyState` | Empty + `StateStore` |
+| `DefaultTableRowActions` | Slot de ações |
+| `useDefaultTableTheme` | Cores de painel/borda/botão a partir do theme store |
+
+## Fluxo de dados (autoMode)
+
+```mermaid
+sequenceDiagram
+  participant T as DefaultTable
+  participant P as useDefaultTablePagination
+  participant S as Store
+  participant API as Backend
+  T->>P: buildRequestQuery(page)
+  P->>S: actions.getItems(params)
+  S->>API: HTTP
+  API-->>S: items + totalItems
+  S-->>T: getters.items
+  T->>T: sortedData + configs
+  T->>T: Body/Footer render
+```
+
+## Integração mínima
+
+```jsx
+<DefaultTable
+  storeName="customers"
+  onAdd={() => openCreateModal()}
+  onRowPress={(row) => openDetails(row)}
+/>
+```
+
+Com colunas só via prop (store ainda sem columns):
+
+```jsx
+<DefaultTable
+  storeName="customers"
+  columns={[
+    { name: 'id', label: 'ID', isIdentity: true, editable: false },
+    { name: 'name', label: 'Nome', editable: true },
+    { name: 'status', label: 'Status', list: 'status/getItems', editable: true },
+  ]}
+/>
+```
+
+## Limites e cuidados
+
+- Filhos dependem de `configs` no store: não renderize Body isolado sem o orquestrador.
+- Preferências são por **empresa + store + rota**: mudou empresa ou rota, o escopo muda.
+- `stableSerialize` evita loops de `setConfigs`.
+- List stores com escopo de empresa (`categories`, `paymentType`, `wallet`) recebem `company`/`people` automaticamente nos loads de select/coluna.
+
+## Arquivos relacionados
+
+- `DefaultTable.js`, `DefaultTable.utils.js`, `DefaultTable.styles.js`
+- Hooks: `useDefaultTablePagination.js`, `useDefaultTableSorting.js`, `useDefaultTableTheme.js`
+- Preferências: `src/react/utils/tableVisibleColumnsPreferences`
+- Testes: `src/tests/react/utils/tableVisibleColumnsPreferences.test.js`

package/docs/wiki.md

@@ -0,0 +1 @@
+https://github.com/ControleOnline/ui-default/wiki

package/package.json

@@ -1,21 +1,22 @@
-{
-  "name": "@controleonline/ui-default",
-  "version": "1.0.270",
-  "author": "ControleOnline",
-  "description": "ControleOnline Default Quasar UI Component",
-  "license": "MIT",
-  "main": "src/react/index.js",
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ControleOnline/conline-quasar-ui"
-  },
-  "bugs": "",
-  "homepage": "https://www.controleonline.com/devs/plugins",
-  "browserslist": [
-    "last 1 version, not dead, ie >= 11"
-  ],
-  "dependencies": {
-    "@controleonline/ui-common": "*"
-  }
-}
+{
+  "name": "@controleonline/ui-default",
+  "version": "1.0.272",
+  "author": "ControleOnline",
+  "description": "ControleOnline Default Quasar UI Component",
+  "license": "MIT",
+  "main": "src/react/index.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ControleOnline/conline-quasar-ui"
+  },
+  "bugs": "",
+  "homepage": "https://www.controleonline.com/devs/plugins",
+  "browserslist": [
+    "last 1 version, not dead, ie >= 11"
+  ],
+  "dependencies": {
+    "@controleonline/ui-common": "*",
+    "react-native-vector-icons": "^10.3.0"
+  }
+}

package/scripts/validate-wiki-pointer.cjs

@@ -0,0 +1,13 @@
+const fs = require('fs');
+const path = require('path');
+const root = path.resolve(__dirname, '..');
+const repo = path.basename(root);
+const pointer = fs.readFileSync(path.join(root, 'docs/wiki.md'), 'utf8');
+const expected = `https://github.com/ControleOnline/${repo}/wiki\n`;
+if (pointer !== expected) throw new Error(`docs/wiki.md must contain only ${expected.trim()}`);
+const gitmodulesPath = path.join(root, '.gitmodules');
+if (fs.existsSync(gitmodulesPath)) {
+  const gitmodules = fs.readFileSync(gitmodulesPath, 'utf8');
+  if (/path\s*=\s*docs\/wiki/.test(gitmodules) || new RegExp(`${repo}\\.wiki\\.git`).test(gitmodules)) throw new Error('docs/wiki must not be configured as a wiki submodule');
+}
+console.log(`Validated wiki pointer for ${repo}.`);

package/src/react/components/address/DefaultAddress.js

@@ -0,0 +1,435 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import {
+  buildAddressSavePayload,
+  listCountries,
+  listStates,
+} from '../../services/addressGeo';
+import {
+  buildMapMarkerPayload,
+  formatCepMask,
+  getCurrentCoordinates,
+  hasCoordinates,
+  hydrateAddressFromRow,
+  mergePostalCodeData,
+  normalizeCepDigits,
+  onlyDigits,
+  parseOptionalCoordinate,
+} from '../../services/addressFormUtils';
+import usePostalCodeLookup from '../../hooks/usePostalCodeLookup';
+import DefaultMap from '../map/DefaultMap';
+import LatLonReadonlyFields from './LatLonReadonlyFields';
+import styles from './DefaultAddress.styles';
+
+export default function DefaultAddress({
+  row = null,
+  peopleIri,
+  mode = 'create',
+  onCancel,
+  onSaved,
+  saveAction,
+  onFormChange = null,
+  hideActions = false,
+  submitLabel = 'Salvar',
+}) {
+  const {width} = useWindowDimensions();
+  const isDesktop = width >= 900;
+  const [form, setForm] = useState(() => hydrateAddressFromRow(row));
+  const [countries, setCountries] = useState([]);
+  const [states, setStates] = useState([]);
+  const [loadingMeta, setLoadingMeta] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [showCountryList, setShowCountryList] = useState(false);
+  const [showStateList, setShowStateList] = useState(false);
+  // Once the user types lat/lon, keep both fields editable (avoid lock when both become finite).
+  const [coordsManualEdit, setCoordsManualEdit] = useState(false);
+
+  const {
+    loadingCep,
+    cepError,
+    setCepError,
+    onCepBlur,
+    runLookup,
+    cancelPending,
+  } = usePostalCodeLookup({
+    formCep: form.cep,
+    setForm,
+    onFormChange,
+    setStates,
+    enabled: true,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setLoadingMeta(true);
+      try {
+        const [c, s] = await Promise.all([
+          listCountries(''),
+          listStates(form.countryCode || 'BR'),
+        ]);
+        if (!cancelled) {
+          setCountries(c);
+          setStates(s);
+        }
+      } catch (e) {
+        if (!cancelled) setError(e?.message || 'Falha ao carregar país/estado');
+      } finally {
+        if (!cancelled) setLoadingMeta(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const initial = hydrateAddressFromRow(row);
+    setForm(initial);
+    setCoordsManualEdit(false);
+    onFormChange?.(initial);
+    const digits = onlyDigits(initial.cep);
+
+    (async () => {
+      if (digits.length === 8) {
+        try {
+          await runLookup(digits, {preserveFilledFields: true});
+        } catch {
+          // keep editable existing data
+        }
+        return;
+      }
+      if (mode !== 'create' || hasCoordinates(initial)) {
+        return;
+      }
+      const coords = await getCurrentCoordinates();
+      if (cancelled || !coords) return;
+      setForm(prev => {
+        const next = {...prev, ...coords};
+        onFormChange?.(next);
+        return next;
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+      cancelPending();
+    };
+  }, [mode, row]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onChange = useCallback(
+    (key, value) => {
+      setForm(prev => {
+        let nextValue = value;
+        if (key === 'cep') {
+          nextValue = normalizeCepDigits(value);
+        } else if (key === 'latitude' || key === 'longitude') {
+          // Keep raw string while typing so decimals/signs are not truncated mid-edit.
+          const parsed = parseOptionalCoordinate(value);
+          const trimmed = String(value ?? '').trim();
+          const looksComplete =
+            trimmed !== '' &&
+            trimmed !== '-' &&
+            trimmed !== '.' &&
+            trimmed !== '-.' &&
+            !trimmed.endsWith('.') &&
+            !trimmed.endsWith(',');
+          nextValue =
+            parsed != null && looksComplete ? parsed : value;
+        }
+        const next = {...prev, [key]: nextValue};
+        onFormChange?.(next);
+        return next;
+      });
+      if (key === 'latitude' || key === 'longitude') {
+        setCoordsManualEdit(true);
+      }
+      if (key === 'cep') {
+        setCepError(null);
+        setError(null);
+        setCoordsManualEdit(false);
+      }
+    },
+    [onFormChange, setCepError],
+  );
+
+  const onSelectCountry = useCallback(async item => {
+    setForm(prev => ({
+      ...prev,
+      countryCode: item.code,
+      countryName: item.name,
+      uf: '',
+      stateName: '',
+    }));
+    setShowCountryList(false);
+    try {
+      const s = await listStates(item.code);
+      setStates(s);
+    } catch (e) {
+      setError(e?.message || 'Falha ao carregar estados');
+    }
+  }, []);
+
+  const onSelectState = useCallback(item => {
+    setForm(prev => ({
+      ...prev,
+      uf: item.uf,
+      stateName: item.name,
+    }));
+    setShowStateList(false);
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!peopleIri && mode === 'create') {
+      setError('Pessoa/empresa obrigatória');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const payload = buildAddressSavePayload(form, peopleIri);
+      if (mode === 'edit' && row) {
+        payload.id = row['@id'] || row.id;
+      }
+      const saved = await saveAction(payload);
+      onSaved?.(saved);
+    } catch (e) {
+      setError(e?.message || 'Falha ao salvar endereço');
+    } finally {
+      setSaving(false);
+    }
+  }, [form, peopleIri, mode, row, saveAction, onSaved]);
+
+  const countryLabel = useMemo(
+    () => form.countryName || form.countryCode || 'Selecione o país',
+    [form.countryCode, form.countryName],
+  );
+  const stateLabel = useMemo(
+    () =>
+      form.stateName
+        ? `${form.stateName} (${form.uf})`
+        : form.uf || 'Selecione o estado',
+    [form.stateName, form.uf],
+  );
+
+  const mapMarkerPayload = useMemo(() => buildMapMarkerPayload(form), [form]);
+  const mapUserCoordinates = hasCoordinates(form)
+    ? {latitude: Number(form.latitude), longitude: Number(form.longitude)}
+    : null;
+
+  const displayError = error || cepError;
+
+  const mapPanel = (
+    <View style={[styles.mapPane, isDesktop && styles.mapPaneDesktop]}>
+      <Text style={styles.mapPaneTitle}>Mapa</Text>
+      {hasCoordinates(form) || mapMarkerPayload ? (
+        <View style={[styles.liveMap, isDesktop && styles.liveMapDesktop]}>
+          <DefaultMap
+            markerPayloads={mapMarkerPayload ? [mapMarkerPayload] : []}
+            userCoordinates={mapUserCoordinates}
+          />
+        </View>
+      ) : form.mapStaticUrl ? (
+        <Image
+          source={{uri: form.mapStaticUrl}}
+          style={[styles.mapImage, isDesktop && styles.mapImageDesktop]}
+          resizeMode="cover"
+        />
+      ) : (
+        <View style={[styles.mapPlaceholder, isDesktop && styles.mapImageDesktop]}>
+          <Text style={styles.mapPlaceholderTitle}>Mapa indisponível</Text>
+          <Text style={styles.mapPlaceholderText}>
+            Consulte um CEP para carregar a localização quando a API retornar a
+            imagem, ou informe latitude/longitude manualmente.
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+
+  return (
+    <ScrollView
+      style={styles.scroll}
+      contentContainerStyle={[
+        styles.container,
+        isDesktop && styles.containerDesktop,
+      ]}
+      keyboardShouldPersistTaps="handled">
+      <View style={[styles.formPane, isDesktop && styles.formPaneDesktop]}>
+        {displayError ? <Text style={styles.error}>{displayError}</Text> : null}
+        <Text style={styles.hint}>
+          Informe o CEP (8 dígitos) para autopreencher via ERP. Número/complemento/apelido são preservados.
+        </Text>
+
+        <Field label="Apelido">
+          <TextInput
+            style={styles.input}
+            value={form.nickname}
+            onChangeText={v => onChange('nickname', v)}
+            placeholder="Ex.: Casa, Trabalho"
+          />
+        </Field>
+
+        <Field label="CEP">
+          <View style={styles.row}>
+            <TextInput
+              testID="address-cep-input"
+              style={[styles.input, styles.flex]}
+              value={formatCepMask(form.cep)}
+              onChangeText={v => onChange('cep', v)}
+              onBlur={onCepBlur}
+              keyboardType="number-pad"
+              maxLength={9}
+              placeholder="00000-000"
+            />
+            {loadingCep ? <ActivityIndicator style={styles.loader} /> : null}
+          </View>
+        </Field>
+
+        <Field label="País" style={showCountryList ? styles.fieldRaised : null}>
+          <TouchableOpacity
+            style={styles.select}
+            onPress={() => {
+              setShowStateList(false);
+              setShowCountryList(open => !open);
+            }}
+            disabled={loadingMeta}>
+            <Text numberOfLines={1}>{countryLabel}</Text>
+          </TouchableOpacity>
+          {showCountryList ? (
+            <ScrollView
+              style={styles.dropdown}
+              nestedScrollEnabled
+              keyboardShouldPersistTaps="handled">
+              {countries.map(item => (
+                <TouchableOpacity
+                  key={item.id || item.code}
+                  style={styles.option}
+                  onPress={() => onSelectCountry(item)}>
+                  <Text numberOfLines={1}>
+                    {item.name} ({item.code})
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          ) : null}
+        </Field>
+
+        <Field label="Estado" style={showStateList ? styles.fieldRaised : null}>
+          <TouchableOpacity
+            style={styles.select}
+            onPress={() => {
+              setShowCountryList(false);
+              setShowStateList(open => !open);
+            }}
+            disabled={loadingMeta}>
+            <Text numberOfLines={1}>{stateLabel}</Text>
+          </TouchableOpacity>
+          {showStateList ? (
+            <ScrollView
+              style={styles.dropdown}
+              nestedScrollEnabled
+              keyboardShouldPersistTaps="handled">
+              {states.map(item => (
+                <TouchableOpacity
+                  key={item.id || item.uf}
+                  style={styles.option}
+                  onPress={() => onSelectState(item)}>
+                  <Text numberOfLines={1}>
+                    {item.name} ({item.uf})
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+          ) : null}
+        </Field>
+
+        <Field label="Cidade">
+          <TextInput
+            testID="address-city-input"
+            style={styles.input}
+            value={form.city}
+            onChangeText={v => onChange('city', v)}
+          />
+        </Field>
+        <Field label="Bairro">
+          <TextInput
+            testID="address-district-input"
+            style={styles.input}
+            value={form.district}
+            onChangeText={v => onChange('district', v)}
+          />
+        </Field>
+        <Field label="Logradouro">
+          <TextInput
+            testID="address-street-input"
+            style={styles.input}
+            value={form.street}
+            onChangeText={v => onChange('street', v)}
+          />
+        </Field>
+        <Field label="Número">
+          <TextInput
+            style={styles.input}
+            value={form.number}
+            onChangeText={v => onChange('number', v)}
+            keyboardType="default"
+          />
+        </Field>
+        <Field label="Complemento">
+          <TextInput
+            style={styles.input}
+            value={form.complement}
+            onChangeText={v => onChange('complement', v)}
+          />
+        </Field>
+        <LatLonReadonlyFields
+          form={form}
+          styles={styles}
+          Field={Field}
+          editable={!hasCoordinates(form) || coordsManualEdit}
+          onChange={onChange}
+        />
+
+        {!hideActions ? (
+          <View style={styles.actions}>
+            <TouchableOpacity style={styles.btnSecondary} onPress={onCancel}>
+              <Text>Cancelar</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.btnPrimary}
+              onPress={handleSave}
+              disabled={saving}>
+              <Text style={styles.btnPrimaryText}>
+                {saving ? 'Salvando...' : submitLabel}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        ) : null}
+      </View>
+
+      {mapPanel}
+    </ScrollView>
+  );
+}
+
+function Field({label, children, style = null}) {
+  return (
+    <View style={[styles.field, style]}>
+      <Text style={styles.label}>{label}</Text>
+      {children}
+    </View>
+  );
+}