@controleonline/ui-customers 1.0.81 → 1.0.82

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

@@ -131,3 +131,126 @@ export const inlineStyle_350_20 = {
   fontWeight: '600',
   color: '#64748B',
 };
+
+export const attachmentListStyle = {
+  marginTop: 8,
+  gap: 8,
+};
+
+export const attachmentHeaderStyle = {
+  marginBottom: 4,
+};
+
+export const attachmentSubtextStyle = {
+  fontSize: 12,
+  color: '#64748B',
+  fontWeight: '600',
+};
+
+export const emptyAttachmentTextStyle = {
+  fontSize: 13,
+  color: '#94A3B8',
+  marginVertical: 4,
+};
+
+export const attachmentCardStyle = {
+  borderWidth: 1,
+  borderColor: '#E2E8F0',
+  borderRadius: 10,
+  padding: 10,
+  backgroundColor: '#F8FAFC',
+  marginBottom: 6,
+};
+
+export const attachmentMetaStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 8,
+  marginBottom: 6,
+};
+
+export const attachmentNameStyle = {
+  fontSize: 14,
+  color: '#0F172A',
+  fontWeight: '600',
+};
+
+export const attachmentActionsStyle = {
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: 6,
+};
+
+export const attachmentActionButtonStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 4,
+  paddingHorizontal: 8,
+  paddingVertical: 6,
+  borderRadius: 8,
+  backgroundColor: '#EEF2FF',
+};
+
+export const attachmentActionLabelStyle = {
+  fontSize: 12,
+  color: '#334155',
+  fontWeight: '500',
+};
+
+export const previewBackdropStyle = {
+  flex: 1,
+  backgroundColor: 'rgba(15, 23, 42, 0.55)',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: 16,
+};
+
+export const previewCardStyle = {
+  backgroundColor: '#fff',
+  borderRadius: 16,
+  width: '100%',
+  maxWidth: 640,
+  maxHeight: '90%',
+  overflow: 'hidden',
+};
+
+export const previewHeaderStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  borderBottomWidth: 1,
+  borderBottomColor: '#E2E8F0',
+};
+
+export const previewTitleStyle = {
+  flex: 1,
+  fontSize: 16,
+  fontWeight: '700',
+  color: '#0F172A',
+  marginRight: 12,
+};
+
+export const previewContentStyle = {
+  padding: 16,
+  alignItems: 'center',
+};
+
+export const previewImageStyle = {
+  width: '100%',
+  height: 360,
+  maxHeight: 480,
+};
+
+export const previewFallbackStyle = {
+  alignItems: 'center',
+  gap: 12,
+  paddingVertical: 24,
+};
+
+export const previewFallbackTextStyle = {
+  fontSize: 14,
+  color: '#64748B',
+  textAlign: 'center',
+};

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

@@ -0,0 +1,203 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+  Platform,
+} from 'react-native';
+import { Picker } from '@react-native-picker/picker';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {
+  formatDateInput,
+  LINK_TYPE_OPTIONS,
+  PEOPLE_TYPE_OPTIONS,
+  normalizePeopleType,
+} from './employeesTabHelpers';
+import {
+  inlineStyle_281_10,
+  inlineStyle_294_12,
+  inlineStyle_303_18,
+  inlineStyle_308_14,
+  inlineStyle_321_12,
+  inlineStyle_324_18,
+  inlineStyle_326_16,
+  inlineStyle_338_16,
+  inlineStyle_351_18,
+  inlineStyle_353_16,
+  inlineStyle_365_16,
+  inlineStyle_378_18,
+  inlineStyle_380_16,
+  inlineStyle_389_16,
+  inlineStyle_408_18,
+  inlineStyle_422_18,
+  inlineStyle_424_16,
+  inlineStyle_433_16,
+  inlineStyle_446_18,
+  modalFooterRow,
+  modalCancelButton,
+  modalCancelButtonText,
+  modalSaveButton,
+  modalSaveButtonDisabled,
+  modalSaveButtonText,
+} from './EmployeesTab.styles';
+
+const SCROLL_MAX_HEIGHT = Math.min(420, Math.round(Dimensions.get('window').height * 0.45));
+
+/**
+ * Create-collaborator form fields for EmployeesTab modal (app-community#625 / #686).
+ */
+const EmployeeCreateFormFields = ({
+  formData,
+  setFormData,
+  linkTypeOptions,
+  isSaving,
+  onClose,
+  onSave,
+  title,
+}) => {
+  const pickerMode = Platform.OS === 'android' ? 'dropdown' : undefined;
+  const isPJ = normalizePeopleType(formData.peopleType) === 'J';
+
+  return (
+    <View style={inlineStyle_281_10}>
+      <View style={inlineStyle_294_12}>
+        <Text style={inlineStyle_303_18}>{title}</Text>
+        <TouchableOpacity onPress={onClose} style={inlineStyle_308_14}>
+          <Icon name="close" size={20} color="#64748B" />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView
+        style={[inlineStyle_321_12, { maxHeight: SCROLL_MAX_HEIGHT }]}
+        contentContainerStyle={{ paddingBottom: 8 }}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+        showsVerticalScrollIndicator>
+        <View style={inlineStyle_324_18}>
+          <Text style={inlineStyle_326_16}>
+            {isPJ ? 'Razão Social *' : 'Nome *'}
+          </Text>
+          <TextInput
+            value={formData.name}
+            onChangeText={text =>
+              setFormData(prev => ({ ...prev, name: text }))
+            }
+            placeholder="Digite o nome"
+            style={inlineStyle_338_16}
+            placeholderTextColor="#6c757d"
+          />
+        </View>
+
+        <View style={inlineStyle_351_18}>
+          <Text style={inlineStyle_353_16}>
+            {isPJ ? 'Nome Fantasia *' : 'Apelido *'}
+          </Text>
+          <TextInput
+            value={formData.alias}
+            onChangeText={text =>
+              setFormData(prev => ({ ...prev, alias: text }))
+            }
+            placeholder="Digite o apelido"
+            style={inlineStyle_365_16}
+            placeholderTextColor="#6c757d"
+          />
+        </View>
+
+        <View style={inlineStyle_378_18}>
+          <Text style={inlineStyle_380_16}>Tipo *</Text>
+          <View style={inlineStyle_389_16}>
+            <Picker
+              selectedValue={normalizePeopleType(formData.peopleType)}
+              onValueChange={value =>
+                setFormData(prev => ({
+                  ...prev,
+                  peopleType: normalizePeopleType(value),
+                }))
+              }
+              mode={pickerMode}
+              style={inlineStyle_408_18}>
+              {PEOPLE_TYPE_OPTIONS.map(option => (
+                <Picker.Item
+                  key={option.value}
+                  label={option.label}
+                  value={option.value}
+                />
+              ))}
+            </Picker>
+          </View>
+        </View>
+
+        <View style={inlineStyle_378_18}>
+          <Text style={inlineStyle_380_16}>
+            {isPJ ? 'Data de Fundação' : 'Data de Nascimento'}
+          </Text>
+          <View style={inlineStyle_389_16}>
+            <Icon name="calendar-today" size={20} color="#6c757d" />
+            <TextInput
+              value={formData.foundationDateBr}
+              onChangeText={text =>
+                setFormData(prev => ({
+                  ...prev,
+                  foundationDateBr: formatDateInput(text),
+                }))
+              }
+              placeholder="DD/MM/AAAA"
+              style={inlineStyle_408_18}
+              placeholderTextColor="#6c757d"
+              keyboardType="numeric"
+            />
+          </View>
+        </View>
+
+        <View style={inlineStyle_422_18}>
+          <Text style={inlineStyle_424_16}>Tipo de vínculo</Text>
+          <View style={inlineStyle_433_16}>
+            <Picker
+              selectedValue={formData.linkType}
+              onValueChange={value =>
+                setFormData(prev => ({ ...prev, linkType: value }))
+              }
+              mode={pickerMode}
+              style={inlineStyle_408_18}>
+              {(linkTypeOptions.length
+                ? linkTypeOptions
+                : LINK_TYPE_OPTIONS.map(o => ({ value: o.value, label: o.value }))
+              ).map(option => (
+                <Picker.Item
+                  key={option.value}
+                  label={option.label || option.value}
+                  value={option.value}
+                />
+              ))}
+            </Picker>
+          </View>
+        </View>
+      </ScrollView>
+
+      <View style={modalFooterRow}>
+        <TouchableOpacity
+          onPress={onClose}
+          disabled={isSaving}
+          style={modalCancelButton}>
+          <Text style={modalCancelButtonText}>Cancelar</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={onSave}
+          disabled={isSaving}
+          style={[modalSaveButton, isSaving && modalSaveButtonDisabled]}>
+          {isSaving ? (
+            <ActivityIndicator size="small" color="#fff" />
+          ) : (
+            <Text style={modalSaveButtonText}>Salvar</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default EmployeeCreateFormFields;

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

@@ -6,21 +6,15 @@ import {
   Platform,
   ScrollView,
   Text,
-  TextInput,
   TouchableOpacity,
   View,
 } from 'react-native';
 
-import { Picker } from '@react-native-picker/picker';
 import FeatherIcon from 'react-native-vector-icons/Feather';
-import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { useStore, useStores } from '@store';
 import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import {
-  uppercaseText,
-} from '@controleonline/ui-common/src/react/utils/entityDisplay';
 import {
   buildEmployeeContactsFromPeopleLinks,
   buildPeopleLinkReadParams,
@@ -28,43 +22,22 @@ import {
 
 import {
   inlineStyle_243_18,
-  inlineStyle_279_8,
-  inlineStyle_281_10,
-  inlineStyle_294_12,
-  inlineStyle_303_18,
-  inlineStyle_308_14,
-  inlineStyle_321_12,
-  inlineStyle_324_18,
-  inlineStyle_326_16,
-  inlineStyle_338_16,
-  inlineStyle_351_18,
-  inlineStyle_353_16,
-  inlineStyle_365_16,
-  inlineStyle_378_18,
-  inlineStyle_380_16,
-  inlineStyle_389_16,
-  inlineStyle_408_18,
-  inlineStyle_422_18,
-  inlineStyle_424_16,
-  inlineStyle_433_16,
-  inlineStyle_446_18,
-  inlineStyle_460_12,
-  inlineStyle_472_14,
-  inlineStyle_480_20,
 } from './EmployeesTab.styles';
 
 import {
   extractId,
   normalizeIdentityValue,
   extractPeopleMediaUrl,
-  formatDateInput,
   parseBrDateToYmd,
   LINK_TYPE_OPTIONS,
   resolveEmployeeContactLinkType,
+  formatEmployeeContactTitle,
+  formatEmployeeContactMeta,
   buildEmployeeCreatePayload,
 } from './employeesTabHelpers';
-import EmployeeContactRow from './EmployeeContactRow';
+import EmployeeCreateFormFields from './EmployeeCreateFormFields';
 import {useEmployeeUnlink} from './useEmployeeUnlink';
+import EmployeeContactRow from './EmployeeContactRow';
 
 
 export {
@@ -97,6 +70,7 @@ const EmployeesTab = ({
     alias: '',
     foundationDateBr: '',
     linkType: 'employee',
+    peopleType: 'F',
   });
   const [linkTypeOptions, setLinkTypeOptions] = useState(
     LINK_TYPE_OPTIONS.map(option => ({
@@ -104,7 +78,6 @@ const EmployeesTab = ({
       label: '',
     })),
   );
-  const pickerMode = Platform.OS === 'android' ? 'dropdown' : undefined;
 
   const peopleStore = useStores(state => state.people) || {};
   const peopleActions = peopleStore.actions || {};
@@ -199,6 +172,7 @@ const EmployeesTab = ({
       alias: '',
       foundationDateBr: '',
       linkType: 'employee',
+      peopleType: 'F',
     });
   };
 
@@ -243,6 +217,7 @@ const EmployeesTab = ({
         foundationDate,
         linkType: formData.linkType,
         parentPeopleId,
+        peopleType: formData.peopleType,
       });
 
       await peopleActions.company(payload);
@@ -307,145 +282,16 @@ const EmployeesTab = ({
       <AnimatedModal
         visible={showModal}
         onRequestClose={handleCloseModal}
-        style={inlineStyle_279_8}>
-        <View
-          style={inlineStyle_281_10}>
-          <View
-            style={inlineStyle_294_12}>
-            <Text style={inlineStyle_303_18}>
-              {txt_title_addPeople}
-            </Text>
-            <TouchableOpacity
-              onPress={handleCloseModal}
-              style={inlineStyle_308_14}>
-              <Icon name="close" size={20} color="#64748B" />
-            </TouchableOpacity>
-          </View>
-
-          <ScrollView
-            style={inlineStyle_321_12}
-            keyboardShouldPersistTaps="handled"
-            keyboardDismissMode="on-drag">
-            <View style={inlineStyle_324_18}>
-              <Text
-                style={inlineStyle_326_16}>
-                Nome *
-              </Text>
-              <TextInput
-                value={formData.name}
-                onChangeText={text => setFormData(prev => ({ ...prev, name: uppercaseText(text) }))}
-                placeholder="Digite o nome"
-                style={inlineStyle_338_16}
-                placeholderTextColor="#6c757d"
-              />
-            </View>
-
-            <View style={inlineStyle_351_18}>
-              <Text
-                style={inlineStyle_353_16}>
-                Apelido *
-              </Text>
-              <TextInput
-                value={formData.alias}
-                onChangeText={text => setFormData(prev => ({ ...prev, alias: uppercaseText(text) }))}
-                placeholder="Digite o apelido"
-                style={inlineStyle_365_16}
-                placeholderTextColor="#6c757d"
-              />
-            </View>
-
-            <View style={inlineStyle_378_18}>
-              <Text
-                style={inlineStyle_380_16}>
-                Data de Nascimento
-              </Text>
-              <View
-                style={inlineStyle_389_16}>
-                <Icon name="calendar-today" size={20} color="#6c757d" />
-                <TextInput
-                  value={formData.foundationDateBr}
-                  onChangeText={text =>
-                    setFormData(prev => ({
-                      ...prev,
-                      foundationDateBr: formatDateInput(text),
-                    }))
-                  }
-                  placeholder="DD/MM/AAAA"
-                  style={inlineStyle_408_18}
-                  placeholderTextColor="#6c757d"
-                  keyboardType="numeric"
-                  maxLength={10}
-                />
-              </View>
-            </View>
-
-            <View style={inlineStyle_422_18}>
-              <Text
-                style={inlineStyle_424_16}>
-                Tipo de Vinculo
-              </Text>
-              <View
-                style={inlineStyle_433_16}>
-                <Picker
-                  selectedValue={formData.linkType}
-                  onValueChange={value =>
-                    setFormData(prev => ({ ...prev, linkType: value }))
-                  }
-                  mode={pickerMode}
-                  style={inlineStyle_446_18}>
-                  {linkTypeOptions.map(option => (
-                    <Picker.Item
-                      key={option.value}
-                      label={option.label}
-                      value={option.value}
-                    />
-                  ))}
-                </Picker>
-              </View>
-            </View>
-          </ScrollView>
-
-          <View
-            style={inlineStyle_460_12}>
-            <TouchableOpacity
-              onPress={() => {
-                Keyboard.dismiss();
-                handleCloseModal();
-              }}
-              style={inlineStyle_472_14}>
-              <Text style={inlineStyle_480_20}>
-                Cancelar
-              </Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              onPress={() => {
-                Keyboard.dismiss();
-                handleSaveEmployee();
-              }}
-              disabled={isSaving}
-              style={[
-                customStyles.saveButton,
-                isSaving && customStyles.saveButtonDisabled,
-              ]}>
-              {isSaving ? (
-                <ActivityIndicator
-                  size="small"
-                  color={customStyles.saveButtonText.color}
-                />
-              ) : (
-                <>
-                  <FeatherIcon
-                    name="save"
-                    size={16}
-                    color={customStyles.iconButtonPrimaryIcon.color}
-                  />
-                  <Text style={customStyles.saveButtonText}>Salvar</Text>
-                </>
-              )}
-            </TouchableOpacity>
-          </View>
-        </View>
+        style={{ maxHeight: '90%' }}>
+        <EmployeeCreateFormFields
+          formData={formData}
+          setFormData={setFormData}
+          linkTypeOptions={linkTypeOptions}
+          isSaving={isSaving}
+          onClose={handleCloseModal}
+          onSave={handleSaveEmployee}
+          title={txt_title_addPeople}
+        />
       </AnimatedModal>
     </>
   );