@controleonline/ui-customers 1.0.81

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

@@ -0,0 +1,172 @@
+export const inlineStyle_243_18 = {
+  paddingVertical: 20,
+  alignItems: 'center',
+};
+
+export const inlineStyle_279_8 = {
+  justifyContent: 'flex-end',
+};
+
+export const inlineStyle_281_10 = {
+  backgroundColor: '#fff',
+  borderTopLeftRadius: 24,
+  borderTopRightRadius: 24,
+  maxHeight: '85%',
+  width: '100%',
+  shadowColor: '#000',
+
+  shadowOffset: {
+    width: 0,
+    height: -4,
+  },
+
+  shadowOpacity: 0.1,
+  shadowRadius: 12,
+  elevation: 10,
+};
+
+export const inlineStyle_294_12 = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: 24,
+  paddingVertical: 20,
+  borderBottomWidth: 1,
+  borderBottomColor: '#F1F5F9',
+};
+
+export const inlineStyle_303_18 = {
+  fontSize: 20,
+  fontWeight: '700',
+  color: '#0F172A',
+};
+
+export const inlineStyle_308_14 = {
+  width: 32,
+  height: 32,
+  borderRadius: 16,
+  backgroundColor: '#F1F5F9',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_321_12 = {
+  padding: 24,
+};
+
+export const inlineStyle_324_18 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_326_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_338_16 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_351_18 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_353_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_365_16 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_378_18 = {
+  marginBottom: 8,
+};
+
+export const inlineStyle_380_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_389_16 = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_408_18 = {
+  flex: 1,
+  paddingVertical: 12,
+  paddingHorizontal: 12,
+  fontSize: 16,
+  color: '#212529',
+};
+
+export const inlineStyle_422_18 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_424_16 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_433_16 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  backgroundColor: '#f8f9fa',
+  overflow: 'hidden',
+};
+
+export const inlineStyle_446_18 = {
+  color: '#212529',
+};
+
+export const inlineStyle_460_12 = {
+  flexDirection: 'row',
+  padding: 20,
+  gap: 12,
+  borderTopWidth: 1,
+  borderTopColor: '#e9ecef',
+};
+
+export const inlineStyle_472_14 = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  borderWidth: 1,
+  borderColor: '#6c757d',
+  alignItems: 'center',
+};
+
+export const inlineStyle_480_20 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#6c757d',
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import FiscalCompanyConfig from '@controleonline/ui-accounting/src/react/components/fiscal/FiscalCompanyConfig';
+
+export default function FiscalTab({ client, navigation }) {
+  return <FiscalCompanyConfig company={client} navigation={navigation} />;
+}

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

@@ -0,0 +1,307 @@
+/**
+ * Franchise commission fields for client-details GeneralTab.
+ * Shown only when the viewed client is a franchisee of the main company
+ * (people_link linkType=franchisee). Editable for ROLE_SUPER / franchisor owner.
+ */
+import React, {useEffect, useMemo, useState} from 'react';
+
+import {
+  ActivityIndicator,
+  Modal,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import {useStore} from '@store';
+import {useMessage} from '@controleonline/ui-common/src/react/components/MessageService';
+import {
+  buildFranchiseeLinkParams,
+  canEditFranchiseCommission,
+  extractId,
+  formatMinimum,
+  formatPercent,
+  normalizeCommissionFields,
+  pickFranchiseeLink,
+  validateCommissionFields,
+} from './franchiseCommissionHelpers';
+import {createGeneralTabStyles} from './GeneralTab.styles';
+
+const FranchiseCommissionSection = ({
+  client,
+  parentCompanyIri = '',
+  isEditing = false,
+}) => {
+  const {showError, showSuccess} = useMessage();
+  const peopleLinkStore = useStore('people_link');
+  const peopleStore = useStore('people');
+  const authStore = useStore('auth');
+  const themeStore = useStore('theme');
+  const themeColors = themeStore.getters.colors;
+  const styles = useMemo(() => createGeneralTabStyles(themeColors), [themeColors]);
+
+  const peopleLinkActions = peopleLinkStore?.actions || {};
+  const currentCompany = peopleStore?.getters?.currentCompany || null;
+  const authUser = authStore?.getters?.user || null;
+
+  const clientId = extractId(client?.id || client?.['@id']);
+  const franchisorId =
+    extractId(parentCompanyIri) ||
+    extractId(currentCompany?.id || currentCompany?.['@id']);
+
+  const [link, setLink] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [form, setForm] = useState({comission: '', minimum_comission: ''});
+
+  const editable = canEditFranchiseCommission({
+    user: authUser,
+    currentCompany,
+  });
+
+  useEffect(() => {
+    if (!clientId || !franchisorId || !peopleLinkActions?.getItems) {
+      setLink(null);
+      return undefined;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    peopleLinkActions
+      .getItems(
+        buildFranchiseeLinkParams({
+          peopleId: clientId,
+          companyId: franchisorId,
+        }),
+      )
+      .then(items => {
+        if (cancelled) {
+          return;
+        }
+        const next = pickFranchiseeLink(items, {
+          peopleId: clientId,
+          companyId: franchisorId,
+        });
+        setLink(next);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setLink(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [clientId, franchisorId, peopleLinkActions]);
+
+  if (isLoading) {
+    return (
+      <View style={styles.fieldGroupLarge}>
+        <ActivityIndicator size="small" color={themeColors.primary} />
+      </View>
+    );
+  }
+
+  if (!link) {
+    return null;
+  }
+
+  const fields = normalizeCommissionFields(link);
+  const linkId = extractId(link?.id || link?.['@id']);
+
+  const openEdit = () => {
+    setForm({
+      comission: String(fields.comission ?? ''),
+      minimum_comission: String(fields.minimum_comission ?? ''),
+    });
+    setModalVisible(true);
+  };
+
+  const save = async () => {
+    const validated = validateCommissionFields({
+      comission: form.comission,
+      minimum_comission: form.minimum_comission,
+    });
+    if (!validated.ok) {
+      showError?.(
+        global.t?.t('people', 'error', validated.error) ||
+          'Valores de comissão inválidos',
+      );
+      return;
+    }
+    if (!linkId || !peopleLinkActions?.save) {
+      showError?.(
+        global.t?.t('users', 'error', 'saveUnavailable') || 'Salvar indisponível',
+      );
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const saved = await peopleLinkActions.save({
+        id: linkId,
+        comission: validated.comission,
+        minimum_comission: validated.minimum_comission,
+      });
+      setLink(prev => ({
+        ...(prev || {}),
+        ...(saved || {}),
+        comission: validated.comission,
+        minimum_comission: validated.minimum_comission,
+      }));
+      setModalVisible(false);
+      showSuccess?.(
+        global.t?.t('people', 'success', 'commissionUpdated') ||
+          'Comissão atualizada',
+      );
+    } catch {
+      showError?.(
+        global.t?.t('people', 'error', 'commissionUpdateFailed') ||
+          'Falha ao atualizar comissão',
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <View style={styles.fieldGroupLarge}>
+      <Text style={styles.fieldLabel}>
+        {global.t?.t('people', 'label', 'franchiseCommission') ||
+          'Comissão da franquia'}
+      </Text>
+
+      <View style={styles.switchRow}>
+        <View style={{flex: 1}}>
+          <Text style={styles.switchLabel}>
+            {global.t?.t('people', 'label', 'comission') || 'Comissão'}:{' '}
+            {formatPercent(fields.comission)}
+          </Text>
+          <Text style={[styles.switchLabel, {marginTop: 4}]}>
+            {global.t?.t('people', 'label', 'minimumComission') ||
+              'Comissão mínima'}
+            : {formatMinimum(fields.minimum_comission)}
+          </Text>
+        </View>
+        {isEditing && editable ? (
+          <TouchableOpacity
+            onPress={openEdit}
+            accessibilityLabel="edit-franchise-commission"
+            testID="edit-franchise-commission"
+            style={{padding: 8}}>
+            <FeatherIcon
+              name="edit-2"
+              size={16}
+              color={themeColors.inputIcon || themeColors.textSecondary}
+            />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      <Modal
+        visible={modalVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => !isSaving && setModalVisible(false)}>
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: 'rgba(0,0,0,0.4)',
+            justifyContent: 'center',
+            padding: 24,
+          }}>
+          <View
+            style={{
+              backgroundColor: themeColors.pageBackground || '#fff',
+              borderRadius: 12,
+              padding: 16,
+            }}>
+            <Text style={[styles.fieldLabel, {marginBottom: 12}]}>
+              {global.t?.t('people', 'title', 'editFranchiseCommission') ||
+                'Editar comissão da franquia'}
+            </Text>
+
+            <View style={styles.fieldGroup}>
+              <Text style={styles.fieldLabel}>
+                {global.t?.t('people', 'label', 'comission') ||
+                  'Comissão (%)'}
+              </Text>
+              <TextInput
+                value={form.comission}
+                onChangeText={text =>
+                  setForm(prev => ({...prev, comission: text.replace(',', '.')}))
+                }
+                keyboardType="decimal-pad"
+                style={styles.input}
+                testID="franchise-comission-input"
+                placeholderTextColor={themeColors.inputPlaceholderText}
+              />
+            </View>
+
+            <View style={styles.fieldGroup}>
+              <Text style={styles.fieldLabel}>
+                {global.t?.t('people', 'label', 'minimumComission') ||
+                  'Comissão mínima'}
+              </Text>
+              <TextInput
+                value={form.minimum_comission}
+                onChangeText={text =>
+                  setForm(prev => ({
+                    ...prev,
+                    minimum_comission: text.replace(',', '.'),
+                  }))
+                }
+                keyboardType="decimal-pad"
+                style={styles.input}
+                testID="franchise-minimum-comission-input"
+                placeholderTextColor={themeColors.inputPlaceholderText}
+              />
+            </View>
+
+            <TouchableOpacity
+              onPress={save}
+              disabled={isSaving}
+              testID="save-franchise-commission"
+              style={[
+                styles.saveButton,
+                isSaving ? styles.saveButtonDisabled : null,
+                {marginTop: 8},
+              ]}>
+              {isSaving ? (
+                <ActivityIndicator
+                  size="small"
+                  color={themeColors.buttonText}
+                />
+              ) : (
+                <Text style={styles.saveButtonText}>
+                  {global.t?.t('users', 'button', 'saveChanges') || 'Salvar'}
+                </Text>
+              )}
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => !isSaving && setModalVisible(false)}
+              disabled={isSaving}
+              style={{marginTop: 12, alignItems: 'center'}}>
+              <Text style={styles.switchLabel}>
+                {global.t?.t('common', 'button', 'cancel') || 'Cancelar'}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default FranchiseCommissionSection;

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

@@ -0,0 +1,215 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Picker } from '@react-native-picker/picker';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+const styles = {
+  modalCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 20,
+    width: '100%',
+    maxWidth: 420,
+    alignSelf: 'center',
+    gap: 18,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#0F172A',
+  },
+  fieldGroup: {
+    gap: 8,
+    marginBottom: 12,
+  },
+  fieldLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#334155',
+  },
+  pickerContainer: {
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#FFFFFF',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+  },
+  modalActions: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 8,
+  },
+  secondaryButton: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#94A3B8',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryButtonText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#475569',
+  },
+  primaryButton: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    backgroundColor: colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryButtonText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#FFFFFF',
+  },
+};
+
+/**
+ * Modal to link or edit a PJ↔PJ franchisee/filial people_link (MANAGER only).
+ */
+const FranchiseLinksManageModal = ({
+  visible,
+  onClose,
+  editingLink,
+  formData,
+  setFormData,
+  franchiseOptions,
+  isSaving,
+  onSave,
+}) => {
+  const title = editingLink ? 'Editar vínculo' : 'Vincular franquia/filial';
+
+  return (
+    <AnimatedModal
+      visible={visible}
+      onRequestClose={onClose}
+      style={{ paddingHorizontal: 20 }}>
+      <View style={styles.modalCard}>
+        <View style={styles.modalHeader}>
+          <Text style={styles.modalTitle}>{title}</Text>
+          <TouchableOpacity onPress={onClose} accessibilityLabel="Fechar">
+            <Icon name="close" size={20} color="#64748B" />
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView keyboardShouldPersistTaps="handled">
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Pessoa jurídica</Text>
+            <View style={styles.pickerContainer}>
+              <Picker
+                selectedValue={formData.linkedIri}
+                enabled={!editingLink}
+                onValueChange={value =>
+                  setFormData(previous => ({ ...previous, linkedIri: value }))
+                }
+                testID="franchise-link-people-picker">
+                <Picker.Item label="Selecione uma PJ" value="" />
+                {franchiseOptions.map(option => (
+                  <Picker.Item
+                    key={option.id}
+                    label={
+                      option.alias
+                        ? `${option.name} (${option.alias})`
+                        : option.name
+                    }
+                    value={option.iri}
+                  />
+                ))}
+              </Picker>
+            </View>
+          </View>
+
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Comissão (%)</Text>
+            <TextInput
+              value={formData.comission}
+              onChangeText={value =>
+                setFormData(previous => ({ ...previous, comission: value }))
+              }
+              keyboardType="decimal-pad"
+              style={styles.input}
+              testID="franchise-link-comission-input"
+            />
+          </View>
+
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Comissão mínima</Text>
+            <TextInput
+              value={formData.minimumComission}
+              onChangeText={value =>
+                setFormData(previous => ({ ...previous, minimumComission: value }))
+              }
+              keyboardType="decimal-pad"
+              style={styles.input}
+              testID="franchise-link-minimum-comission-input"
+            />
+          </View>
+
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Tipo de vínculo</Text>
+            <View style={styles.pickerContainer}>
+              <Picker
+                selectedValue={formData.linkType}
+                onValueChange={value =>
+                  setFormData(previous => ({ ...previous, linkType: value }))
+                }
+                testID="franchise-link-type-picker">
+                <Picker.Item label="Franquia" value="franchisee" />
+                <Picker.Item label="Filial" value="filial" />
+              </Picker>
+            </View>
+          </View>
+        </ScrollView>
+
+        <View style={styles.modalActions}>
+          <TouchableOpacity
+            style={styles.secondaryButton}
+            onPress={onClose}
+            disabled={isSaving}>
+            <Text style={styles.secondaryButtonText}>Cancelar</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.primaryButton}
+            onPress={onSave}
+            disabled={isSaving}
+            testID="franchise-link-save-btn">
+            {isSaving ? (
+              <ActivityIndicator size="small" color="#FFFFFF" />
+            ) : (
+              <Text style={styles.primaryButtonText}>Salvar</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </AnimatedModal>
+  );
+};
+
+export default FranchiseLinksManageModal;