@controleonline/ui-customers 1.0.81

package/src/react/components/tabs/ContactTab.styles.js

@@ -0,0 +1,119 @@
+export const inlineStyle_363_18 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_365_14 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_382_18 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_384_14 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_404_8 = {
+  justifyContent: 'flex-end',
+};
+
+export const inlineStyle_405_14 = {
+  backgroundColor: '#fff',
+  borderTopLeftRadius: 24,
+  borderTopRightRadius: 24,
+  maxHeight: '80%',
+  width: '100%',
+  shadowColor: '#000',
+
+  shadowOffset: {
+    width: 0,
+    height: -4,
+  },
+
+  shadowOpacity: 0.1,
+  shadowRadius: 12,
+  elevation: 10,
+};
+
+export const inlineStyle_418_16 = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: 24,
+  paddingVertical: 20,
+  borderBottomWidth: 1,
+  borderBottomColor: '#F1F5F9',
+};
+
+export const inlineStyle_427_18 = {
+  fontSize: 20,
+  fontWeight: '700',
+  color: '#0F172A',
+};
+
+export const inlineStyle_430_51 = {
+  width: 32,
+  height: 32,
+  borderRadius: 16,
+  backgroundColor: '#F1F5F9',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_437_16 = {
+  padding: 24,
+};
+
+export const inlineStyle_439_18 = {
+  flexDirection: 'row',
+  gap: 12,
+  marginTop: 20,
+};
+
+export const inlineStyle_441_16 = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  borderWidth: 1,
+  borderColor: '#64748B',
+  alignItems: 'center',
+};
+
+export const inlineStyle_445_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#64748B',
+};
+
+export const inlineStyle_448_16 = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  backgroundColor: '#007bff',
+  alignItems: 'center',
+};
+
+export const inlineStyle_452_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#fff',
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import {View} from 'react-native';
+import Contracts from '@controleonline/ui-contracts/src/react/components/contracts';
+
+const ContractsTab = ({client, customStyles, parentCompanyIri}) => {
+  return (
+    <View style={customStyles.tabContent}>
+      <Contracts client={client} parentCompanyIri={parentCompanyIri} />
+    </View>
+  );
+};
+
+export default ContractsTab;

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

@@ -0,0 +1,463 @@
+import { useStores } from '@store';
+import React, { useEffect, useState } from 'react';
+
+import {
+  Modal,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  View,
+  Keyboard,
+} from 'react-native';
+
+import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {useMessage} from '@controleonline/ui-common/src/react/components/MessageService';
+
+import {
+  inlineStyle_265_6,
+  inlineStyle_266_12,
+  inlineStyle_279_14,
+  inlineStyle_288_16,
+  inlineStyle_291_49,
+  inlineStyle_299_10,
+  inlineStyle_302_16,
+  inlineStyle_303_18,
+  inlineStyle_304_18,
+  inlineStyle_308_18,
+  inlineStyle_314_24,
+  inlineStyle_324_16,
+  inlineStyle_325_18,
+  inlineStyle_327_14,
+  inlineStyle_341_16,
+  inlineStyle_343_14,
+  inlineStyle_350_20,
+} from './DocumentsTab.styles';
+
+const DocumentsTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
+  const {showError, showSuccess, showDialog} = useMessage();
+  const [documents, setDocuments] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+  const [formData, setFormData] = useState({});
+  const peopleStore = useStores(state => state.people);
+  const peopleGetters = peopleStore.getters;
+  const { currentCompany } = peopleGetters;
+
+  const documentsStore = useStores(state => state.documents) || {};
+  const actionsDocuments = documentsStore.actions || {};
+  const documentsTypesStore = useStores(state => state.documentsTypes) || {};
+  const actionsDocumentsType = documentsTypesStore.actions || {};
+  const getters = documentsTypesStore.getters || {};
+  const { items = [] } = getters;
+
+  // Funções de máscara
+  const applyMask = (value, type) => {
+    if (!value) {
+      return '';
+    }
+    const numbers = value.replace(/\D/g, '');
+
+    const docTypeItem = items.find(item => item['@id'] === type);
+    const docType = docTypeItem?.documentType?.toUpperCase();
+
+    if (docType === 'CPF') {
+      // Máscara CPF: 000.000.000-00
+      return numbers
+        .slice(0, 11)
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+    }
+
+    if (docType === 'CNPJ') {
+      // Máscara CNPJ: 00.000.000/0000-00
+      return numbers
+        .slice(0, 14)
+        .replace(/(\d{2})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1/$2')
+        .replace(/(\d{4})(\d{1,2})$/, '$1-$2');
+    }
+
+    if (docType === 'RG') {
+      // Máscara RG: 00.000.000-0
+      return numbers
+        .slice(0, 9)
+        .replace(/(\d{2})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d{1})$/, '$1-$2');
+    }
+
+    if (docType === 'IE') {
+      // Máscara IE: 000.000.000.000 (varia por estado, usando formato genérico)
+      return numbers
+        .slice(0, 12)
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2');
+    }
+
+    if (docType === 'IM') {
+      // Máscara IM: 00.000.000-0 (varia por município, usando formato genérico)
+      return numbers
+        .slice(0, 9)
+        .replace(/(\d{2})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d)/, '$1.$2')
+        .replace(/(\d{3})(\d{1})$/, '$1-$2');
+    }
+
+    return value;
+  };
+
+  const removeMask = value => {
+    return value ? value.replace(/\D/g, '') : '';
+  };
+
+  useEffect(() => {
+    if (!client) return;
+    const rawDocuments = Array.isArray(client?.document)
+      ? client.document.map(d => ({
+        id: d.id || d['@id'],
+        type:
+          typeof d.documentType === 'object'
+            ? d.documentType?.['@id'] || d.documentType?.id || 'Documento'
+            : d.documentType || 'Documento',
+        value: d.document,
+      }))
+      : [];
+
+    // Always load the full document_types catalog so the type selector is available
+    // for new companies/people (no company_document links yet). Filtering by peopleType
+    // happens in getAvailableDocumentTypes.
+    actionsDocumentsType.getItems({});
+    setDocuments(rawDocuments);
+  }, [client, currentCompany]);
+
+  const openModal = (item = null) => {
+    setEditingItem(item);
+    setFormData(item || {});
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setEditingItem(null);
+    setFormData({});
+  };
+
+  const normalizePeopleType = (value) => {
+    const v = String(value || '').toLowerCase();
+    if (v === 'f' || v === 'fisica' || v === 'pf' || v === 'pessoa_fisica') return 'F';
+    if (v === 'j' || v === 'juridica' || v === 'pj' || v === 'pessoa_juridica') return 'J';
+    return String(value || '');
+  };
+
+  const getAvailableDocumentTypes = () => {
+    const clientPeopleType = normalizePeopleType(client?.peopleType);
+    const availableTypes = items.filter(type => {
+      const typePeople = normalizePeopleType(type.peopleType);
+      // If type has no peopleType, keep it available (catalog may omit the field)
+      if (!typePeople) return true;
+      return typePeople === clientPeopleType;
+    });
+
+    // Se estiver editando, permite o tipo atual + tipos não utilizados
+    if (editingItem) {
+      return availableTypes.filter(type => {
+        const isCurrentType = type['@id'] === editingItem.type;
+        const isAlreadyUsed = documents.some(doc => doc.type === type['@id']);
+        return isCurrentType || !isAlreadyUsed;
+      });
+    }
+
+    // Se estiver adicionando, mostra apenas tipos não utilizados
+    return availableTypes.filter(type => {
+      return !documents.some(doc => doc.type === type['@id']);
+    });
+  };
+
+  const getFilteredDocuments = () => {
+    const isPessoaFisica =
+      client?.peopleType === 'F' || client?.peopleType === 'fisica';
+    const isPessoaJuridica =
+      client?.peopleType === 'J' || client?.peopleType === 'juridica';
+
+    return documents.filter(doc => {
+      const docTypeItem = items.find(item => item['@id'] === doc.type);
+      const docType = docTypeItem?.documentType?.toUpperCase();
+
+      if (isPessoaFisica) {
+        return docType === 'RG' || docType === 'CPF';
+      }
+
+      if (isPessoaJuridica) {
+        return docType === 'CNPJ' || docType === 'IE' || docType === 'IM';
+      }
+
+      return true;
+    });
+  };
+  const handleSave = async () => {
+    if (!formData.value || !formData.type) {
+      showError('Documento e tipo são obrigatórios.');
+      return;
+    }
+
+    if (!editingItem) {
+      const existingDoc = documents.find(doc => doc.type === formData.type);
+      if (existingDoc) {
+        const selectedType = items.find(item => item['@id'] === formData.type);
+        showError(`Já existe um documento do tipo ${selectedType?.documentType}.`);
+        return;
+      }
+    }
+
+    try {
+      // Remove a máscara antes de salvar
+      const cleanValue = removeMask(formData.value);
+
+      const documentData = {
+        document: cleanValue,
+        documentType: formData.type,
+        people: client['@id'],
+      };
+
+      if (editingItem) {
+        documentData.id = editingItem.id;
+      }
+
+      await actionsDocuments.save(documentData);
+
+      const documentItem = {
+        id: editingItem?.id || Date.now(),
+        value: cleanValue,
+        type: formData.type,
+      };
+
+      const updatedDocuments = editingItem
+        ? documents.map(d => (d.id === editingItem.id ? documentItem : d))
+        : [...documents, documentItem];
+
+      setDocuments(updatedDocuments);
+      if (onUpdateClient) {
+        const fullDocumentData = updatedDocuments.map(d => ({
+          id: d.id,
+          '@id': d.id,
+          document: d.value,
+          documentType: d.type,
+        }));
+        onUpdateClient('document', fullDocumentData);
+      }
+
+      showSuccess(
+        `Documento ${editingItem ? 'atualizado' : 'adicionado'} com sucesso!`,
+      );
+      closeModal();
+    } catch (error) {
+      showError(
+        `Falha ao ${editingItem ? 'atualizar' : 'adicionar'} documento. Tente novamente.`,
+      );
+    }
+  };
+
+  const handleDelete = id => {
+    showDialog({
+      title: 'Confirmar exclusão',
+      message: 'Deseja realmente remover este item?',
+      confirmLabel: 'Remover',
+      cancelLabel: 'Cancelar',
+      onConfirm: async () => {
+        try {
+          await actionsDocuments.remove(id);
+          const updatedDocuments = documents.filter(d => d.id !== id);
+          setDocuments(updatedDocuments);
+          if (onUpdateClient) {
+            const fullDocumentData = updatedDocuments.map(d => ({
+              id: d.id,
+              '@id': d.id,
+              document: d.value,
+              documentType: d.type,
+            }));
+            onUpdateClient('document', fullDocumentData);
+          }
+          showSuccess('Documento removido com sucesso!');
+        } catch (error) {
+          console.log('Delete error:', error);
+          showError('Falha ao remover documento. Tente novamente.');
+        }
+      },
+    });
+  };
+
+  const renderModal = () => (
+    <AnimatedModal
+      visible={showModal}
+      onRequestClose={closeModal}
+      style={inlineStyle_265_6}>
+      <View style={inlineStyle_266_12}>
+        {/* Header */}
+        <View style={inlineStyle_279_14}>
+          <Text style={inlineStyle_288_16}>
+            {editingItem ? 'Editar Documento' : 'Adicionar Documento'}
+          </Text>
+          <TouchableOpacity onPress={closeModal} style={inlineStyle_291_49}>
+            <Icon name="close" size={20} color="#64748B" />
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView
+          style={inlineStyle_299_10}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag">
+          <View style={inlineStyle_302_16}>
+            <Text style={inlineStyle_303_18}>Tipo</Text>
+            <View style={inlineStyle_304_18}>
+              {getAvailableDocumentTypes().map(type => (
+                <TouchableOpacity
+                  key={type.documentType}
+                  style={inlineStyle_308_18({
+                    formData: formData,
+                    type: type,
+                  })}
+                  onPress={() => setFormData({ ...formData, type: type['@id'] })}>
+                  <Text style={inlineStyle_314_24({
+                    formData: formData,
+                    type: type,
+                  })}>
+                    {type.documentType}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          <View style={inlineStyle_324_16}>
+            <Text style={inlineStyle_325_18}>Número do Documento</Text>
+            <TextInput
+              style={inlineStyle_327_14}
+              placeholder="Número do documento"
+              value={applyMask(formData.value || '', formData.type)}
+              onChangeText={text => {
+                const cleanText = removeMask(text);
+                setFormData({ ...formData, value: cleanText });
+              }}
+              keyboardType="numeric"
+            />
+          </View>
+
+          <View style={inlineStyle_341_16}>
+            <TouchableOpacity
+              style={inlineStyle_343_14}
+              onPress={() => {
+                Keyboard.dismiss();
+                closeModal();
+              }}>
+              <Text style={inlineStyle_350_20}>Cancelar</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={customStyles.saveButton}
+              onPress={() => {
+                Keyboard.dismiss();
+                handleSave();
+              }}>
+              <FeatherIcon
+                name="save"
+                size={16}
+                color={customStyles.iconButtonPrimaryIcon.color}
+              />
+              <Text style={customStyles.saveButtonText}>Salvar</Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </View>
+    </AnimatedModal>
+  );
+  return (
+    <>
+      <View style={customStyles.tabContent}>
+        <View style={customStyles.section}>
+          <View style={customStyles.sectionHeader}>
+            <Text style={customStyles.sectionTitle} numberOfLines={1}>
+              Documentos
+            </Text>
+            {isEditing && (
+              <TouchableOpacity
+                onPress={() => openModal()}
+                style={customStyles.iconButtonPrimary}>
+                <Icon
+                  name="add"
+                  size={20}
+                  color={customStyles.iconButtonPrimaryIcon.color}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+          {getFilteredDocuments().length === 0 ? (
+            <Text style={customStyles.emptyText}>
+              Nenhum documento cadastrado
+            </Text>
+          ) : (
+            getFilteredDocuments().map(doc => (
+              <View
+                key={doc.id}
+                style={[
+                  customStyles.listItem,
+                  customStyles.listItemWithActions,
+                ]}>
+                <View style={customStyles.itemContent}>
+                  <Icon
+                    name="description"
+                    size={20}
+                    color={customStyles.cardItemIcon.color}
+                  />
+                  <View>
+                    <Text style={customStyles.itemText}>
+                      {applyMask(String(doc.value || ''), doc.type)}
+                    </Text>
+                    <Text style={customStyles.itemSubtext}>
+                      {items.find(i => i['@id'] === doc.type)?.documentType ||
+                        String(doc.type || '')}
+                    </Text>
+                  </View>
+                </View>
+                {isEditing && (
+                  <View
+                    style={[
+                      customStyles.itemActions,
+                      customStyles.itemActionsPinned,
+                    ]}>
+                    <TouchableOpacity
+                      onPress={() => openModal(doc)}
+                      style={customStyles.iconButtonGhost}>
+                      <FeatherIcon
+                        name="edit-2"
+                        size={16}
+                        color={customStyles.iconButtonGhostIcon.color}
+                      />
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      onPress={() => handleDelete(doc.id)}
+                      style={customStyles.iconButtonGhost}>
+                      <FeatherIcon
+                        name="trash-2"
+                        size={16}
+                        color={customStyles.iconButtonGhostIcon.color}
+                      />
+                    </TouchableOpacity>
+                  </View>
+                )}
+              </View>
+            ))
+          )}
+        </View>
+      </View>
+      {renderModal()}
+    </>
+  );
+};
+
+export default DocumentsTab;
+