@controleonline/ui-customers 1.0.81 → 1.0.83

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

@@ -3,8 +3,9 @@
  * PF: profession, position (cargo requires people_company_id)
  * PJ: sector, activity_branch
  * Issue: ControleOnline/app-community#377
+ * Fix React #185 on add: store actions via ref (app-community#816)
  */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Modal,
@@ -119,14 +120,24 @@ const PeopleCategoriesPanel = ({
   const { showError, showSuccess } = useMessage();
   const themeStore = useStore('theme');
   const themeColors = themeStore?.getters?.colors || {};
+  // Primitive theme tokens — object identity of getters.colors must not churn styles every render.
+  const themePrimary = themeColors?.primary || '#3B82F6';
+  const themeText = themeColors?.text || '#1E293B';
+  const themeTextSecondary = themeColors?.textSecondary || '#64748B';
+  const themeSurface = themeColors?.surface || '#fff';
+  const themeBorder = themeColors?.border || '#E2E8F0';
   const categoriesStore = useStore('categories');
   const peopleCategoriesStore = useStore('people_categories');
 
   const peopleType = String(client?.peopleType || 'J').toUpperCase();
   const isPF = peopleType === 'F';
   const contexts = isPF ? PF_CONTEXTS : PJ_CONTEXTS;
-  const peopleIri = useMemo(() => toPeopleIri(client), [client]);
   const peopleId = extractId(client);
+  // Primitive id only — client object identity must not re-trigger load (React #185).
+  const peopleIri = useMemo(
+    () => (peopleId != null ? `/people/${peopleId}` : null),
+    [peopleId],
+  );
 
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -137,72 +148,125 @@ const PeopleCategoriesPanel = ({
   const [categoryOptions, setCategoryOptions] = useState([]);
   const [loadingCategories, setLoadingCategories] = useState(false);
 
+  // Store objects / message helpers must not be effect deps (React #185 / Maximum update depth).
+  // Same pattern as Profile.js and ClassificationChips (#377).
+  const actionsRef = useRef({});
+  actionsRef.current = {
+    getPeopleCategories: peopleCategoriesStore?.actions?.getItems,
+    savePeopleCategory: peopleCategoriesStore?.actions?.save,
+    removePeopleCategory: peopleCategoriesStore?.actions?.remove,
+    getPeopleCategoriesItems: () => peopleCategoriesStore?.getters?.items,
+    getCategories: categoriesStore?.actions?.getItems,
+    saveCategory: categoriesStore?.actions?.save,
+    showError,
+    showSuccess,
+  };
+
+  const itemsLoadGenRef = useRef(0);
+
   const loadItems = useCallback(async () => {
-    if (!peopleId || !peopleCategoriesStore?.actions?.getItems) return;
+    if (!peopleId) return;
+    const getItems = actionsRef.current.getPeopleCategories;
+    if (!getItems) return;
+    const gen = ++itemsLoadGenRef.current;
     setLoading(true);
     try {
-      const result = await peopleCategoriesStore.actions.getItems({
+      const result = await getItems({
         people: peopleIri,
         itemsPerPage: 100,
       });
+      if (gen !== itemsLoadGenRef.current) return;
       const list = Array.isArray(result)
         ? result
-        : result?.['hydra:member'] || result?.items || peopleCategoriesStore.getters?.items || [];
+        : result?.['hydra:member'] ||
+          result?.items ||
+          actionsRef.current.getPeopleCategoriesItems?.() ||
+          [];
       setItems(Array.isArray(list) ? list : []);
     } catch (err) {
+      if (gen !== itemsLoadGenRef.current) return;
       console.warn('[PeopleCategoriesPanel] load failed', err);
       setItems([]);
     } finally {
-      setLoading(false);
+      if (gen === itemsLoadGenRef.current) {
+        setLoading(false);
+      }
     }
-  }, [peopleId, peopleIri, peopleCategoriesStore]);
+  }, [peopleId, peopleIri]);
 
   useEffect(() => {
     loadItems();
   }, [loadItems]);
 
-  const loadCategoryOptions = useCallback(
-    async context => {
-      if (!context || !categoriesStore?.actions?.getItems) {
-        setCategoryOptions([]);
-        return;
-      }
-      setLoadingCategories(true);
-      try {
-        const result = await categoriesStore.actions.getItems({
-          context,
-          itemsPerPage: 200,
-        });
-        const list = Array.isArray(result)
-          ? result
-          : result?.['hydra:member'] || result?.items || [];
-        setCategoryOptions(Array.isArray(list) ? list : []);
-      } catch (err) {
-        console.warn('[PeopleCategoriesPanel] categories load failed', err);
-        setCategoryOptions([]);
-      } finally {
+  // Guard concurrent category fetches (store isLoading re-renders must not re-enter).
+  const categoryLoadGenRef = useRef(0);
+  const lastCategoryContextRef = useRef('');
+
+  const loadCategoryOptions = useCallback(async context => {
+    if (!context) {
+      setCategoryOptions([]);
+      lastCategoryContextRef.current = '';
+      return;
+    }
+    // Skip if we already loaded this context and still have options in flight/done
+    if (lastCategoryContextRef.current === context) {
+      return;
+    }
+    const getCategories = actionsRef.current.getCategories;
+    if (!getCategories) {
+      setCategoryOptions([]);
+      return;
+    }
+    const gen = ++categoryLoadGenRef.current;
+    lastCategoryContextRef.current = context;
+    setLoadingCategories(true);
+    try {
+      const result = await getCategories({
+        context,
+        itemsPerPage: 200,
+      });
+      if (gen !== categoryLoadGenRef.current) return;
+      const list = Array.isArray(result)
+        ? result
+        : result?.['hydra:member'] || result?.items || [];
+      setCategoryOptions(Array.isArray(list) ? list : []);
+    } catch (err) {
+      if (gen !== categoryLoadGenRef.current) return;
+      console.warn('[PeopleCategoriesPanel] categories load failed', err);
+      setCategoryOptions([]);
+    } finally {
+      if (gen === categoryLoadGenRef.current) {
         setLoadingCategories(false);
       }
-    },
-    [categoriesStore],
-  );
+    }
+  }, []);
 
+  // Only fetch catalog when modal is open — avoids mount/parent churn loops.
   useEffect(() => {
+    if (!modalVisible) {
+      lastCategoryContextRef.current = '';
+      return;
+    }
     if (form.context) {
       loadCategoryOptions(form.context);
     } else {
       setCategoryOptions([]);
+      lastCategoryContextRef.current = '';
     }
-  }, [form.context, loadCategoryOptions]);
+  }, [modalVisible, form.context, loadCategoryOptions]);
 
   const openCreate = () => {
     setEditingItem(null);
+    lastCategoryContextRef.current = '';
+    categoryLoadGenRef.current += 1;
     const defaultContext = contexts[0]?.value || '';
     setForm({
       ...emptyForm(),
       context: defaultContext,
       startDateBr: formatDateBr(new Date().toISOString().slice(0, 10)),
     });
+    setCategoryOptions([]);
+    setLoadingCategories(false);
     setModalVisible(true);
   };
 
@@ -222,9 +286,13 @@ const PeopleCategoriesPanel = ({
   };
 
   const closeModal = () => {
+    categoryLoadGenRef.current += 1;
+    lastCategoryContextRef.current = '';
     setModalVisible(false);
     setEditingItem(null);
     setForm(emptyForm());
+    setCategoryOptions([]);
+    setLoadingCategories(false);
   };
 
   const handleSave = async () => {
@@ -249,9 +317,13 @@ const PeopleCategoriesPanel = ({
     setSaving(true);
     try {
       let categoryIri = form.categoryId ? `/categories/${form.categoryId}` : null;
+      const saveCategory = actionsRef.current.saveCategory;
+      const savePeopleCategory = actionsRef.current.savePeopleCategory;
+      const showErr = actionsRef.current.showError;
+      const showOk = actionsRef.current.showSuccess;
 
-      if (!categoryIri && form.categoryName && categoriesStore?.actions?.save) {
-        const created = await categoriesStore.actions.save({
+      if (!categoryIri && form.categoryName && saveCategory) {
+        const created = await saveCategory({
           name: form.categoryName.trim(),
           context: form.context,
         });
@@ -260,7 +332,7 @@ const PeopleCategoriesPanel = ({
       }
 
       if (!categoryIri) {
-        showError?.('Categoria obrigatória');
+        showErr?.('Categoria obrigatória');
         setSaving(false);
         return;
       }
@@ -280,40 +352,43 @@ const PeopleCategoriesPanel = ({
         }
       }
 
-      if (editingItem?.id && peopleCategoriesStore?.actions?.save) {
-        await peopleCategoriesStore.actions.save({
+      if (!savePeopleCategory) {
+        showErr?.('Store people_categories indisponível');
+        setSaving(false);
+        return;
+      }
+
+      if (editingItem?.id) {
+        await savePeopleCategory({
           ...payload,
           id: editingItem.id,
         });
-        showSuccess?.('Categoria atualizada');
-      } else if (peopleCategoriesStore?.actions?.save) {
-        await peopleCategoriesStore.actions.save(payload);
-        showSuccess?.('Categoria adicionada');
+        showOk?.('Categoria atualizada');
       } else {
-        showError?.('Store people_categories indisponível');
-        setSaving(false);
-        return;
+        await savePeopleCategory(payload);
+        showOk?.('Categoria adicionada');
       }
 
       closeModal();
       await loadItems();
     } catch (err) {
       console.error('[PeopleCategoriesPanel] save failed', err);
-      showError?.(err?.message || 'Falha ao salvar categoria');
+      actionsRef.current.showError?.(err?.message || 'Falha ao salvar categoria');
     } finally {
       setSaving(false);
     }
   };
 
   const handleDelete = async item => {
-    if (!item?.id || !peopleCategoriesStore?.actions?.remove) return;
+    const remove = actionsRef.current.removePeopleCategory;
+    if (!item?.id || !remove) return;
     setSaving(true);
     try {
-      await peopleCategoriesStore.actions.remove(item.id);
-      showSuccess?.('Categoria removida');
+      await remove(item.id);
+      actionsRef.current.showSuccess?.('Categoria removida');
       await loadItems();
     } catch (err) {
-      showError?.(err?.message || 'Falha ao remover');
+      actionsRef.current.showError?.(err?.message || 'Falha ao remover');
     } finally {
       setSaving(false);
     }
@@ -331,7 +406,7 @@ const PeopleCategoriesPanel = ({
       title: {
         fontSize: 15,
         fontWeight: '600',
-        color: themeColors?.text || '#1E293B',
+        color: themeText,
       },
       badgesWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
       badge: {
@@ -346,7 +421,7 @@ const PeopleCategoriesPanel = ({
       badgeText: { color: '#fff', fontSize: 12, fontWeight: '600', maxWidth: 160 },
       badgeMeta: { color: 'rgba(255,255,255,0.85)', fontSize: 10, marginLeft: 6 },
       empty: {
-        color: themeColors?.textSecondary || '#64748B',
+        color: themeTextSecondary,
         fontSize: 13,
         fontStyle: 'italic',
       },
@@ -356,7 +431,7 @@ const PeopleCategoriesPanel = ({
         paddingHorizontal: 10,
         paddingVertical: 6,
         borderRadius: 8,
-        backgroundColor: themeColors?.primary || '#3B82F6',
+        backgroundColor: themePrimary,
       },
       addBtnText: { color: '#fff', fontSize: 12, fontWeight: '600', marginLeft: 4 },
       modalOverlay: {
@@ -366,7 +441,7 @@ const PeopleCategoriesPanel = ({
         padding: 20,
       },
       modalCard: {
-        backgroundColor: themeColors?.surface || '#fff',
+        backgroundColor: themeSurface,
         borderRadius: 12,
         padding: 16,
         maxHeight: '85%',
@@ -374,23 +449,23 @@ const PeopleCategoriesPanel = ({
       modalTitle: {
         fontSize: 16,
         fontWeight: '700',
-        color: themeColors?.text || '#1E293B',
+        color: themeText,
         marginBottom: 12,
       },
       fieldLabel: {
         fontSize: 12,
         fontWeight: '600',
-        color: themeColors?.textSecondary || '#64748B',
+        color: themeTextSecondary,
         marginBottom: 4,
         marginTop: 10,
       },
       input: {
         borderWidth: 1,
-        borderColor: themeColors?.border || '#E2E8F0',
+        borderColor: themeBorder,
         borderRadius: 8,
         paddingHorizontal: 10,
         paddingVertical: Platform.OS === 'ios' ? 10 : 6,
-        color: themeColors?.text || '#1E293B',
+        color: themeText,
         fontSize: 14,
       },
       actionsRow: {
@@ -404,17 +479,17 @@ const PeopleCategoriesPanel = ({
         paddingVertical: 10,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: themeColors?.border || '#E2E8F0',
+        borderColor: themeBorder,
       },
       btnPrimary: {
         paddingHorizontal: 14,
         paddingVertical: 10,
         borderRadius: 8,
-        backgroundColor: themeColors?.primary || '#3B82F6',
+        backgroundColor: themePrimary,
       },
       btnText: { fontSize: 13, fontWeight: '600' },
     }),
-    [themeColors],
+    [themePrimary, themeText, themeTextSecondary, themeSurface, themeBorder],
   );
 
   if (!peopleId) return null;
@@ -432,7 +507,7 @@ const PeopleCategoriesPanel = ({
       </View>
 
       {loading ? (
-        <ActivityIndicator size="small" color={themeColors?.primary} />
+        <ActivityIndicator size="small" color={themePrimary} />
       ) : items.length === 0 ? (
         <Text style={styles.empty}>Nenhuma categoria associada</Text>
       ) : (
@@ -478,14 +553,19 @@ const PeopleCategoriesPanel = ({
               <View style={styles.input}>
                 <Picker
                   selectedValue={form.context}
-                  onValueChange={value =>
-                    setForm(prev => ({
-                      ...prev,
-                      context: value,
-                      categoryId: '',
-                      categoryName: '',
-                    }))
-                  }
+                  onValueChange={value => {
+                    // RN-web Picker often re-fires on reconcile; keep same prev to avoid #185.
+                    setForm(prev => {
+                      if (String(prev.context) === String(value)) return prev;
+                      lastCategoryContextRef.current = '';
+                      return {
+                        ...prev,
+                        context: value,
+                        categoryId: '',
+                        categoryName: '',
+                      };
+                    });
+                  }}
                 >
                   {contexts.map(c => (
                     <Picker.Item key={c.value} label={c.label} value={c.value} />
@@ -504,11 +584,14 @@ const PeopleCategoriesPanel = ({
                       const opt = categoryOptions.find(
                         o => String(extractId(o)) === String(value),
                       );
-                      setForm(prev => ({
-                        ...prev,
-                        categoryId: value,
-                        categoryName: opt?.name || prev.categoryName,
-                      }));
+                      setForm(prev => {
+                        if (String(prev.categoryId) === String(value)) return prev;
+                        return {
+                          ...prev,
+                          categoryId: value,
+                          categoryName: opt?.name || prev.categoryName,
+                        };
+                      });
                     }}
                   >
                     <Picker.Item label="— selecione —" value="" />
@@ -532,7 +615,7 @@ const PeopleCategoriesPanel = ({
                   onChangeText={text =>
                     setForm(prev => ({ ...prev, categoryName: text, categoryId: '' }))
                   }
-                  placeholderTextColor={themeColors?.textSecondary}
+                  placeholderTextColor={themeTextSecondary}
                 />
               )}
 
@@ -542,7 +625,7 @@ const PeopleCategoriesPanel = ({
                 value={form.startDateBr}
                 onChangeText={text => setForm(prev => ({ ...prev, startDateBr: text }))}
                 placeholder="01/01/2024"
-                placeholderTextColor={themeColors?.textSecondary}
+                placeholderTextColor={themeTextSecondary}
               />
 
               <Text style={styles.fieldLabel}>Data fim (opcional)</Text>
@@ -551,7 +634,7 @@ const PeopleCategoriesPanel = ({
                 value={form.endDateBr}
                 onChangeText={text => setForm(prev => ({ ...prev, endDateBr: text }))}
                 placeholder="vazio = atual"
-                placeholderTextColor={themeColors?.textSecondary}
+                placeholderTextColor={themeTextSecondary}
               />
 
               {form.context === 'position' && (
@@ -568,7 +651,7 @@ const PeopleCategoriesPanel = ({
                         ? `Padrão: ${extractId(parentCompanyIri)}`
                         : 'ID da empresa'
                     }
-                    placeholderTextColor={themeColors?.textSecondary}
+                    placeholderTextColor={themeTextSecondary}
                     keyboardType="numeric"
                   />
                 </>
@@ -576,7 +659,7 @@ const PeopleCategoriesPanel = ({
 
               <View style={styles.actionsRow}>
                 <TouchableOpacity style={styles.btnSecondary} onPress={closeModal}>
-                  <Text style={[styles.btnText, { color: themeColors?.text }]}>Cancelar</Text>
+                  <Text style={[styles.btnText, { color: themeText }]}>Cancelar</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={styles.btnPrimary}

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

@@ -73,7 +73,7 @@ const SalesmanTab = ({
   const currentCompanyId = extractId(
     peopleGetters?.currentCompany?.id ||
       peopleGetters?.currentCompany?.['@id'] ||
-      peopleGetters?.defaultCompany?.id,
+      peopleGetters?.mainCompany?.id,
   );
 
   const appType = useMemo(() => resolveAppType(), []);

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

@@ -15,6 +15,9 @@ import {
   extractId,
   toTimezoneItem,
 } from './usersTabHelpers';
+import {
+  PASSWORD_HELP_LINES,
+} from '@controleonline/ui-common/src/react/utils/passwordPolicy';
 import {
   inlineStyle_174_6,
   inlineStyle_175_12,
@@ -128,6 +131,17 @@ const UserFormModal = ({
           <TouchableOpacity onPress={onClose} style={inlineStyle_200_49}>
             <Icon name="close" size={20} color="#64748B" />
           </TouchableOpacity>
+
+          <View style={{marginBottom: 12, padding: 10, borderRadius: 8, backgroundColor: '#F8FAFC', borderWidth: 1, borderColor: '#E2E8F0'}}>
+            <Text style={{fontSize: 13, fontWeight: '600', color: '#334155', marginBottom: 4}}>
+              Requisitos da senha
+            </Text>
+            {PASSWORD_HELP_LINES.map(line => (
+              <Text key={line} style={{fontSize: 12, color: '#64748B', lineHeight: 18}}>
+                • {line}
+              </Text>
+            ))}
+          </View>
         </View>
 
         <ScrollView
@@ -286,10 +300,20 @@ const UserFormModal = ({
         </ScrollView>
 
         <View style={inlineStyle_339_16}>
-          <TouchableOpacity onPress={onClose} style={inlineStyle_341_14}>
+          <TouchableOpacity
+            onPress={onClose}
+            style={inlineStyle_341_14}
+            accessibilityLabel="Cancelar"
+            accessibilityRole="button"
+            testID="user-form-cancel">
             <Text style={{color: '#64748B', fontWeight: '600'}}>Cancelar</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={onSave} style={inlineStyle_348_20}>
+          <TouchableOpacity
+            onPress={onSave}
+            style={inlineStyle_348_20}
+            accessibilityLabel="Salvar"
+            accessibilityRole="button"
+            testID="user-form-save">
             <Text style={{color: '#FFFFFF', fontWeight: '600'}}>Salvar</Text>
           </TouchableOpacity>
         </View>

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

@@ -10,6 +10,10 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useStores } from '@store';
 import {useMessage} from '@controleonline/ui-common/src/react/components/MessageService';
+import {
+  mapPasswordErrorMessage,
+  validatePasswordClient,
+} from '@controleonline/ui-common/src/react/utils/passwordPolicy';
 
 
 import {
@@ -116,13 +120,17 @@ const UsersTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
 
   const handleSave = async () => {
     if (!editingItem) {
-      if (formData.password !== formData.confirmPassword) {
-        showError('As senhas não coincidem.');
+      if (!formData.username) {
+        showError('Nome de usuário e senha são obrigatórios.');
         return;
       }
 
-      if (!formData.username || !formData.password) {
-        showError('Nome de usuário e senha são obrigatórios.');
+      const createPasswordError = validatePasswordClient(
+        formData.password,
+        formData.confirmPassword,
+      );
+      if (createPasswordError) {
+        showError(createPasswordError);
         return;
       }
 
@@ -159,20 +167,20 @@ const UsersTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
         showSuccess('Usuário criado com sucesso!');
         closeModal();
       } catch (error) {
-        showError(extractErrorMessage(error) || 'Falha ao criar usuário. Tente novamente.');
+        showError(
+          mapPasswordErrorMessage(
+            extractErrorMessage(error) || 'Falha ao criar usuário. Tente novamente.',
+          ),
+        );
       }
     } else {
       try {
-        if (!String(formData.password || '').trim()) {
-          showError('Nova senha é obrigatória.');
-          return;
-        }
-
-        if (
-          formData.password &&
-          formData.password !== formData.confirmPassword
-        ) {
-          showError('As senhas não coincidem.');
+        const changePasswordError = validatePasswordClient(
+          formData.password,
+          formData.confirmPassword,
+        );
+        if (changePasswordError) {
+          showError(changePasswordError);
           return;
         }
 
@@ -200,7 +208,7 @@ const UsersTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
         showSuccess('Senha do usuário atualizada com sucesso!');
         closeModal();
       } catch (error) {
-        showError(extractErrorMessage(error) || 'Falha ao atualizar usuário. Tente novamente.');
+        showError(mapPasswordErrorMessage(extractErrorMessage(error) || 'Falha ao atualizar usuário. Tente novamente.'));
       }
     }
   };
@@ -221,7 +229,7 @@ const UsersTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
 
       showSuccess('Chave de API copiada com sucesso!');
     } catch (error) {
-      showError(extractErrorMessage(error) || 'Nao foi possivel copiar a chave de API.');
+      showError(mapPasswordErrorMessage(extractErrorMessage(error) || 'Nao foi possivel copiar a chave de API.'));
     }
   };
 
@@ -295,7 +303,7 @@ const UsersTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
           syncUsers(updatedUsers);
           showSuccess('Usuário removido com sucesso!');
         } catch (error) {
-          showError(extractErrorMessage(error) || 'Falha ao remover usuário. Tente novamente.');
+          showError(mapPasswordErrorMessage(extractErrorMessage(error) || 'Falha ao remover usuário. Tente novamente.'));
         }
       },
     });
@@ -335,7 +343,10 @@ const UsersTab = ({ client, customStyles, isEditing, onUpdateClient }) => {
             {isEditing && (
               <TouchableOpacity
                 onPress={() => openModal()}
-                style={customStyles.iconButtonPrimary}>
+                style={customStyles.iconButtonPrimary}
+                accessibilityLabel="Adicionar usuário"
+                accessibilityRole="button"
+                testID="users-tab-add-user">
                 <FeatherIcon
                   name="plus"
                   size={16}