@controleonline/ui-customers 1.0.81

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

@@ -0,0 +1,236 @@
+import React, { useMemo, useCallback } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { colors } from '@controleonline/../../src/styles/colors';
+import styles from './ProductsTab.styles';
+import {
+  buildCreateProductParams,
+  buildInitialProviderPayload,
+  extractId,
+} from '../../domain/productSupplierFlow';
+
+const ROLE_LABELS = {
+  supplier: 'Fornecedor',
+  manufacturer: 'Fabricante',
+  distributor: 'Distribuidor',
+};
+
+const SUPPLY_TYPES = new Set(['component', 'feedstock', 'package']);
+
+const formatMoney = value => {
+  if (value === null || value === undefined || value === '') return '';
+
+  const parsed = Number(String(value).replace(',', '.'));
+  if (!Number.isFinite(parsed)) {
+    return String(value);
+  }
+
+  try {
+    return parsed.toLocaleString('pt-BR', {
+      style: 'currency',
+      currency: 'BRL',
+    });
+  } catch (error) {
+    return `R$ ${parsed.toFixed(2)}`;
+  }
+};
+
+const resolveProductContext = product => {
+  return SUPPLY_TYPES.has(String(product?.type || '').toLowerCase()) ? 'supplies' : 'products';
+};
+
+const getProductName = product =>
+  String(product?.product || `Produto #${product?.id || ''}`).trim();
+
+const getProductSubtitle = product => {
+  const parts = [];
+
+  if (product?.sku) {
+    parts.push(`SKU ${product.sku}`);
+  }
+
+  if (product?.type) {
+    parts.push(String(product.type).trim());
+  }
+
+  return parts.join(' | ');
+};
+
+const buildMeta = relation => {
+  const items = [];
+
+  if (relation?.costPrice) {
+    items.push({ label: 'Custo', value: formatMoney(relation.costPrice) });
+  }
+
+  if (relation?.supplierSku) {
+    items.push({ label: 'Cod. interno', value: relation.supplierSku });
+  }
+
+  if (relation?.leadTimeDays || relation?.leadTimeDays === 0) {
+    items.push({
+      label: 'Prazo',
+      value: `${relation.leadTimeDays} ${Number(relation.leadTimeDays) === 1 ? 'dia' : 'dias'}`,
+    });
+  }
+
+  if (relation?.priority || relation?.priority === 0) {
+    items.push({ label: 'Prioridade', value: String(relation.priority) });
+  }
+
+  return items;
+};
+
+const ProductsTab = ({ client, customStyles }) => {
+  const navigation = useNavigation();
+
+  const providerPayload = useMemo(
+    () => buildInitialProviderPayload(client),
+    [client?.id, client?.['@id'], client?.alias, client?.name, client?.peopleType],
+  );
+
+  const openCreateProduct = useCallback(() => {
+    const params = buildCreateProductParams(client);
+    if (!params) {
+      return;
+    }
+
+    navigation.push('ProductDetails', params);
+  }, [client, navigation]);
+
+  const relations = useMemo(() => {
+    const safeRelations = Array.isArray(client?.productPeople) ? [...client.productPeople] : [];
+
+    return safeRelations.sort((left, right) => {
+      const leftPriority = Number(left?.priority ?? 9999);
+      const rightPriority = Number(right?.priority ?? 9999);
+      if (leftPriority !== rightPriority) {
+        return leftPriority - rightPriority;
+      }
+
+      return getProductName(left?.product)
+        .toLowerCase()
+        .localeCompare(getProductName(right?.product).toLowerCase());
+    });
+  }, [client?.productPeople]);
+
+  const openProduct = relation => {
+    const productId = extractId(relation?.product?.id || relation?.product?.['@id']);
+    if (!productId) {
+      return;
+    }
+
+    navigation.push('ProductDetails', {
+      ProductId: productId,
+      context: resolveProductContext(relation?.product),
+    });
+  };
+
+  return (
+    <View style={customStyles.section}>
+      <View style={styles.sectionHeader}>
+        <View style={styles.sectionHeaderCopy}>
+          <Text style={customStyles.sectionTitle}>Produtos fornecidos</Text>
+          <Text style={styles.sectionSubtitle}>
+            {relations.length === 1
+              ? '1 produto vinculado a este fornecedor'
+              : `${relations.length} produtos vinculados a este fornecedor`}
+          </Text>
+        </View>
+
+        {providerPayload.id ? (
+          <TouchableOpacity
+            style={styles.addButton}
+            onPress={openCreateProduct}
+            activeOpacity={0.85}>
+            <Icon name="add" size={18} color="#FFFFFF" />
+            <Text style={styles.addButtonText}>Produto</Text>
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      {relations.length === 0 ? (
+        <View style={styles.emptyState}>
+          <Text style={customStyles.emptyText}>
+            Nenhum produto vinculado a este fornecedor.
+          </Text>
+
+          {providerPayload.id ? (
+            <TouchableOpacity
+              style={styles.emptyActionButton}
+              onPress={openCreateProduct}
+              activeOpacity={0.85}>
+              <Icon name="add-box" size={18} color="#FFFFFF" />
+              <Text style={styles.emptyActionButtonText}>Adicionar produto</Text>
+            </TouchableOpacity>
+          ) : null}
+        </View>
+      ) : (
+        relations.map(relation => {
+          const product = relation?.product || {};
+          const metadata = buildMeta(relation);
+          const productId = extractId(product?.id || product?.['@id']);
+
+          return (
+            <TouchableOpacity
+              key={String(relation?.id || `${productId || 'product'}-${relation?.priority || 0}`)}
+              style={styles.card}
+              onPress={() => openProduct(relation)}
+              disabled={!productId}
+              activeOpacity={0.85}>
+              <View style={styles.cardHeader}>
+                <View style={styles.iconWrap}>
+                  <Icon name="inventory-2" size={20} color={colors.primary} />
+                </View>
+
+                <View style={styles.cardBody}>
+                  <Text style={styles.cardTitle} numberOfLines={1}>
+                    {getProductName(product)}
+                  </Text>
+
+                  {getProductSubtitle(product) ? (
+                    <Text style={styles.cardSubtitle} numberOfLines={1}>
+                      {getProductSubtitle(product)}
+                    </Text>
+                  ) : null}
+                </View>
+
+                <Icon name="chevron-right" size={18} color="#94A3B8" />
+              </View>
+
+              <View style={styles.badgesRow}>
+                <View style={styles.primaryBadge}>
+                  <Text style={styles.primaryBadgeText}>
+                    {ROLE_LABELS[relation?.role] || relation?.role || 'Relacionamento'}
+                  </Text>
+                </View>
+
+                {product?.price ? (
+                  <View style={styles.secondaryBadge}>
+                    <Text style={styles.secondaryBadgeText}>
+                      {formatMoney(product.price)}
+                    </Text>
+                  </View>
+                ) : null}
+              </View>
+
+              {metadata.length > 0 ? (
+                <View style={styles.metaWrap}>
+                  {metadata.map(item => (
+                    <View key={`${relation?.id}-${item.label}`} style={styles.metaPill}>
+                      <Text style={styles.metaLabel}>{item.label}</Text>
+                      <Text style={styles.metaValue}>{item.value}</Text>
+                    </View>
+                  ))}
+                </View>
+              ) : null}
+            </TouchableOpacity>
+          );
+        })
+      )}
+    </View>
+  );
+};
+
+export default ProductsTab;

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

@@ -0,0 +1,143 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  sectionHeaderCopy: {
+    flex: 1,
+    minWidth: 0,
+    paddingRight: 12,
+  },
+  sectionSubtitle: {
+    marginTop: 4,
+    fontSize: 13,
+    color: '#64748B',
+  },
+  addButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    borderRadius: 999,
+    backgroundColor: '#2563EB',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  addButtonText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  emptyState: {
+    marginTop: 4,
+  },
+  emptyActionButton: {
+    marginTop: 12,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    borderRadius: 12,
+    backgroundColor: '#2563EB',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  emptyActionButtonText: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  card: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 14,
+    padding: 14,
+    backgroundColor: '#FFFFFF',
+    marginTop: 12,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconWrap: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    backgroundColor: '#EFF6FF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  cardBody: {
+    flex: 1,
+    minWidth: 0,
+  },
+  cardTitle: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#0F172A',
+  },
+  cardSubtitle: {
+    marginTop: 2,
+    fontSize: 13,
+    color: '#64748B',
+  },
+  badgesRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 12,
+  },
+  primaryBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: '#DBEAFE',
+  },
+  primaryBadgeText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#1D4ED8',
+  },
+  secondaryBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: '#F1F5F9',
+  },
+  secondaryBadgeText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#475569',
+  },
+  metaWrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 12,
+  },
+  metaPill: {
+    minWidth: 112,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 12,
+    backgroundColor: '#F8FAFC',
+  },
+  metaLabel: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: '#94A3B8',
+    textTransform: 'uppercase',
+  },
+  metaValue: {
+    marginTop: 3,
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#0F172A',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import {
+  extractId,
+  formatCommissionSubtitle,
+  resolveEffectiveCommission,
+} from './salesmanTabHelpers';
+
+const SalesmanCommissionBlock = ({
+  item,
+  displayCommission,
+  canEdit,
+  editingLinkId,
+  editForm,
+  setEditForm,
+  isSaving,
+  defaultLinksBySalesmanId,
+  openEdit,
+  cancelEdit,
+  saveEdit,
+  customStyles,
+}) => {
+  if (!displayCommission) {
+    return null;
+  }
+
+  const salesmanId = extractId(item?.company?.id || item?.company?.['@id']);
+  const defaultLink = defaultLinksBySalesmanId[salesmanId] || null;
+  const effective = resolveEffectiveCommission(item, defaultLink);
+  const linkId = extractId(item?.id || item?.['@id']);
+  const isEditingThis = editingLinkId === linkId;
+
+  if (isEditingThis && canEdit) {
+    return (
+      <View style={{ marginTop: 6, gap: 6 }} testID={`salesman-commission-edit-${linkId}`}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text style={customStyles.itemSubtext}>Comissão %</Text>
+          <TextInput
+            testID={`salesman-commission-input-${linkId}`}
+            value={editForm.comission}
+            onChangeText={text =>
+              setEditForm(prev => ({ ...prev, comission: text.replace(/[^\d.,]/g, '') }))
+            }
+            keyboardType="decimal-pad"
+            style={{
+              minWidth: 64,
+              borderWidth: 1,
+              borderColor: customStyles.itemSubtext?.color || '#D7E1EC',
+              borderRadius: 6,
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              color: customStyles.itemText?.color,
+            }}
+          />
+          <Text style={customStyles.itemSubtext}>Mín %</Text>
+          <TextInput
+            testID={`salesman-minimum-commission-input-${linkId}`}
+            value={editForm.minimumComission}
+            onChangeText={text =>
+              setEditForm(prev => ({
+                ...prev,
+                minimumComission: text.replace(/[^\d.,]/g, ''),
+              }))
+            }
+            keyboardType="decimal-pad"
+            style={{
+              minWidth: 64,
+              borderWidth: 1,
+              borderColor: customStyles.itemSubtext?.color || '#D7E1EC',
+              borderRadius: 6,
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              color: customStyles.itemText?.color,
+            }}
+          />
+        </View>
+        <View style={{ flexDirection: 'row', gap: 12 }}>
+          <TouchableOpacity
+            testID={`salesman-commission-save-${linkId}`}
+            onPress={() => saveEdit(item)}
+            disabled={isSaving}>
+            <Text style={[customStyles.itemSubtext, { fontWeight: '600' }]}>
+              {isSaving ? 'Salvando…' : 'Salvar'}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity testID={`salesman-commission-cancel-${linkId}`} onPress={cancelEdit}>
+            <Text style={customStyles.itemSubtext}>Cancelar</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={{ marginTop: 4, flexDirection: 'row', alignItems: 'center', gap: 6 }}
+      testID={`salesman-commission-${linkId}`}>
+      <Text
+        style={customStyles.itemSubtext}
+        testID={`salesman-commission-label-${linkId}`}>
+        {formatCommissionSubtitle(effective)}
+      </Text>
+      {canEdit ? (
+        <TouchableOpacity
+          testID={`salesman-commission-edit-btn-${linkId}`}
+          onPress={() => openEdit(item)}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+          <FeatherIcon
+            name="edit-2"
+            size={14}
+            color={customStyles.iconButtonGhostIcon?.color || '#6C7787'}
+          />
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+export default SalesmanCommissionBlock;

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

@@ -0,0 +1,208 @@
+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: 14,
+    paddingVertical: 12,
+    fontSize: 15,
+    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 client↔salesman people_link (MANAGER only).
+ */
+const SalesmanManageModal = ({
+  visible,
+  onClose,
+  editingLink,
+  formData,
+  setFormData,
+  salesmanOptions,
+  isSaving,
+  onSave,
+}) => {
+  const title = editingLink ? 'Editar vendedor' : 'Vincular vendedor';
+
+  return (
+    <AnimatedModal
+      visible={visible}
+      onRequestClose={onClose}
+      style={{ paddingHorizontal: 20 }}>
+      <View style={styles.modalCard} testID="salesman-manage-modal">
+        <View style={styles.modalHeader}>
+          <Text style={styles.modalTitle} testID="salesman-manage-modal-title">
+            {title}
+          </Text>
+          <TouchableOpacity
+            onPress={onClose}
+            accessibilityLabel="Fechar"
+            testID="salesman-manage-modal-close">
+            <Icon name="close" size={20} color="#64748B" />
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView keyboardShouldPersistTaps="handled">
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Vendedor</Text>
+            <View style={styles.pickerContainer} testID="salesman-manage-picker">
+              <Picker
+                selectedValue={formData.sellerIri}
+                enabled={!editingLink}
+                testID="salesman-manage-seller-picker"
+                onValueChange={value =>
+                  setFormData(previous => ({ ...previous, sellerIri: value }))
+                }>
+                <Picker.Item label="Selecione um vendedor" value="" />
+                {salesmanOptions.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
+              style={styles.input}
+              keyboardType="decimal-pad"
+              value={String(formData.commission ?? '')}
+              onChangeText={value =>
+                setFormData(previous => ({ ...previous, commission: value }))
+              }
+              placeholder="0"
+              testID="salesman-manage-commission-input"
+            />
+          </View>
+
+          <View style={styles.fieldGroup}>
+            <Text style={styles.fieldLabel}>Comissão mínima (%)</Text>
+            <TextInput
+              style={styles.input}
+              keyboardType="decimal-pad"
+              value={String(formData.minimumCommission ?? '')}
+              onChangeText={value =>
+                setFormData(previous => ({
+                  ...previous,
+                  minimumCommission: value,
+                }))
+              }
+              placeholder="0"
+              testID="salesman-manage-minimum-input"
+            />
+          </View>
+        </ScrollView>
+
+        <View style={styles.modalActions}>
+          <TouchableOpacity
+            style={styles.secondaryButton}
+            onPress={onClose}
+            disabled={isSaving}
+            testID="salesman-manage-cancel-btn">
+            <Text style={styles.secondaryButtonText}>Cancelar</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.primaryButton}
+            onPress={onSave}
+            disabled={isSaving}
+            testID="salesman-manage-save-btn">
+            {isSaving ? (
+              <ActivityIndicator size="small" color="#FFFFFF" />
+            ) : (
+              <Text style={styles.primaryButtonText}>Salvar</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </AnimatedModal>
+  );
+};
+
+export default SalesmanManageModal;