@controleonline/ui-common 1.2.97 → 1.2.99

package/.release/rc-manifest.json

@@ -1,10 +1,10 @@
 {
-  "version": "1.2.93",
-  "rc": 1,
-  "branch": "rc/1.2.93-rc.1",
-  "baseMaster": "b4db94eb1ccd3bf878dc96e3d32c0249aad07402",
-  "tasks": [77],
-  "repositories": { "ControleOnline/ui-common": "4dfdb2d7ccb160f265115bdad3125d6ecd26bdfd" },
-  "compositionNotes": ["Verified on Android emulator: Text width was still 0 with flexBasis auto because Yoga prioritises flex over flexGrow/flexBasis. flex:0 fixes it."],
+  "version": "1.2.98",
+  "rc": 2,
+  "branch": "rc/1.2.98-rc.2",
+  "baseMaster": "aa5ad406d201d23bb88023bc4b7a7d4f9b11fd0a",
+  "tasks": [88],
+  "repositories": { "ControleOnline/ui-common": "0c96fc6ebac3af856cfba103fa0694171f590ce1" },
+  "compositionNotes": ["Task 88: rodapé mostra …últimos 2 blocos quando o identificador não é IPv4. rc.2 inclui bump de versão 1.2.98 para publicação npm; supersedes rc.1."],
   "frozen": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.97",
+  "version": "1.2.99",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",

package/src/api/index.js

@@ -1,3 +1,4 @@
+import {readStoredSessionToken} from '@controleonline/ui-common/src/utils/storedSessionToken';
 import myFetch from '@controleonline/ui-common/src/api/fetch';
 import axios from 'axios';
 import {env as APP_ENV} from '@env';
@@ -215,8 +216,8 @@ async function requestSmokeUrl(url, options) {
 export const api = {
   device: JSON.parse(localStorage.getItem('device') || '{}'),
   masterDevice: JSON.parse(localStorage.getItem('master-device') || '{}'),
-
-
+
+
   upload: async function (uri, formData) {
     const token = await this.getToken();
     const appDomain = resolveAppDomain(APP_ENV.DOMAIN);
@@ -242,8 +243,8 @@ export const api = {
   fetch: async function (uri, options = {}) {
     if (typeof options.headers === 'undefined')
       Object.assign(options, { headers: new Headers() });
-
-    // Always refresh device from localStorage in case it was set after module load
+
+    // Always refresh device from localStorage in case it was set after module load
     try {
       this.device = JSON.parse(localStorage.getItem('device') || '{}');
     } catch (e) {
@@ -270,16 +271,16 @@ export const api = {
     if (options.body) {
       if (typeof options.body === 'object') {
         bodyDeviceId = options.body.device || null;
-      } else if (typeof options.body === 'string') {
-        try {
-          const parsedBody = JSON.parse(options.body);
-          bodyDeviceId = parsedBody?.device || null;
-        } catch (e) {
-          bodyDeviceId = null;
-        }
-      }
-    }
-
+      } else if (typeof options.body === 'string') {
+        try {
+          const parsedBody = JSON.parse(options.body);
+          bodyDeviceId = parsedBody?.device || null;
+        } catch (e) {
+          bodyDeviceId = null;
+        }
+      }
+    }
+
     const requestDevice = resolveRequestDevice(
       this.masterDevice,
       this.device,
@@ -296,10 +297,10 @@ export const api = {
         options.headers.set('DEVICE-TYPE', requestDeviceType);
       }
     }
-    if (options.responseType != 'text') {
-      options.headers.set('Content-Type', MIME_TYPE);
-      options.headers.set('Accept', MIME_TYPE);
-    }
+    if (options.responseType != 'text') {
+      options.headers.set('Content-Type', MIME_TYPE);
+      options.headers.set('Accept', MIME_TYPE);
+    }
     options.headers.set('App-Domain', resolveAppDomain(APP_ENV.DOMAIN));
 
     if (options.body && typeof options.body != 'string') {
@@ -310,28 +311,13 @@ export const api = {
     if (options.params) {
       uri = this.buildQueryString(uri, options);
     }
-    return myFetch(uri, options).catch(e => {
-      throw e;
-    });
-  },
-  async getToken() {
-    const sessionString = localStorage.getItem('session');
-    let session = null;
-    if (sessionString) {
-      try {
-        const cleanString =
-          typeof sessionString == 'string' &&
-            sessionString.startsWith('__q_objt|')
-            ? sessionString.substring('__q_objt|'.length)
-            : sessionString;
-        session = JSON.parse(cleanString); // Transforma a string em objeto
-      } catch (e) {
-        console.error('Failed to parse session from localStorage', e);
-      }
-    }
-
-    return session?.token || session?.api_key;
-  },
+    return myFetch(uri, options).catch(e => {
+      throw e;
+    });
+  },
+  async getToken() {
+    return readStoredSessionToken();
+  },
   serialize(obj, prefix = '') {
     const pairs = [];
 
@@ -344,12 +330,12 @@ export const api = {
 
         const value = obj[key];
         let fullKey = prefix ? `${prefix}.${key}` : key; // Usa ponto para objetos
-
-        if (value === null || value === undefined) {
-          pairs.push(`${fullKey}=`);
-        } else if (typeof value === 'object' && !Array.isArray(value)) {
-          // Objeto aninhado: chama serialize recursivamente com ponto
-          pairs.push(...this.serialize(value, fullKey));
+
+        if (value === null || value === undefined) {
+          pairs.push(`${fullKey}=`);
+        } else if (typeof value === 'object' && !Array.isArray(value)) {
+          // Objeto aninhado: chama serialize recursivamente com ponto
+          pairs.push(...this.serialize(value, fullKey));
         } else if (Array.isArray(value)) {
           // Array: adiciona [] e itera sobre os valores
           if (value.length === 0) {
@@ -364,14 +350,14 @@ export const api = {
             });
           }
         } else {
-          // Valor simples
-          pairs.push(`${fullKey}=${encodeURIComponent(value)}`);
-        }
-      }
-    }
-    return pairs;
-  },
-
+          // Valor simples
+          pairs.push(`${fullKey}=${encodeURIComponent(value)}`);
+        }
+      }
+    }
+    return pairs;
+  },
+
   buildQueryString(uri, options) {
     const safeUri = stripDomainQueryParams(uri);
 

package/src/react/components/AnimatedModal.js

@@ -38,6 +38,8 @@ export default function AnimatedModal({
   onRequestClose,
   children,
   style,
+  overlayColor,
+  contentStyle,
 }) {
   const [showing, setShowing] = useState(visible);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
@@ -125,6 +127,8 @@ export default function AnimatedModal({
   const overlayStyle = [
     styles.overlay,
     style,
+  overlayColor,
+  contentStyle,
     Platform.OS === 'android' ? {paddingBottom: keyboardHeight} : null,
   ];
 
@@ -152,11 +156,12 @@ export default function AnimatedModal({
             style={[
               StyleSheet.absoluteFillObject,
               styles.overlayBg,
+              overlayColor ? {backgroundColor: overlayColor} : null,
               {opacity: overlayOpacity},
             ]}
           />
           <Animated.View
-            style={[styles.content, {transform: [{translateY: slideY}]}]}>
+            style={[styles.content, contentStyle, {transform: [{translateY: slideY}]}]}>
             {normalizedChildren}
           </Animated.View>
           <Toasts

package/src/react/components/BottomNavigationBar.js

@@ -17,7 +17,8 @@ const BottomNavigationBar = ({
   colors = {},
   testID = 'bottom-navigation',
   useModernWebChromeProps = false,
-  appearance = 'legacy',
+  appearance = 'soft',
+  placement = 'overlay',
 }) => {
   const Icon = appearance === 'soft' ? HomeIcon : LegacyIcon;
   colors = appearance === 'soft' ? resolveHomepagePalette(colors) : colors;
@@ -104,9 +105,7 @@ const BottomNavigationBar = ({
 
   const routeItems = Array.isArray(items) ? items : [];
   const knownRoute = routeItems.some(item => item?.route === activeRouteName);
-  const effectiveActiveRoute = knownRoute
-    ? activeRouteName
-    : routeItems[0]?.route || '';
+  const effectiveActiveRoute = knownRoute ? activeRouteName : '';
 
   const navigateTo = item => {
     try {
@@ -134,7 +133,7 @@ const BottomNavigationBar = ({
   };
 
   return (
-    <View {...hostProps} style={hostStyle}>
+    <View {...hostProps} style={[hostStyle, placement === 'inline' ? {position: 'relative', flexShrink: 0, zIndex: 0} : null]}>
       <View style={styles.stack}>
         <View style={styles.dock} testID={testID}>
           <View style={styles.itemsRow}>
@@ -151,6 +150,8 @@ const BottomNavigationBar = ({
                 <Pressable
                   key={item.route}
                   accessibilityRole="button"
+                  accessibilityLabel={item.label}
+                  accessibilityState={{selected: isActive, disabled: Boolean(isDisabled)}}
                   disabled={isDisabled}
                   onPress={() => navigateTo(item)}
                   style={({pressed}) => [

package/src/react/components/BottomNavigationBar.soft.styles.js

@@ -1,6 +1,6 @@
 import {Platform} from 'react-native';
 
-// Only the homepage opts into this chrome; preserve all default navigation styles.
+// Shared compact chrome on every route; explicit legacy consumers can opt out.
 export default (styles, colors, appearance) => appearance !== 'soft' ? styles : {
   ...styles,
   dock: [styles.dock, {
@@ -16,9 +16,10 @@ export default (styles, colors, appearance) => appearance !== 'soft' ? styles :
     shadowOpacity: 0,
     ...(Platform.OS === 'web' ? {boxShadow: 'none'} : {}),
   }],
-  itemsRow: [styles.itemsRow, {minHeight: 64, paddingHorizontal: 12, paddingVertical: 5}],
-  item: [styles.item, {minHeight: 54, borderRadius: 12}],
-  itemLabel: [styles.itemLabel, {fontSize: 11, fontWeight: '400'}],
+  itemsRow: [styles.itemsRow, {minHeight: 56, paddingHorizontal: 8, paddingVertical: 4}],
+  item: [styles.item, {minHeight: 46, paddingVertical: 3, borderRadius: 10}],
+  iconWrap: [styles.iconWrap, {width: 22, height: 22, marginBottom: 2}],
+  itemLabel: [styles.itemLabel, {fontSize: 11, lineHeight: 14, fontWeight: '400'}],
   footerSlot: [styles.footerSlot, {
     borderTopWidth: 1,
     borderColor: colors.navigationBorder,

package/src/react/components/ProductCatalogCacheService.js

@@ -1,45 +1,53 @@
-import React, {useEffect} from 'react';
-import {useStore} from '@store';
-
-const ProductCatalogCacheService = () => {
-  const categoriesStore = useStore('categories');
-  const productsStore = useStore('products');
-
-  const categoryActions = categoriesStore.actions;
-  const productActions = productsStore.actions;
-
-  const {messages, message} = categoriesStore.getters;
-
-  useEffect(() => {
-    if (
-      messages &&
-      messages.length > 0 &&
-      (!message || Object.keys(message).length === 0)
-    ) {
-      const nextMessages = [...messages];
-      categoryActions.setMessage(nextMessages.pop());
-      categoryActions.setMessages(nextMessages);
-    }
-  }, [categoryActions, message, messages]);
-
-  useEffect(() => {
-    if (!message || Object.keys(message).length === 0) {
-      return;
-    }
-
-    if (message?.command !== 'clear-product-cache') {
-      categoryActions.setMessage(null);
-      return;
-    }
-
-    localStorage.setItem('categories', JSON.stringify([]));
-    localStorage.removeItem('categories-company');
-    categoryActions.setItems([]);
-    productActions.setItems([]);
-    categoryActions.setMessage(null);
-  }, [categoryActions, message, productActions]);
-
-  return null;
-};
-
-export default ProductCatalogCacheService;
+import React, {useEffect} from 'react';
+import {useStore} from '@store';
+import {invalidateProductCatalogCache} from '../utils/productCatalogCacheRevision';
+
+const ProductCatalogCacheService = () => {
+  const categoriesStore = useStore('categories');
+  const productsStore = useStore('products');
+
+  const categoryActions = categoriesStore.actions;
+  const productActions = productsStore.actions;
+
+  const {messages, message} = categoriesStore.getters;
+
+  useEffect(() => {
+    if (
+      messages &&
+      messages.length > 0 &&
+      (!message || Object.keys(message).length === 0)
+    ) {
+      const nextMessages = [...messages];
+      categoryActions.setMessage(nextMessages.pop());
+      categoryActions.setMessages(nextMessages);
+    }
+  }, [categoryActions, message, messages]);
+
+  useEffect(() => {
+    if (!message || Object.keys(message).length === 0) {
+      return;
+    }
+
+    if (message?.command !== 'clear-product-cache') {
+      categoryActions.setMessage(null);
+      return;
+    }
+
+    invalidateProductCatalogCache();
+    for (const context of ['products', 'supplies']) {
+      localStorage.removeItem(`categories:${context}`);
+      localStorage.removeItem(`categories-company:${context}`);
+    }
+    localStorage.setItem('categories', JSON.stringify([]));
+    localStorage.removeItem('categories-company');
+    categoryActions.setItems([]);
+    productActions.setItems([]);
+    categoryActions.setReload?.(true);
+    productActions.setReload?.(true);
+    categoryActions.setMessage(null);
+  }, [categoryActions, message, productActions]);
+
+  return null;
+};
+
+export default ProductCatalogCacheService;

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -19,7 +19,8 @@ const {
 } = require('@controleonline/ui-common/src/react/utils/bottomNavigationToolbar');
 
 const RuntimeBottomNavigationBar = ({
-  appearance = 'legacy',
+  appearance = 'soft',
+  placement = 'overlay',
   activeRouteName: activeRouteNameProp,
   colors: colorsOverride,
   disabled: disabledOverride,
@@ -42,13 +43,16 @@ const RuntimeBottomNavigationBar = ({
   const peopleGetters = peopleStore?.getters || {};
   const currentCompany = peopleGetters.currentCompany || {};
   const themeColors = themeGetters.colors || {};
-  const [runtimeMenus, setRuntimeMenus] = useState([]);
+  const [menuState, setMenuState] = useState({scope: '', menus: []});
   const preset = presetKey ? getBottomNavigationPreset(presetKey) : null;
   const routeAliases = routeAliasesProp || preset?.routeAliases || {};
   const appType = normalizeAppType(app_type);
+  const menuScope = JSON.stringify([appType, currentCompany?.id, menuType, presetKey]);
+  const runtimeMenus = menuState.scope === menuScope ? menuState.menus : [];
 
   // Always consult menus-people for role-aware toolbar; preset is fallback only.
   useEffect(() => {
+    const setRuntimeMenus = menus => setMenuState({scope: menuScope, menus});
     if (!currentCompany?.id || !menuType) {
       setRuntimeMenus(
         resolveToolbarRuntimeMenus({
@@ -105,7 +109,7 @@ const RuntimeBottomNavigationBar = ({
     return () => {
       cancelled = true;
     };
-  }, [appType, currentCompany?.id, menuType, preset, presetKey]);
+  }, [appType, currentCompany?.id, menuType, preset, presetKey, menuScope]);
 
   const colors = useMemo(() => {
     if (colorsOverride) {
@@ -151,16 +155,19 @@ const RuntimeBottomNavigationBar = ({
   const knownRoute = navItems.some(item => item.route === resolvedActiveRoute);
   const effectiveActiveRoute = knownRoute
     ? resolvedActiveRoute
-    : navItems[0]?.route || activeRouteName;
+    : activeRouteName;
 
   const isDisabled =
     typeof disabledOverride === 'boolean'
       ? disabledOverride
       : !currentCompany || Object.keys(currentCompany).length === 0;
 
+  if (!navItems.length) return null;
+
   return (
     <BottomNavigationBar
       appearance={appearance}
+      placement={placement}
       activeRouteName={effectiveActiveRoute}
       colors={colors}
       disabled={isDisabled}

package/src/react/components/UserAvatar.js

@@ -1,3 +1,4 @@
+import {readStoredSessionToken} from '../../utils/storedSessionToken';
 import React, {useEffect, useMemo, useState} from 'react';
 import {Image, Platform, StyleSheet, Text, View} from 'react-native';
 import {env as APP_ENV} from '@env';
@@ -14,18 +15,6 @@ const isBackendDownloadUrl = uri =>
 /** Session cache: gravatar URL → true (ok) | false (missing). Avoids repeat probes. */
 const gravatarProbeCache = new Map();
 
-const readSessionToken = () => {
-  if (typeof localStorage === 'undefined' || !localStorage?.getItem) {
-    return '';
-  }
-
-  try {
-    const session = JSON.parse(localStorage.getItem('session') || '{}');
-    return normalizeUrl(session?.api_key || session?.token);
-  } catch {
-    return '';
-  }
-};
 
 /**
  * Probe Gravatar (d=404) via fetch BEFORE exposing URL to <Image>.
@@ -86,7 +75,7 @@ const useDisplayUri = uri => {
         return;
       }
 
-      const token = readSessionToken();
+      const token = readStoredSessionToken();
 
       // Authenticated backend download on web
       if (isBackendDownloadUrl(next) && Platform.OS === 'web' && token) {

package/src/react/hooks/useBottomNavigationPreference.js

@@ -0,0 +1,49 @@
+import {useEffect, useRef, useState} from 'react';
+import {Platform} from 'react-native';
+
+const nativeStorage = () => {
+  const module = require('@react-native-async-storage/async-storage');
+  return module.default || module;
+};
+const deviceStorage = {
+  getItem: key => Platform.OS === 'web' ? globalThis.localStorage?.getItem(key) : nativeStorage().getItem(key),
+  setItem: (key, value) => Platform.OS === 'web' ? globalThis.localStorage.setItem(key, value) : nativeStorage().setItem(key, value),
+};
+
+// Visibility is personal device state. It never changes server menu permissions.
+export default function useBottomNavigationPreference({enabled, principal, appType, storage = deviceStorage}) {
+  const key = enabled && principal && appType
+    ? `co.bottom-navigation.v1:${encodeURIComponent(appType)}:${encodeURIComponent(principal)}` : '';
+  const current = useRef(key);
+  current.current = key;
+  const [state, setState] = useState({key: '', ready: false, remembered: true, session: null, error: ''});
+  useEffect(() => {
+    current.current = key;
+    let cancelled = false;
+    setState({key, ready: false, remembered: true, session: null, error: ''});
+    if (key) Promise.resolve().then(() => storage.getItem(key)).then(value => {
+      if (!cancelled) setState({key, ready: true, remembered: value !== 'hidden', session: null, error: ''});
+    }).catch(() => {
+      if (!cancelled) setState({key, ready: true, remembered: true, session: null, error: 'Não foi possível recuperar a preferência da barra.'});
+    });
+    return () => {cancelled = true; if (current.current === key) current.current = null;};
+  }, [key, storage]);
+  const ready = Boolean(key && state.key === key && state.ready);
+  const setSessionVisible = visible => {
+    if (ready) setState(previous => ({...previous, session: Boolean(visible), error: ''}));
+  };
+  const setRememberedVisible = async visible => {
+    if (!ready) return false;
+    try {
+      await storage.setItem(key, visible ? 'visible' : 'hidden');
+      if (current.current !== key) return false;
+      setState(previous => ({...previous, remembered: Boolean(visible), session: null, error: ''}));
+      return true;
+    } catch {
+      if (current.current === key) setState(previous => ({...previous, error: 'Não foi possível lembrar a preferência neste aparelho.'}));
+      return false;
+    }
+  };
+  return {ready, visible: ready && (state.session ?? state.remembered), rememberedVisible: ready ? state.remembered : true,
+    error: state.key === key ? state.error : '', setSessionVisible, setRememberedVisible};
+}

package/src/react/pages/Devices/deviceTypes/DeviceGroupCard.js

@@ -24,7 +24,7 @@ import {
   parseConfigsObject,
   tt,
 } from './deviceListHelpers';
-import styles from '../../Devices.styles';
+import legacyStyles from '../../Devices.styles';
 
 /**
  * Normalize DefaultTable card `item` into a device group shape.
@@ -65,6 +65,7 @@ const normalizeDeviceGroup = item => {
 export default function DeviceGroupCard({
   item,
   brandColors,
+  themedStyles = null,
   creatingPdv,
   goToDetail,
   handleCreateCurrentPdv,
@@ -74,6 +75,7 @@ export default function DeviceGroupCard({
   runtimeDeviceType,
   showCurrentPdvSetup,
 }) {
+        const styles = themedStyles || legacyStyles;
         const deviceGroup = normalizeDeviceGroup(item);
         if (!deviceGroup) {
           return null;
@@ -116,7 +118,7 @@ export default function DeviceGroupCard({
             deviceGroup.device?.id ||
             deviceGroup.key,
         );
-        const accent = getDeviceTypeAccent(normalizedType);
+        const accent = brandColors.deviceAccent || getDeviceTypeAccent(normalizedType);
         const metaChips = [];
 
         if (isPdv && primaryConfig) {
@@ -196,7 +198,7 @@ export default function DeviceGroupCard({
                 <View style={styles.deviceConfigRow}>
                   {deviceConfigs.map(deviceConfig => {
                     const configType = getDeviceConfigType(deviceConfig);
-                    const configAccent = getDeviceTypeAccent(configType);
+                    const configAccent = brandColors.deviceAccent || getDeviceTypeAccent(configType);
                     const isSessionConfig =
                       isCurrentDevice &&
                       runtimeDeviceType &&
@@ -297,5 +299,5 @@ export default function DeviceGroupCard({
             </View>
           </View>
         );
-      
+
 }

package/src/react/pages/Devices/deviceTypes/shared.js

@@ -36,7 +36,7 @@ import {
   prioritizeCurrentDeviceGroups,
   readStoredRuntimeDevice,
 } from '../currentDevice';
-import styles from '../../Devices.styles';
+import legacyStyles, {createStyles} from '../../Devices.styles';
 import DeviceGroupCard from './DeviceGroupCard';
 import {useDeviceNetworkConnectivity} from './useDeviceNetworkConnectivity';
 import {
@@ -89,7 +89,7 @@ export const createDeviceTypeTab = ({
   clientFilter = null,
   offerCurrentPdvSetup = false,
 }) => {
-  const DeviceTypeTab = () => {
+  const DeviceTypeTab = ({themePalette = null} = {}) => {
     const navigation = useNavigation();
     const peopleStore = useStore('people');
     const deviceStore = useStore('device');
@@ -101,13 +101,15 @@ export const createDeviceTypeTab = ({
 
     const brandColors = useMemo(
       () =>
-        resolveThemePalette(
+        themePalette || resolveThemePalette(
           {...themeColors, ...(currentCompany?.theme?.colors || {})},
           colors,
         ),
-      [themeColors, currentCompany?.id],
+      [themePalette, themeColors, currentCompany?.id],
     );
 
+    const styles = useMemo(() => themePalette ? createStyles(brandColors) : legacyStyles, [themePalette, brandColors]);
+
     const [deviceConfigs, setDeviceConfigs] = useState([]);
     const [loading, setLoading] = useState(false);
     const [refreshing, setRefreshing] = useState(false);
@@ -372,6 +374,7 @@ export const createDeviceTypeTab = ({
         <DeviceGroupCard
           {...cardProps}
           brandColors={brandColors}
+          themedStyles={themePalette ? styles : null}
           creatingPdv={creatingPdv}
           goToDetail={goToDetail}
           handleCreateCurrentPdv={handleCreateCurrentPdv}
@@ -384,6 +387,8 @@ export const createDeviceTypeTab = ({
       ),
       [
         brandColors,
+        styles,
+        themePalette,
         creatingPdv,
         goToDetail,
         handleCreateCurrentPdv,

package/src/react/pages/Devices.js

@@ -1,183 +1,184 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import {useNavigation} from '@react-navigation/native';
-import {useStore} from '@store';
-import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
-import {colors} from '@controleonline/../../src/styles/colors';
-import CompactFilterSelector from '@controleonline/ui-default/src/react/components/filters/CompactFilterSelector';
-import {PDV_DEVICE_TYPE} from '@controleonline/ui-common/src/react/utils/printerDevices';
-import Icon from 'react-native-vector-icons/Feather';
-import {
-  ALL_DEVICE_FILTER,
-  getDeviceCreationAction,
-  getDeviceFilterAccent,
-  getDeviceFilterDefinition,
-  getDeviceFilterIcon,
-  getDeviceFilterOptions,
-  getPdvSubfilterOptions,
-  hasRegisteredDeviceFilter,
-  isPdvSubfilter,
-} from './Devices/deviceTypes';
-import { createStyles } from './Devices.styles';
-
-const tt = (type, key) => global.t?.t('configs', type, key);
-
-const Devices = () => {
-  const navigation = useNavigation();
-  const peopleStore = useStore('people');
-  const themeStore = useStore('theme');
-
-  const {currentCompany} = peopleStore.getters;
-  const {colors: themeColors} = themeStore.getters;
-
-  const [activeFilter, setActiveFilter] = useState(ALL_DEVICE_FILTER);
-
-  const brandColors = useMemo(
-    () =>
-      resolveThemePalette(
-        {...themeColors, ...(currentCompany?.theme?.colors || {})},
-        colors,
-      ),
-    [themeColors, currentCompany?.id],
-  );
-  const styles = useMemo(() => createStyles(brandColors), [brandColors]);
-  const accentPalette = useMemo(
-    () => ({
-      primary: brandColors.info,
-      success: brandColors.success,
-      danger: brandColors.error,
-      warning: brandColors.warning,
-    }),
-    [brandColors.error, brandColors.info, brandColors.success, brandColors.warning],
-  );
-
-  const filterOptions = useMemo(() => getDeviceFilterOptions(), []);
-  const pdvSubfilterOptions = useMemo(() => getPdvSubfilterOptions(), []);
-  const activeFilterDefinition = useMemo(
-    () => getDeviceFilterDefinition(activeFilter),
-    [activeFilter],
-  );
-  const topLevelActiveFilter = useMemo(
-    () => (isPdvSubfilter(activeFilter) ? PDV_DEVICE_TYPE : activeFilter),
-    [activeFilter],
-  );
-  const activeFilterAction = useMemo(
-    () => getDeviceCreationAction(topLevelActiveFilter),
-    [topLevelActiveFilter],
-  );
-  const deviceTypeSelectorOptions = useMemo(
-    () => filterOptions.map(option => ({
-      key: option.key,
-      label: option.label,
-    })),
-    [filterOptions],
-  );
-  const pdvGatewaySelectorOptions = useMemo(
-    () => [
-      {key: PDV_DEVICE_TYPE, label: tt('device_filter', 'all') || 'Todos'},
-      ...pdvSubfilterOptions.map(option => ({
-        key: option.key,
-        label: option.label,
-      })),
-    ],
-    [pdvSubfilterOptions],
-  );
-  const selectedDeviceTypeLabel = useMemo(
-    () =>
-      deviceTypeSelectorOptions.find(option => option.key === topLevelActiveFilter)?.label ||
-      tt('device_filter', 'allTypes') ||
-      'Todos os tipos',
-    [deviceTypeSelectorOptions, topLevelActiveFilter],
-  );
-  const selectedPdvGatewayLabel = useMemo(
-    () =>
-      pdvGatewaySelectorOptions.find(option => option.key === activeFilter)?.label ||
-      tt('device_filter', 'all') ||
-      'Todos',
-    [activeFilter, pdvGatewaySelectorOptions],
-  );
-  const ActiveTabComponent = activeFilterDefinition.TabComponent;
-
-  useEffect(() => {
-    if (!hasRegisteredDeviceFilter(activeFilter)) {
-      setActiveFilter(ALL_DEVICE_FILTER);
-    }
-  }, [activeFilter]);
-
-  return (
-    <SafeAreaView
-      style={[styles.container, {backgroundColor: brandColors.background}]}>
-      <View style={styles.filtersBlock}>
-        <Text style={styles.filtersLabel}>{tt('device_filter', 'filterByType') || 'Filtrar por tipo'}</Text>
-        <CompactFilterSelector
-          icon={getDeviceFilterIcon(topLevelActiveFilter)}
-          label={selectedDeviceTypeLabel}
-          title={tt('device_filter', 'filterByType') || 'Filtrar por tipo'}
-          accentColor={getDeviceFilterAccent(topLevelActiveFilter, {
-            brandColors,
-            hex: accentPalette,
-          })}
-          active={topLevelActiveFilter !== ALL_DEVICE_FILTER}
-          options={deviceTypeSelectorOptions}
-          selectedKey={topLevelActiveFilter}
-          onSelect={optionKey => {
-            setActiveFilter(optionKey);
-            return true;
-          }}
-        />
-      </View>
-
-      {topLevelActiveFilter === PDV_DEVICE_TYPE && pdvSubfilterOptions.length > 0 ? (
-        <View style={styles.filtersBlock}>
-          <Text style={styles.filtersLabel}>{tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}</Text>
-          <CompactFilterSelector
-            icon={getDeviceFilterIcon(activeFilter)}
-            label={selectedPdvGatewayLabel}
-            title={tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}
-            accentColor={getDeviceFilterAccent(activeFilter, {
-              brandColors,
-              hex: accentPalette,
-            })}
-            active={activeFilter !== PDV_DEVICE_TYPE}
-            options={pdvGatewaySelectorOptions}
-            selectedKey={activeFilter}
-            onSelect={optionKey => {
-              setActiveFilter(optionKey);
-              return true;
-            }}
-          />
-        </View>
-      ) : null}
-
-      {activeFilterAction ? (
-        <View style={styles.printerActionBlock}>
-          <TouchableOpacity
-            style={[
-              styles.createPrinterBtn,
-              {backgroundColor: brandColors.primary},
-            ]}
-            activeOpacity={0.86}
-            onPress={() => navigation.navigate(activeFilterAction.routeName)}>
-            <Icon name="plus-circle" size={16} color={brandColors.white} />
-            <Text style={styles.createPrinterBtnText}>
-              {activeFilterAction.label}
-            </Text>
-          </TouchableOpacity>
-
-          <Text style={styles.helperText}>
-            {activeFilterAction.helperText}
-          </Text>
-        </View>
-      ) : null}
-
-      {ActiveTabComponent ? (
-        <ActiveTabComponent
-          key={`${activeFilter}-${currentCompany?.id || 'company'}`}
-        />
-      ) : null}
-    </SafeAreaView>
-  );
-};
-
-export default Devices;
+import React, {useEffect, useMemo, useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useNavigation} from '@react-navigation/native';
+import {useStore} from '@store';
+import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
+import {colors} from '@controleonline/../../src/styles/colors';
+import CompactFilterSelector from '@controleonline/ui-default/src/react/components/filters/CompactFilterSelector';
+import {PDV_DEVICE_TYPE} from '@controleonline/ui-common/src/react/utils/printerDevices';
+import Icon from 'react-native-vector-icons/Feather';
+import {
+  ALL_DEVICE_FILTER,
+  getDeviceCreationAction,
+  getDeviceFilterAccent,
+  getDeviceFilterDefinition,
+  getDeviceFilterIcon,
+  getDeviceFilterOptions,
+  getPdvSubfilterOptions,
+  hasRegisteredDeviceFilter,
+  isPdvSubfilter,
+} from './Devices/deviceTypes';
+import { createStyles } from './Devices.styles';
+
+const tt = (type, key) => global.t?.t('configs', type, key);
+
+const Devices = ({themePalette = null} = {}) => {
+  const navigation = useNavigation();
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+
+  const {currentCompany} = peopleStore.getters;
+  const {colors: themeColors} = themeStore.getters;
+
+  const [activeFilter, setActiveFilter] = useState(ALL_DEVICE_FILTER);
+
+  const brandColors = useMemo(
+    () =>
+      themePalette || resolveThemePalette(
+        {...themeColors, ...(currentCompany?.theme?.colors || {})},
+        colors,
+      ),
+    [themePalette, themeColors, currentCompany?.id],
+  );
+  const styles = useMemo(() => createStyles(brandColors), [brandColors]);
+  const accentPalette = useMemo(
+    () => ({
+      primary: brandColors.info,
+      success: brandColors.success,
+      danger: brandColors.error,
+      warning: brandColors.warning,
+    }),
+    [brandColors.error, brandColors.info, brandColors.success, brandColors.warning],
+  );
+
+  const filterOptions = useMemo(() => getDeviceFilterOptions(), []);
+  const pdvSubfilterOptions = useMemo(() => getPdvSubfilterOptions(), []);
+  const activeFilterDefinition = useMemo(
+    () => getDeviceFilterDefinition(activeFilter),
+    [activeFilter],
+  );
+  const topLevelActiveFilter = useMemo(
+    () => (isPdvSubfilter(activeFilter) ? PDV_DEVICE_TYPE : activeFilter),
+    [activeFilter],
+  );
+  const activeFilterAction = useMemo(
+    () => getDeviceCreationAction(topLevelActiveFilter),
+    [topLevelActiveFilter],
+  );
+  const deviceTypeSelectorOptions = useMemo(
+    () => filterOptions.map(option => ({
+      key: option.key,
+      label: option.label,
+    })),
+    [filterOptions],
+  );
+  const pdvGatewaySelectorOptions = useMemo(
+    () => [
+      {key: PDV_DEVICE_TYPE, label: tt('device_filter', 'all') || 'Todos'},
+      ...pdvSubfilterOptions.map(option => ({
+        key: option.key,
+        label: option.label,
+      })),
+    ],
+    [pdvSubfilterOptions],
+  );
+  const selectedDeviceTypeLabel = useMemo(
+    () =>
+      deviceTypeSelectorOptions.find(option => option.key === topLevelActiveFilter)?.label ||
+      tt('device_filter', 'allTypes') ||
+      'Todos os tipos',
+    [deviceTypeSelectorOptions, topLevelActiveFilter],
+  );
+  const selectedPdvGatewayLabel = useMemo(
+    () =>
+      pdvGatewaySelectorOptions.find(option => option.key === activeFilter)?.label ||
+      tt('device_filter', 'all') ||
+      'Todos',
+    [activeFilter, pdvGatewaySelectorOptions],
+  );
+  const ActiveTabComponent = activeFilterDefinition.TabComponent;
+
+  useEffect(() => {
+    if (!hasRegisteredDeviceFilter(activeFilter)) {
+      setActiveFilter(ALL_DEVICE_FILTER);
+    }
+  }, [activeFilter]);
+
+  return (
+    <SafeAreaView
+      style={[styles.container, {backgroundColor: brandColors.background}]}>
+      <View style={styles.filtersBlock}>
+        <Text style={styles.filtersLabel}>{tt('device_filter', 'filterByType') || 'Filtrar por tipo'}</Text>
+        <CompactFilterSelector
+          icon={getDeviceFilterIcon(topLevelActiveFilter)}
+          label={selectedDeviceTypeLabel}
+          title={tt('device_filter', 'filterByType') || 'Filtrar por tipo'}
+          accentColor={getDeviceFilterAccent(topLevelActiveFilter, {
+            brandColors,
+            hex: accentPalette,
+          })}
+          active={topLevelActiveFilter !== ALL_DEVICE_FILTER}
+          options={deviceTypeSelectorOptions}
+          selectedKey={topLevelActiveFilter}
+          onSelect={optionKey => {
+            setActiveFilter(optionKey);
+            return true;
+          }}
+        />
+      </View>
+
+      {topLevelActiveFilter === PDV_DEVICE_TYPE && pdvSubfilterOptions.length > 0 ? (
+        <View style={styles.filtersBlock}>
+          <Text style={styles.filtersLabel}>{tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}</Text>
+          <CompactFilterSelector
+            icon={getDeviceFilterIcon(activeFilter)}
+            label={selectedPdvGatewayLabel}
+            title={tt('device_filter', 'pdvGateway') || 'Gateway do PDV'}
+            accentColor={getDeviceFilterAccent(activeFilter, {
+              brandColors,
+              hex: accentPalette,
+            })}
+            active={activeFilter !== PDV_DEVICE_TYPE}
+            options={pdvGatewaySelectorOptions}
+            selectedKey={activeFilter}
+            onSelect={optionKey => {
+              setActiveFilter(optionKey);
+              return true;
+            }}
+          />
+        </View>
+      ) : null}
+
+      {activeFilterAction ? (
+        <View style={styles.printerActionBlock}>
+          <TouchableOpacity
+            style={[
+              styles.createPrinterBtn,
+              {backgroundColor: brandColors.primary},
+            ]}
+            activeOpacity={0.86}
+            onPress={() => navigation.navigate(activeFilterAction.routeName)}>
+            <Icon name="plus-circle" size={16} color={brandColors.white} />
+            <Text style={styles.createPrinterBtnText}>
+              {activeFilterAction.label}
+            </Text>
+          </TouchableOpacity>
+
+          <Text style={styles.helperText}>
+            {activeFilterAction.helperText}
+          </Text>
+        </View>
+      ) : null}
+
+      {ActiveTabComponent ? (
+        <ActiveTabComponent
+          themePalette={themePalette}
+          key={`${activeFilter}-${currentCompany?.id || 'company'}`}
+        />
+      ) : null}
+    </SafeAreaView>
+  );
+};
+
+export default Devices;

package/src/react/utils/productCatalogCacheRevision.js

@@ -0,0 +1,13 @@
+import eventBus from '../components/EventBus';
+
+const key = 'product-catalog-cache-revision';
+let revision = '0';
+let sequence = 0;
+export const getProductCatalogCacheRevision = () => {
+  try { return localStorage.getItem(key) || revision; } catch { return revision; }
+};
+export const invalidateProductCatalogCache = () => {
+  revision = `${Date.now()}:${++sequence}`;
+  try { localStorage.setItem(key, revision); } catch { /* In-memory invalidation still applies. */ }
+  eventBus.emit('product-catalog-cache:cleared');
+};

package/src/react/utils/runtimeFooter.js

@@ -128,6 +128,26 @@ const formatRuntimeFooterVersion = version => {
   return normalizedVersion ? `v${normalizedVersion}` : '';
 };
 
+const IPV4_PATTERN = /^(\d{1,3}\.){3}\d{1,3}$/;
+
+// IPv4 is shown in full; other ':'-separated ids (IPv6/MAC-like) are shortened
+// to an ellipsis plus the last two blocks, e.g. "…46f4:eb0b".
+const formatRuntimeFooterIdentifier = value => {
+  const identifier = safeTrim(value);
+
+  if (!identifier || IPV4_PATTERN.test(identifier) || !identifier.includes(':')) {
+    return identifier;
+  }
+
+  const blocks = identifier.split(':').filter(Boolean);
+
+  if (blocks.length <= 2) {
+    return identifier;
+  }
+
+  return `…${blocks.slice(-2).join(':')}`;
+};
+
 const getRuntimeFooterWebHost = () => {
   const hostname = safeTrim(globalThis?.location?.hostname);
 
@@ -364,9 +384,9 @@ const getRuntimeFooterDebugInfo = ({device, appVersion, deviceConfig}) => {
   const nativeIdentifier = nativeIdentifierCandidates[0]?.value || '';
   const runtimeDetail = operationModeLabel
     ? operationModeLabel
-    : isWebRuntime
-      ? webIdentifier
-      : nativeIdentifier;
+    : formatRuntimeFooterIdentifier(
+      isWebRuntime ? webIdentifier : nativeIdentifier,
+    );
   const runtimeDetailSource = operationModeLabel
     ? 'device_config.configs.pos-operation-mode'
     : isWebRuntime
@@ -444,6 +464,7 @@ module.exports = {
   getRuntimeFooterStoredVersion,
   getRuntimeFooterTextLines,
   getRuntimeFooterVersionCandidates,
+  formatRuntimeFooterIdentifier,
   getRuntimeFooterWebIdentifierCandidates,
   getRuntimeFooterText,
   getRuntimeFooterWebHost,

package/src/tests/react/utils/runtimeFooter.test.js

@@ -2,6 +2,7 @@ const assert = require('node:assert/strict')
 const {after, before, test} = require('node:test')
 
 const {
+  formatRuntimeFooterIdentifier,
   getRuntimeFooterDebugInfo,
   getRuntimeFooterNativeIdentifierCandidates,
   getRuntimeFooterPrimaryText,
@@ -487,3 +488,28 @@ test('hides runtime device information on the customer paylist only', () => {
   assert.equal(shouldShowRuntimeFooter('LoginPage'), true)
   assert.equal(shouldShowRuntimeFooter('WalletsPage'), true)
 })
+
+test('formats runtime identifier: IPv4 full, non-IPv4 shortened to last two blocks', () => {
+  assert.equal(formatRuntimeFooterIdentifier('179.110.95.138'), '179.110.95.138')
+  assert.equal(
+    formatRuntimeFooterIdentifier('2804:18:1119:f433:54b4:a587:46f4:eb0b'),
+    '…46f4:eb0b',
+  )
+  assert.equal(formatRuntimeFooterIdentifier('aa:bb:cc:dd:ee:ff'), '…ee:ff')
+  assert.equal(formatRuntimeFooterIdentifier('::1'), '::1')
+  assert.equal(formatRuntimeFooterIdentifier('abc'), 'abc')
+  assert.equal(formatRuntimeFooterIdentifier(''), '')
+  assert.equal(formatRuntimeFooterIdentifier(null), '')
+})
+
+test('primary text shortens IPv6 public ip', () => {
+  const text = getRuntimeFooterPrimaryText({
+    device: {
+      type: 'PDV',
+      systemName: 'web',
+      metadata: {network: {publicIp: '2804:18:1119:f433:54b4:a587:46f4:eb0b'}},
+    },
+    appVersion: '1.10.68',
+  })
+  assert.ok(text.includes('(…46f4:eb0b)'), text)
+})

package/src/tests/react/utils/storedSessionToken.test.js

@@ -0,0 +1,22 @@
+const assert = require('node:assert/strict');
+const {test} = require('node:test');
+const {readStoredSessionToken} = require('../../../utils/storedSessionToken');
+
+for (const prefix of ['', '__q_objt|']) {
+  for (const field of ['token', 'api_key']) {
+    test(`reads ${field} from ${prefix ? 'wrapped' : 'plain'} session`, () => {
+      const storage = {getItem: key => key === 'session' ? prefix + JSON.stringify({[field]: 'synthetic-token'}) : null};
+      assert.equal(readStoredSessionToken(storage), 'synthetic-token');
+    });
+  }
+}
+test('prefers the canonical token field when both are present', () => {
+  assert.equal(readStoredSessionToken({getItem: () => JSON.stringify({token: 'current', api_key: 'old'})}), 'current');
+});
+test('missing, malformed and inaccessible sessions have no token', () => {
+  for (const raw of [null, '', 'broken', '__q_objt|broken', '{}', 'null']) {
+    assert.equal(readStoredSessionToken({getItem: () => raw}), '');
+  }
+  assert.equal(readStoredSessionToken({getItem: () => {throw new Error('unavailable');}}), '');
+  assert.equal(readStoredSessionToken(null), '');
+});

package/src/utils/storedSessionToken.js

@@ -0,0 +1,18 @@
+// Quasar LocalStorage serializes objects with this marker; plain JSON is also used.
+const OBJECT_PREFIX = '__q_objt|';
+
+const readStoredSessionToken = (storage = typeof localStorage === 'undefined' ? null : localStorage) => {
+  try {
+    const raw = storage?.getItem?.('session');
+    if (!raw) return '';
+    const json = typeof raw === 'string' && raw.startsWith(OBJECT_PREFIX)
+      ? raw.slice(OBJECT_PREFIX.length)
+      : raw;
+    const session = JSON.parse(json);
+    return session?.token || session?.api_key || '';
+  } catch {
+    return '';
+  }
+};
+
+module.exports = {readStoredSessionToken};

package/docs/homepage-1056.md

@@ -1,16 +0,0 @@
-# Homepage ADMIN/MANAGER — app-community#1056
-
-Soft appearance is opt-in for HomePage only. Existing menu routes/parameters, permissions, stores and translations are preserved. App-provided homepage colors and components are used only in this appearance. Default consumers retain their current behavior.
-
-Source: https://github.com/ControleOnline/app-community/issues/1056
-Local evidence: 40 homepage tests and 34 runtime footer/zoom tests passed. No production authorization.
-
-## Web login translation bootstrap
-
-Keep the navigation tree mounted while translations initialize. Hide the shell and disable pointer/accessibility interaction until the existing translation readiness contract succeeds. Unmounting navigation during login resets its route and repeatedly mounts/registers the bottom bar, causing React maximum update depth. No route, permission, translation source, theme or zoom changes. Native behavior is unchanged.
-
-Regression evidence: app-community homepage bootstrapNavigation.test.js reproduced maximum update depth before the fix, then passed after it. 44 tests across 9 homepage suites passed. Runtime Dev reproduced the unfixed bug; new runtime verification is required after consuming ui-common 1.2.96.
-
-Release 1.2.96 uses the task-only c91510d source plus version metadata. The integration merge into dev preserves independent team work, but those changes are excluded from this homepage package. Publication uses the existing tag-triggered trusted publishing workflow.
-
-Release 1.2.97 completes the web bootstrap gate with visibility:hidden and aria-hidden: pending descendants cannot receive keyboard focus while navigation stays mounted. Native behavior remains unchanged.