@controleonline/ui-customers 1.0.81

package/src/react/components/tabs/AddressesTab.js

@@ -0,0 +1,494 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {
+  Linking,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import {useStores} from '@store';
+import {useMessage} from '@controleonline/ui-common/src/react/components/MessageService';
+import DefaultAddress from '@controleonline/ui-default/src/react/components/address/DefaultAddress';
+import {
+  buildGoogleMapsNavigationUrl,
+  buildNavigationMapQuery,
+  buildWazeNavigationUrl,
+} from '@controleonline/ui-common/src/react/utils/mapNavigation';
+
+const extractId = value => String(value || '').replace(/\D/g, '');
+const normalizeId = value => extractId(value) || value || Date.now();
+
+const toPeopleIri = person => {
+  const rawIri = String(person?.['@id'] || '').trim();
+  if (rawIri.startsWith('/people/')) {
+    return rawIri;
+  }
+
+  const nestedIri = String(person?.people?.['@id'] || person?.people || '').trim();
+  if (nestedIri.startsWith('/people/')) {
+    return nestedIri;
+  }
+
+  const id = extractId(person?.id || person?.people?.id || rawIri || nestedIri);
+  return id ? `/people/${id}` : '';
+};
+
+const normalizeString = value => {
+  const text = String(value || '').trim();
+  return text.length > 0 ? text : undefined;
+};
+const normalizeZipCode = value =>
+  String(value || '')
+    .replace(/\D/g, '')
+    .slice(0, 8);
+
+const buildAddressMapQuery = address => {
+  const streetLine = [normalizeString(address?.street), normalizeString(address?.number)]
+    .filter(Boolean)
+    .join(', ');
+  const cityStateLine = [normalizeString(address?.city), normalizeString(address?.state)]
+    .filter(Boolean)
+    .join(' - ');
+
+  return buildNavigationMapQuery([
+    streetLine,
+    normalizeString(address?.district),
+    cityStateLine,
+    normalizeString(address?.country),
+    normalizeZipCode(address?.zipCode),
+    normalizeString(address?.complement),
+  ]);
+};
+
+const buildAddressPrimaryLine = address =>
+  [normalizeString(address?.street), normalizeString(address?.number)]
+    .filter(Boolean)
+    .join(', ');
+
+const buildAddressSecondaryLine = address =>
+  [
+    normalizeString(address?.district),
+    [normalizeString(address?.city), normalizeString(address?.state)]
+      .filter(Boolean)
+      .join(' - '),
+    normalizeString(address?.country),
+  ]
+    .filter(Boolean)
+    .join(' • ');
+
+const normalizeAddress = address => ({
+  id: normalizeId(address?.id || address?.['@id']),
+  street: address?.street?.street || address?.street || '',
+  number: String(address?.number || '').trim(),
+  city:
+    address?.street?.district?.city?.city ||
+    address?.street?.city?.city ||
+    address?.city ||
+    '',
+  state:
+    address?.street?.district?.city?.state?.uf ||
+    address?.street?.district?.city?.state?.state ||
+    address?.street?.city?.state?.uf ||
+    address?.street?.city?.state?.state ||
+    address?.state ||
+    '',
+  zipCode:
+    (typeof address?.zipCode === 'object'
+      ? address?.zipCode?.cep
+      : address?.zipCode) ||
+    address?.street?.cep?.cep ||
+    address?.postal_code ||
+    address?.cep ||
+    '',
+  complement: address?.complement || '',
+  district:
+    address?.street?.district?.district ||
+    address?.district ||
+    '',
+  country:
+    address?.street?.district?.city?.state?.country?.countrycode ||
+    address?.street?.district?.city?.state?.country?.countryname ||
+    address?.street?.city?.state?.country?.countrycode ||
+    address?.street?.city?.state?.country?.countryname ||
+    address?.country ||
+    '',
+  nickname: address?.nickname || '',
+});
+
+const mapAddressesForClient = list =>
+  list.map(item => ({
+    id: item.id,
+    '@id': String(item?.id || '').startsWith('/addresses/')
+      ? String(item.id)
+      : `/addresses/${extractId(item.id || '')}`,
+    street: item.street,
+    number: item.number,
+    complement: item.complement,
+    district: item.district,
+    city: item.city,
+    state: item.state,
+    zipCode: item.zipCode,
+    country: item.country,
+    nickname: item.nickname,
+  }));
+
+const AddressesTab = ({client, customStyles, isEditing, onUpdateClient}) => {
+  const {showError, showSuccess, showDialog} = useMessage();
+  const [addresses, setAddresses] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+  const [showNavigationModal, setShowNavigationModal] = useState(false);
+  const [navigationAddress, setNavigationAddress] = useState(null);
+
+  const addressStore = useStores(state => state.address) || {};
+  const actions = addressStore.actions || {};
+  const peopleIri = useMemo(() => toPeopleIri(client), [client]);
+
+  useEffect(() => {
+    const rawAddresses = Array.isArray(client?.address)
+      ? client.address.map(item => normalizeAddress(item))
+      : [];
+
+    setAddresses(rawAddresses);
+  }, [client]);
+
+  const openModal = item => {
+    const normalizedItem = item ? normalizeAddress(item) : {};
+    setEditingItem(item ? normalizedItem : null);
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setEditingItem(null);
+  };
+
+  const closeNavigationModal = () => {
+    setShowNavigationModal(false);
+    setNavigationAddress(null);
+  };
+
+  const openNavigationModal = address => {
+    const normalizedAddress = normalizeAddress(address);
+    const mapQuery = buildAddressMapQuery(normalizedAddress);
+
+    if (!mapQuery) {
+      showError('Nao foi possivel montar a navegacao para este endereco.');
+      return;
+    }
+
+    setNavigationAddress(normalizedAddress);
+    setShowNavigationModal(true);
+  };
+
+  const handleOpenNavigation = async appName => {
+    const mapQuery = buildAddressMapQuery(navigationAddress);
+    const url =
+      appName === 'waze'
+        ? buildWazeNavigationUrl({mapQuery})
+        : buildGoogleMapsNavigationUrl({mapQuery});
+
+    if (!url) {
+      showError('Nao foi possivel montar a navegacao para este endereco.');
+      return;
+    }
+
+    closeNavigationModal();
+
+    try {
+      await Linking.openURL(url);
+    } catch {
+      showError('Nao foi possivel abrir o aplicativo de navegacao.');
+    }
+  };
+
+  const saveAddress = async payload => {
+    if (!actions?.save) {
+      throw new Error('Servico de enderecos indisponivel no momento.');
+    }
+
+    if (!peopleIri) {
+      throw new Error('Nao foi possivel identificar o cliente para salvar o endereco.');
+    }
+
+    return actions.save({
+      ...payload,
+      people: peopleIri,
+    });
+  };
+
+  const handleAddressSaved = saved => {
+    const normalizedSaved = normalizeAddress(saved || {});
+    const updatedAddresses = editingItem
+      ? addresses.map(item =>
+          item.id === editingItem.id ? normalizedSaved : item,
+        )
+      : [...addresses, normalizedSaved];
+
+    setAddresses(updatedAddresses);
+    onUpdateClient?.('address', mapAddressesForClient(updatedAddresses));
+
+    showSuccess(
+      editingItem
+        ? 'Endereco atualizado com sucesso!'
+        : 'Endereco criado com sucesso!',
+    );
+    closeModal();
+  };
+
+  const handleDelete = id => {
+    showDialog({
+      title: 'Confirmar exclusao',
+      message: 'Deseja realmente remover este item?',
+      confirmLabel: 'Remover',
+      cancelLabel: 'Cancelar',
+      onConfirm: async () => {
+        try {
+          if (!actions?.remove) {
+            showError('Servico de enderecos indisponivel no momento.');
+            return;
+          }
+          await actions.remove(id);
+          const updatedAddresses = addresses.filter(item => item.id !== id);
+          setAddresses(updatedAddresses);
+          onUpdateClient?.('address', mapAddressesForClient(updatedAddresses));
+          showSuccess('Endereco removido com sucesso!');
+        } catch {
+          showError('Falha ao remover endereco. Tente novamente.');
+        }
+      },
+    });
+  };
+
+  const renderModal = () => (
+    <Modal visible={showModal} transparent animationType="slide">
+      <View style={[customStyles.modalOverlay, addressModalStyles.overlay]}>
+        <View style={addressModalStyles.container}>
+          <View style={addressModalStyles.header}>
+            <Text style={[customStyles.modalTitle, addressModalStyles.title]}>
+              {editingItem ? global.t?.t('address', 'title', 'editAddress') : global.t?.t('address', 'title', 'address')}
+            </Text>
+            <TouchableOpacity
+              onPress={closeModal}
+              style={addressModalStyles.closeButton}>
+              <FeatherIcon name="x" size={20} color="#0F172A" />
+            </TouchableOpacity>
+          </View>
+          <DefaultAddress
+            mode={editingItem ? 'edit' : 'create'}
+            row={editingItem
+              ? {
+                  ...editingItem,
+                  cep: editingItem.zipCode,
+                  uf: editingItem.state,
+                  country: editingItem.country,
+                }
+              : null}
+            peopleIri={peopleIri}
+            saveAction={saveAddress}
+            onCancel={closeModal}
+            onSaved={handleAddressSaved}
+            submitLabel={global.t?.t('address', 'button', 'save') || 'Salvar'}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+
+  const renderNavigationModal = () => {
+    const primaryLine = buildAddressPrimaryLine(navigationAddress);
+    const secondaryLine = buildAddressSecondaryLine(navigationAddress);
+
+    return (
+      <Modal
+        visible={showNavigationModal}
+        transparent
+        animationType="fade"
+        onRequestClose={closeNavigationModal}>
+        <View style={customStyles.modalOverlay}>
+          <View style={customStyles.modalContainer}>
+            <Text style={customStyles.modalTitle}>Abrir endereco</Text>
+            <Text style={customStyles.navigationModalDescription}>
+              Escolha qual aplicativo deseja usar para navegar ate este endereco.
+            </Text>
+            <View style={customStyles.navigationAddressCard}>
+              <Text style={customStyles.navigationAddressTitle}>
+                {primaryLine || 'Endereco'}
+              </Text>
+              {secondaryLine ? (
+                <Text style={customStyles.navigationAddressSubtitle}>
+                  {secondaryLine}
+                </Text>
+              ) : null}
+            </View>
+            <View style={customStyles.navigationOptions}>
+              <TouchableOpacity
+                style={[
+                  customStyles.navigationOptionButton,
+                  customStyles.navigationOptionButtonPrimary,
+                ]}
+                onPress={() => handleOpenNavigation('google')}>
+                <Text
+                  style={[
+                    customStyles.navigationOptionButtonText,
+                    customStyles.navigationOptionButtonTextPrimary,
+                  ]}>
+                  Google Maps
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={customStyles.navigationOptionButton}
+                onPress={() => handleOpenNavigation('waze')}>
+                <Text style={customStyles.navigationOptionButtonText}>
+                  Waze
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <TouchableOpacity
+              style={customStyles.modalCancelButton}
+              onPress={closeNavigationModal}>
+              <Text style={customStyles.modalCancelText}>Cancelar</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    );
+  };
+
+  return (
+    <>
+      <View style={customStyles.tabContent}>
+        <View style={customStyles.section}>
+          <View style={customStyles.sectionHeader}>
+            <Text style={customStyles.sectionTitle}>{global.t?.t('address', 'title', 'addresses')}</Text>
+            {isEditing && (
+              <TouchableOpacity
+                onPress={() => openModal(null)}
+                style={customStyles.iconButtonPrimary}>
+                <Icon
+                  name="add"
+                  size={20}
+                  color={customStyles.iconButtonPrimaryIcon.color}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+          {addresses.length === 0 ? (
+            <Text style={customStyles.emptyText}>{global.t?.t('address', 'label', 'noAddressesFound')}</Text>
+          ) : (
+            addresses.map(address => (
+              <View
+                key={address.id}
+                style={[
+                  customStyles.listItem,
+                  customStyles.listItemWithActions,
+                ]}>
+                <View style={customStyles.itemContent}>
+                  <TouchableOpacity
+                    onPress={() => openNavigationModal(address)}
+                    style={[
+                      customStyles.iconButtonLocation,
+                      customStyles.locationButton,
+                    ]}>
+                    <Icon
+                      name="location-on"
+                      size={20}
+                      color={customStyles.iconButtonPrimaryIcon.color}
+                    />
+                  </TouchableOpacity>
+                  <View>
+                    <Text style={customStyles.itemText}>
+                      {address.street}
+                      {address.number ? `, ${address.number}` : ''}
+                    </Text>
+                    <Text style={customStyles.itemSubtext}>
+                      {address.district ? `${address.district}, ` : ''}
+                      {address.city}
+                      {address.state ? ` - ${address.state}` : ''}
+                      {address.country ? ` (${address.country})` : ''}
+                      {address.complement ? `\n${address.complement}` : ''}
+                      {address.nickname && address.nickname !== 'DEFAULT'
+                        ? `\n${address.nickname}`
+                        : ''}
+                    </Text>
+                  </View>
+                </View>
+                {isEditing && (
+                  <View
+                    style={[
+                      customStyles.itemActions,
+                      customStyles.itemActionsPinned,
+                    ]}>
+                    <TouchableOpacity
+                      onPress={() => openModal(address)}
+                      style={customStyles.iconButtonGhost}>
+                      <FeatherIcon
+                        name="edit-2"
+                        size={16}
+                        color={customStyles.iconButtonGhostIcon.color}
+                      />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => handleDelete(address.id)}
+                      style={customStyles.iconButtonGhost}>
+                      <FeatherIcon
+                        name="trash-2"
+                        size={16}
+                        color={customStyles.iconButtonGhostIcon.color}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                )}
+              </View>
+            ))
+          )}
+        </View>
+      </View>
+      {renderModal()}
+      {renderNavigationModal()}
+    </>
+  );
+};
+
+const addressModalStyles = StyleSheet.create({
+  overlay: {
+    justifyContent: 'flex-start',
+    alignItems: 'stretch',
+    backgroundColor: '#F8FAFC',
+  },
+  container: {
+    flex: 1,
+    width: '100%',
+    maxWidth: '100%',
+    borderRadius: 0,
+    backgroundColor: '#FFFFFF',
+    padding: 0,
+  },
+  header: {
+    minHeight: 64,
+    paddingHorizontal: 24,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+  },
+  title: {
+    textAlign: 'left',
+    marginBottom: 0,
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F1F5F9',
+  },
+});
+
+export default AddressesTab;

package/src/react/components/tabs/CategoriesTab.js

@@ -0,0 +1,196 @@
+/**
+ * CategoriesTab — classificação de pessoas (PF: profession/position; PJ: sector/activity_branch)
+ * com badges e período (start_date / end_date). Issue #377.
+ */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useStore } from '@store';
+import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
+
+const normalizeCollection = payload => {
+  if (Array.isArray(payload)) return payload;
+  if (!payload || typeof payload !== 'object') return [];
+  if (Array.isArray(payload.member)) return payload.member;
+  if (Array.isArray(payload['hydra:member'])) return payload['hydra:member'];
+  if (Array.isArray(payload.items)) return payload.items;
+  return [];
+};
+
+const extractId = value => {
+  if (!value && value !== 0) return null;
+  if (typeof value === 'number') return value;
+  const raw = typeof value === 'string' ? value : value?.id || value?.['@id'];
+  if (!raw) return null;
+  const match = String(raw).match(/(\d+)$/);
+  return match ? parseInt(match[1], 10) : null;
+};
+
+const PF_CONTEXTS = [
+  { key: 'profession', label: 'Profissão' },
+  { key: 'position', label: 'Cargo' },
+];
+const PJ_CONTEXTS = [
+  { key: 'sector', label: 'Setor' },
+  { key: 'activity_branch', label: 'Ramo de Atividade' },
+];
+
+const formatDate = value => {
+  if (!value) return '—';
+  try {
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime())) return String(value);
+    return d.toLocaleDateString('pt-BR');
+  } catch {
+    return String(value);
+  }
+};
+
+const CategoriesTab = ({ client }) => {
+  const peopleCategoryStore = useStore('people_category');
+  const categoryStore = useStore('category');
+  const { showError, showSuccess } = useMessage?.() || {};
+  const clientId = extractId(client?.id || client?.['@id']);
+  const peopleType = String(client?.peopleType || 'J').trim().toUpperCase() || 'J';
+  const isPF = peopleType === 'F';
+  const contexts = isPF ? PF_CONTEXTS : PJ_CONTEXTS;
+
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [removingId, setRemovingId] = useState(null);
+
+  const load = useCallback(async () => {
+    if (!clientId || !peopleCategoryStore?.actions?.getItems) return;
+    setLoading(true);
+    try {
+      const res = await peopleCategoryStore.actions.getItems({
+        people: `/people/${clientId}`,
+        active: true,
+      });
+      setItems(normalizeCollection(res));
+    } catch (e) {
+      showError?.(e?.message || 'Falha ao carregar categorias');
+      setItems([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [clientId, peopleCategoryStore, showError]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleRemove = useCallback(
+    async row => {
+      const id = extractId(row?.id || row?.['@id']);
+      if (!id || !peopleCategoryStore?.actions?.remove) return;
+      setRemovingId(id);
+      try {
+        await peopleCategoryStore.actions.remove(id);
+        showSuccess?.('Categoria removida.');
+        await load();
+      } catch (e) {
+        showError?.(e?.message || 'Falha ao remover categoria');
+      } finally {
+        setRemovingId(null);
+      }
+    },
+    [peopleCategoryStore, load, showError, showSuccess],
+  );
+
+  const badgeLabel = row => {
+    const cat = row?.category;
+    const name = cat?.name || cat?.['@id'] || 'Categoria';
+    const ctx = cat?.context || '';
+    const ctxLabel = contexts.find(c => c.key === ctx)?.label || ctx;
+    return ctxLabel ? `${name} · ${ctxLabel}` : name;
+  };
+
+  if (!clientId) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.muted}>Selecione uma pessoa para ver categorias.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Classificação</Text>
+      <Text style={styles.subtitle}>
+        {isPF
+          ? 'Profissão e cargo (com período).'
+          : 'Setor e ramo de atividade (com período).'}
+      </Text>
+
+      {loading ? (
+        <ActivityIndicator style={{ marginTop: 16 }} />
+      ) : items.length === 0 ? (
+        <Text style={styles.muted}>Nenhuma categoria associada.</Text>
+      ) : (
+        <View style={styles.badgeList}>
+          {items.map(row => {
+            const id = extractId(row?.id || row?.['@id']);
+            return (
+              <View key={id || Math.random()} style={styles.badge}>
+                <View style={{ flex: 1 }}>
+                  <Text style={styles.badgeText}>{badgeLabel(row)}</Text>
+                  <Text style={styles.dates}>
+                    {formatDate(row?.startDate || row?.start_date)} →{' '}
+                    {formatDate(row?.endDate || row?.end_date)}
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  onPress={() => handleRemove(row)}
+                  disabled={removingId === id}
+                  style={styles.removeBtn}
+                >
+                  <Text style={styles.removeText}>
+                    {removingId === id ? '…' : 'Remover'}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            );
+          })}
+        </View>
+      )}
+
+      <Text style={[styles.muted, { marginTop: 16 }]}>
+        Para adicionar: use o cadastro de categorias (context{' '}
+        {contexts.map(c => c.key).join(', ')}) e associe via API{' '}
+        <Text style={{ fontFamily: 'monospace' }}>/people_categories</Text> com
+        start_date / end_date
+        {isPF ? ' e people_company_id no cargo.' : '.'}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { padding: 16 },
+  title: { fontSize: 16, fontWeight: '600', marginBottom: 4 },
+  subtitle: { fontSize: 13, color: '#64748B', marginBottom: 12 },
+  muted: { fontSize: 13, color: '#94A3B8' },
+  badgeList: { gap: 8 },
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#EEF2FF',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderColor: '#C7D2FE',
+  },
+  badgeText: { fontSize: 14, fontWeight: '500', color: '#312E81' },
+  dates: { fontSize: 12, color: '#6366F1', marginTop: 2 },
+  removeBtn: { paddingHorizontal: 8, paddingVertical: 4 },
+  removeText: { color: '#DC2626', fontSize: 13 },
+});
+
+export default CategoriesTab;