@controleonline/ui-common 1.2.71 → 1.2.76

package/src/react/components/BottomNavigationBar.config.js

@@ -1,171 +1,171 @@
-const translateLabel = (translate, descriptor) => {
-  if (!descriptor || typeof descriptor === 'string') {
-    return descriptor || '';
-  }
-
-  const translated = translate?.(
-    descriptor.store,
-    descriptor.type,
-    descriptor.key,
-  );
-
-  return translated || descriptor.fallback || descriptor.key || '';
-};
-
-export const resolveBottomNavigationItems = (items = [], translate) =>
-  (Array.isArray(items) ? items : []).map(item => ({
-    ...item,
-    label: translateLabel(translate, item?.label),
-  }));
-
-export const resolveBottomNavigationRoute = (routeAliases = {}, routeName) =>
-  routeAliases?.[routeName] || routeName || '';
-
-export const BOTTOM_NAVIGATION_PRESETS = {
-  crmToolbar: {
-    items: [
-      {
-        route: 'HomePage',
-        icon: 'home',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'home',
-          fallback: 'Home',
-        },
-      },
-      {
-        route: 'CrmIndex',
-        icon: 'target',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'crm',
-          fallback: 'CRM',
-        },
-      },
-      {
-        route: 'ClientsIndex',
-        icon: 'users',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'clients',
-          fallback: 'Clients',
-        },
-      },
-      {
-        route: 'ProfilePage',
-        icon: 'user',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'profile',
-          fallback: 'Profile',
-        },
-      },
-    ],
-    routeAliases: {
-      HomePage: 'HomePage',
-      CrmIndex: 'CrmIndex',
-      ContractsIndex: 'CrmIndex',
-      ProposalsIndex: 'CrmIndex',
-      ComissionsPage: 'CrmIndex',
-      CrmConversation: 'CrmIndex',
-      ContractDetails: 'CrmIndex',
-      ClientsIndex: 'ClientsIndex',
-      ClientDetails: 'ClientsIndex',
-      FranchiseesIndex: 'ClientsIndex',
-      ProfilePage: 'ProfilePage',
-      SettingsPage: 'ProfilePage',
-    },
-  },
-  managerToolbar: {
-    items: [
-      {
-        route: 'HomePage',
-        icon: 'home',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'home',
-          fallback: 'Home',
-        },
-      },
-      {
-        route: 'CrmIndex',
-        icon: 'dollar-sign',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'opportunities',
-          fallback: 'Oportunidades',
-        },
-      },
-      {
-        route: 'ClientsIndex',
-        icon: 'users',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'customers',
-          fallback: 'Clientes',
-        },
-      },
-      {
-        route: 'ProfilePage',
-        icon: 'user',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'profile',
-          fallback: 'Profile',
-        },
-      },
-    ],
-    routeAliases: {
-      HomePage: 'HomePage',
-      CrmIndex: 'CrmIndex',
-      ContractsIndex: 'CrmIndex',
-      ProposalsIndex: 'CrmIndex',
-      ComissionsPage: 'CrmIndex',
-      CrmConversation: 'CrmIndex',
-      ContractDetails: 'CrmIndex',
-      ClientsIndex: 'ClientsIndex',
-      ClientDetails: 'ClientsIndex',
-      FranchiseesIndex: 'ClientsIndex',
-      ProfilePage: 'ProfilePage',
-      SettingsPage: 'ProfilePage',
-      OrderHistoryPage: 'CrmIndex',
-      InventoriesPage: 'CrmIndex',
-      ProductsPage: 'CrmIndex',
-    },
-  },
-  managerDock: {
-    items: [
-      {route: 'HomePage', icon: 'home', label: 'Home'},
-      {route: 'CrmIndex', icon: 'dollar-sign', label: 'Oportunidades'},
-      {route: 'ClientsIndex', icon: 'users', label: 'Clientes'},
-      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
-    ],
-    routeAliases: {
-      ClientDetails: 'ClientsIndex',
-      EmployeesIndex: 'ClientsIndex',
-      FranchiseesIndex: 'ClientsIndex',
-    },
-  },
-  deliveryDock: {
-    items: [
-      {route: 'HomePage', icon: 'home', label: 'Home'},
-      {route: 'DeliveryOrdersPage', icon: 'shopping-bag', label: 'Pedidos'},
-      {
-        route: 'DeliveryReceivablesPage',
-        icon: 'dollar-sign',
-        label: 'Recebiveis',
-      },
-      {route: 'DeliveryCompaniesPage', icon: 'users', label: 'Empresas'},
-      {route: 'DeliveryRateTablesPage', icon: 'list', label: 'Tabelas'},
-    ],
+const translateLabel = (translate, descriptor) => {
+  if (!descriptor || typeof descriptor === 'string') {
+    return descriptor || '';
+  }
+
+  const translated = translate?.(
+    descriptor.store,
+    descriptor.type,
+    descriptor.key,
+  );
+
+  return translated || descriptor.fallback || descriptor.key || '';
+};
+
+export const resolveBottomNavigationItems = (items = [], translate) =>
+  (Array.isArray(items) ? items : []).map(item => ({
+    ...item,
+    label: translateLabel(translate, item?.label),
+  }));
+
+export const resolveBottomNavigationRoute = (routeAliases = {}, routeName) =>
+  routeAliases?.[routeName] || routeName || '';
+
+export const BOTTOM_NAVIGATION_PRESETS = {
+  crmToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'home',
+          fallback: 'Início',
+        },
+      },
+      {
+        route: 'CrmIndex',
+        icon: 'target',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'crm',
+          fallback: 'CRM',
+        },
+      },
+      {
+        route: 'ClientsIndex',
+        icon: 'users',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'clients',
+          fallback: 'Clientes',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'profile',
+          fallback: 'Perfil',
+        },
+      },
+    ],
+    routeAliases: {
+      HomePage: 'HomePage',
+      CrmIndex: 'CrmIndex',
+      ContractsIndex: 'CrmIndex',
+      ProposalsIndex: 'CrmIndex',
+      ComissionsPage: 'CrmIndex',
+      CrmConversation: 'CrmIndex',
+      ContractDetails: 'CrmIndex',
+      ClientsIndex: 'ClientsIndex',
+      ClientDetails: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+      ProfilePage: 'ProfilePage',
+      SettingsPage: 'ProfilePage',
+    },
+  },
+  managerToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'home',
+          fallback: 'Início',
+        },
+      },
+      {
+        route: 'CrmIndex',
+        icon: 'dollar-sign',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'opportunities',
+          fallback: 'Oportunidades',
+        },
+      },
+      {
+        route: 'ClientsIndex',
+        icon: 'users',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'customers',
+          fallback: 'Clientes',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'profile',
+          fallback: 'Perfil',
+        },
+      },
+    ],
+    routeAliases: {
+      HomePage: 'HomePage',
+      CrmIndex: 'CrmIndex',
+      ContractsIndex: 'CrmIndex',
+      ProposalsIndex: 'CrmIndex',
+      ComissionsPage: 'CrmIndex',
+      CrmConversation: 'CrmIndex',
+      ContractDetails: 'CrmIndex',
+      ClientsIndex: 'ClientsIndex',
+      ClientDetails: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+      ProfilePage: 'ProfilePage',
+      SettingsPage: 'ProfilePage',
+      OrderHistoryPage: 'CrmIndex',
+      InventoriesPage: 'CrmIndex',
+      ProductsPage: 'CrmIndex',
+    },
+  },
+  managerDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Início'},
+      {route: 'CrmIndex', icon: 'dollar-sign', label: 'Oportunidades'},
+      {route: 'ClientsIndex', icon: 'users', label: 'Clientes'},
+      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
+    ],
+    routeAliases: {
+      ClientDetails: 'ClientsIndex',
+      EmployeesIndex: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+    },
+  },
+  deliveryDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Início'},
+      {route: 'DeliveryOrdersPage', icon: 'shopping-bag', label: 'Pedidos'},
+      {
+        route: 'DeliveryReceivablesPage',
+        icon: 'dollar-sign',
+        label: 'Recebiveis',
+      },
+      {route: 'DeliveryCompaniesPage', icon: 'users', label: 'Empresas'},
+      {route: 'DeliveryRateTablesPage', icon: 'list', label: 'Tabelas'},
+    ],
     routeAliases: {
       OrderDetails: 'DeliveryOrdersPage',
       OrderLogisticsPage: 'DeliveryOrdersPage',
@@ -173,66 +173,46 @@ export const BOTTOM_NAVIGATION_PRESETS = {
       DeliveryVehicleSetupPage: 'DeliveryRateTablesPage',
       DeliveryRateTableFormPage: 'DeliveryRateTablesPage',
       DeliveryRateTableCompaniesPage: 'DeliveryRateTablesPage',
-      DeliveryCourierSchedulesPage: 'DeliveryCompaniesPage',
-      DeliveryCourierScheduleFormPage: 'DeliveryCompaniesPage',
-      DeliveryCourierPresencePage: 'DeliveryCompaniesPage',
-      DeliveryCourierPresenceHistoryPage: 'DeliveryCompaniesPage',
-    },
-  },
-  ppcDock: {
-    items: [
-      {route: 'HomePage', icon: 'home', label: 'Home'},
-      {route: 'DisplayList', icon: 'monitor', label: 'Displays'},
-      {route: 'ProfilePage', icon: 'user', label: 'Profile'},
-    ],
-    routeAliases: {},
-  },
-  posToolbar: {
-    items: [
-      {
-        route: 'HomePage',
-        icon: 'home',
-        label: {
-          store: 'orders',
-          type: 'label',
-          key: 'home',
-          fallback: 'Home',
-        },
-      },
-      {
-        route: 'OrderHistoryPage',
-        icon: 'shopping-bag',
-        label: {
-          store: 'orders',
-          type: 'label',
-          key: 'orders',
-          fallback: 'Orders',
-        },
-      },
-      {
-        route: 'CashRegisterIndex',
-        icon: 'credit-card',
-        label: {
-          store: 'orders',
-          type: 'title',
-          key: 'cashRegister',
-          fallback: 'Cash register',
-        },
-      },
-      {
-        route: 'ProfilePage',
-        icon: 'user',
-        label: {
-          store: 'orders',
-          type: 'label',
-          key: 'profile',
-          fallback: 'Profile',
-        },
-      },
-    ],
-    routeAliases: {},
-  },
-};
-
-export const getBottomNavigationPreset = variant =>
-  BOTTOM_NAVIGATION_PRESETS[variant] || BOTTOM_NAVIGATION_PRESETS.managerDock;
+      DeliveryCourierSchedulesPage: 'DeliveryCompaniesPage',
+      DeliveryCourierScheduleFormPage: 'DeliveryCompaniesPage',
+      DeliveryCourierPresencePage: 'DeliveryCompaniesPage',
+      DeliveryCourierPresenceHistoryPage: 'DeliveryCompaniesPage',
+    },
+  },
+  ppcDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Início'},
+      {route: 'DisplayList', icon: 'monitor', label: 'Displays'},
+      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
+    ],
+    routeAliases: {},
+  },
+  posToolbar: {
+    items: [
+      {
+        route: 'OrderHistoryPage',
+        icon: 'shopping-bag',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'orders',
+          fallback: 'Pedidos',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'profile',
+          fallback: 'Perfil',
+        },
+      },
+    ],
+    routeAliases: {},
+  },
+};
+
+export const getBottomNavigationPreset = variant =>
+  BOTTOM_NAVIGATION_PRESETS[variant] || BOTTOM_NAVIGATION_PRESETS.managerDock;

package/src/react/components/CategoryForm.js

@@ -10,10 +10,12 @@ import {
   Modal,
 } from 'react-native';
 
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { useStore } from '@store';
-import styles from './CategoryForm.styles';
-import { inlineStyle_240_75 } from './CategoryForm.styles';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useStore } from '@store';
+import { colors } from '@controleonline/../../src/styles/colors';
+import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
+import styles from './CategoryForm.styles';
+import { inlineStyle_240_75 } from './CategoryForm.styles';
 
 /* ─── Paleta de cores predefinidas ─── */
 const PRESET_COLORS = [
@@ -131,11 +133,11 @@ const BottomModal = ({ visible, onClose, title, children }) => (
 );
 
 /* ─── Seletor de cor ─── */
-const ColorPicker = ({ value, onChange }) => {
-  const [open, setOpen] = useState(false);
-  const [hexInput, setHexInput] = useState(value || '#000000');
-
-  useEffect(() => { setHexInput(value || '#000000'); }, [value]);
+const ColorPicker = ({ defaultColor = '#CBD5E1', value, onChange }) => {
+  const [open, setOpen] = useState(false);
+  const [hexInput, setHexInput] = useState(value || defaultColor);
+
+  useEffect(() => { setHexInput(value || defaultColor); }, [defaultColor, value]);
 
   const applyHex = () => {
     const v = hexInput.startsWith('#') ? hexInput : `#${hexInput}`;
@@ -152,8 +154,8 @@ const ColorPicker = ({ value, onChange }) => {
         onPress={() => setOpen(true)}
         activeOpacity={0.7}
       >
-        <View style={[styles.colorSwatch, { backgroundColor: value || '#000000' }]} />
-        <Text style={styles.colorButtonText}>{value || '#000000'}</Text>
+        <View style={[styles.colorSwatch, { backgroundColor: value || defaultColor }]} />
+        <Text style={styles.colorButtonText}>{value || defaultColor}</Text>
         <MaterialCommunityIcons name="palette-outline" size={18} color="#94A3B8" />
       </TouchableOpacity>
 
@@ -443,9 +445,17 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
   const categoriesStore = useStore('categories');
   const categoryActions = categoriesStore.actions;
   const categories = categoriesStore.getters.items;
-  const peopleStore = useStore('people');
-  const { currentCompany } = peopleStore.getters;
-  const categoryContext = normalizeCategoryContext(context);
+  const peopleStore = useStore('people');
+  const { currentCompany } = peopleStore.getters;
+  const { colors: themeColors } = useStore('theme').getters;
+  const categoryContext = normalizeCategoryContext(context);
+  const defaultColor = useMemo(
+    () => resolveThemePalette(
+      { ...themeColors, ...(currentCompany?.theme?.colors || {}) },
+      colors,
+    ).primary,
+    [currentCompany?.theme?.colors, themeColors],
+  );
 
   const [name, setName] = useState('');
   const [color, setColor] = useState('#CBD5E1');
@@ -463,43 +473,48 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
   useEffect(() => {
     if (category) {
       setName(category.name || '');
-      setColor(category.color || '#CBD5E1');
+      setColor(category.color || defaultColor);
       setIcon(category.icon || '');
       setParent(category.parent?.id || null);
-      setSortOrder(String(category?.extraData?.sortOrder || ''));
+      setSortOrder(category?.sortOrder === null || category?.sortOrder === undefined
+        ? ''
+        : String(category.sortOrder));
       setChannel(String(category?.extraData?.channel || 'default'));
     } else {
       setName('');
-      setColor('#CBD5E1');
+      setColor(defaultColor);
       setIcon('');
       setParent(null);
       setSortOrder('');
       setChannel('default');
     }
-  }, [category]);
+  }, [category, defaultColor]);
 
-  const handleSubmit = async () => {
-    const payload = {
+  const handleSubmit = async () => {
+    const categoryExtraData = { ...(category?.extraData || {}) };
+    delete categoryExtraData.sortOrder;
+    const payload = {
       ...(category?.id ? { id: category.id } : {}),
       name,
       color,
       icon: icon || '',
       context: categoryContext,
       company: companyIri,
-      parent: parent ? `/categories/${parent}` : null,
-      extraData: {
-        ...(category?.extraData || {}),
-        sortOrder: sortOrder ? parseInt(String(sortOrder).replace(/\D/g, ''), 10) || 0 : 0,
-        channel: channel || 'default',
-      },
+      parent: parent ? `/categories/${parent}` : null,
+      sortOrder: sortOrder === '' ? null : Number.parseInt(sortOrder, 10),
+      extraData: {
+        ...categoryExtraData,
+        channel: channel || 'default',
+      },
     };
 
     const saved = await categoryActions.save(payload);
 
     await categoryActions.getItems({
-      context: categoryContext,
-      'order[name]': 'ASC',
-      company: currentCompany.id,
+      context: categoryContext,
+      'order[sortOrder]': 'ASC',
+      'order[name]': 'ASC',
+      company: currentCompany.id,
     });
 
     if (onSaved) onSaved(saved);
@@ -526,7 +541,7 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
       {/* Cor */}
       <View style={styles.field}>
         <Text style={styles.label}>Cor</Text>
-        <ColorPicker value={color} onChange={setColor} />
+        <ColorPicker defaultColor={defaultColor} value={color} onChange={setColor} />
       </View>
 
       {/* Ícone */}
@@ -559,11 +574,13 @@ const CategoryForm = forwardRef(({ category, context = 'products', onClose, onSa
         />
       </View>
 
-      {/* Canais */}
-      <View style={styles.field}>
-        <Text style={styles.label}>Canais de venda</Text>
-        <ChannelPicker value={channel} onChange={setChannel} />
-      </View>
+      {/* Vitrines */}
+      <View style={styles.field}>
+        <Text style={styles.label}>
+          {global.t?.t?.('categories', 'label', 'showcases')}
+        </Text>
+        <ChannelPicker value={channel} onChange={setChannel} />
+      </View>
 
     </View>
   );