@controleonline/ui-customers 1.0.81

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

@@ -0,0 +1,221 @@
+const extractId = value => String(value || '').replace(/\D/g, '');
+
+/** API Platform expects people as IRI (e.g. /people/106218), not a bare id. */
+const toPeopleIri = value => {
+  const id = extractId(value);
+  return id ? `/people/${id}` : '';
+};
+
+/** Query for GET /users when opening the Users tab on client-details. */
+const buildUsersListQuery = client => {
+  const peopleIri = toPeopleIri(client?.id || client?.['@id']);
+  if (!peopleIri) {
+    return null;
+  }
+  return {
+    people: peopleIri,
+    itemsPerPage: 100,
+    __storeMeta: {
+      dedupeKey: `client-details-users-${peopleIri}`,
+      skipSystemError: true,
+    },
+  };
+};
+
+
+const normalizeUserItem = entry => {
+  if (!entry) {
+    return null;
+  }
+
+  const id = extractId(entry?.id || entry?.['@id'] || entry?.user?.id || entry?.user?.['@id']);
+  const username = String(
+    entry?.username || entry?.name || entry?.user?.username || '',
+  ).trim();
+  const apiKey = String(
+    entry?.apiKey || entry?.api_key || entry?.user?.apiKey || entry?.user?.api_key || '',
+  ).trim();
+  const role = String(entry?.role || 'Usuario').trim() || 'Usuario';
+  const timezoneId = extractId(
+    entry?.timezone?.id ||
+      entry?.timezone?.['@id'] ||
+      entry?.timezone_id ||
+      entry?.timezoneId ||
+      entry?.timezone,
+  );
+
+  if (!id && !username && !apiKey) {
+    return null;
+  }
+
+  return {
+    id: id || `temp-${Date.now()}`,
+    username,
+    name: username,
+    role,
+    apiKey,
+    timezoneId: timezoneId || '',
+  };
+};
+
+const embeddedUsersFromClient = client => {
+  const sourceUsers = Array.isArray(client?.user)
+    ? client.user
+    : client?.user
+      ? [client.user]
+      : [];
+  return sourceUsers.map(normalizeUserItem).filter(Boolean);
+};
+
+const mapUsersForClient = users =>
+  users.map(user => ({
+    id: extractId(user?.id) || user?.id,
+    '@id': extractId(user?.id) || user?.id,
+    username: user?.username || user?.name || '',
+    role: user?.role || 'Usuario',
+    apiKey: user?.apiKey || '',
+    timezoneId: user?.timezoneId || '',
+  }));
+
+const formatApiKeyPreview = value => {
+  const apiKey = String(value || '').trim();
+  if (!apiKey) {
+    return 'Chave de API indisponivel';
+  }
+
+  if (apiKey.length <= 16) {
+    return apiKey;
+  }
+
+  return `${apiKey.slice(0, 8)}...${apiKey.slice(-6)}`;
+};
+
+const copyTextToClipboard = async text => {
+  const normalizedText = String(text ?? '').trim();
+  if (!normalizedText) {
+    return false;
+  }
+
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator?.clipboard &&
+    typeof navigator.clipboard.writeText === 'function'
+  ) {
+    await navigator.clipboard.writeText(normalizedText);
+    return true;
+  }
+
+  return false;
+};
+
+const extractErrorMessage = error => {
+  if (Array.isArray(error?.violations) && error.violations.length) {
+    return error.violations
+      .map(item => item?.message || item)
+      .filter(Boolean)
+      .join('\n');
+  }
+
+  if (Array.isArray(error?.message)) {
+    return error.message
+      .map(item => item?.message || item)
+      .filter(Boolean)
+      .join(', ');
+  }
+
+  const status = error?.response?.status || error?.status;
+  if (status === 401) {
+    return 'Autenticação necessária. Faça login novamente e tente criar o usuário.';
+  }
+
+  if (error?.response?.data?.message) {
+    return String(error.response.data.message);
+  }
+
+  const msg = error?.message || error?.error || (typeof error === 'string' ? error : '');
+  if (/authentication required/i.test(String(msg))) {
+    return 'Autenticação necessária. Faça login novamente e tente criar o usuário.';
+  }
+
+  return msg;
+};
+
+const apiKeyModalStyles = {
+  buttonRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 12,
+  },
+  secondaryButton: {
+    flex: 1,
+    minWidth: 132,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#64748B',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  secondaryText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#64748B',
+  },
+};
+
+
+const toTimezoneItem = entry => {
+  if (!entry) {
+    return null;
+  }
+  const id = extractId(entry?.id || entry?.['@id']);
+  if (!id) {
+    return null;
+  }
+  const name = String(entry?.name || entry?.timezone || '').trim();
+  const displayName = String(
+    entry?.displayName || entry?.label || entry?.offset || name,
+  ).trim();
+  return {
+    id,
+    name,
+    displayName: displayName || name || id,
+  };
+};
+
+const extractCollectionItems = response => {
+  if (Array.isArray(response)) {
+    return response;
+  }
+  if (Array.isArray(response?.member)) {
+    return response.member;
+  }
+  if (Array.isArray(response?.['hydra:member'])) {
+    return response['hydra:member'];
+  }
+  if (Array.isArray(response?.items)) {
+    return response.items;
+  }
+  return [];
+};
+
+const toTimezoneIri = timezoneId => {
+  const id = extractId(timezoneId);
+  return id ? `/timezones/${id}` : null;
+};
+
+module.exports = {
+  apiKeyModalStyles,
+  copyTextToClipboard,
+  extractCollectionItems,
+  extractErrorMessage,
+  extractId,
+  toPeopleIri,
+  buildUsersListQuery,
+  embeddedUsersFromClient,
+  formatApiKeyPreview,
+  mapUsersForClient,
+  normalizeUserItem,
+  toTimezoneIri,
+  toTimezoneItem,
+};

package/src/react/domain/productSupplierFlow.js

@@ -0,0 +1,37 @@
+export const extractId = value => {
+  if (value === null || value === undefined || value === '') return '';
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') {
+    const match = value.match(/(\d+)$/);
+    return match ? match[1] : value;
+  }
+  if (typeof value === 'object') {
+    return extractId(value.id || value['@id'] || '');
+  }
+  return '';
+};
+
+export const buildInitialProviderPayload = client => {
+  const providerId = extractId(client?.id || client?.['@id']);
+
+  return {
+    id: providerId,
+    '@id': client?.['@id'] || (providerId ? `/people/${providerId}` : ''),
+    alias: String(client?.alias || '').trim(),
+    name: String(client?.name || '').trim(),
+    peopleType: client?.peopleType || '',
+  };
+};
+
+export const buildCreateProductParams = client => {
+  const initialProvider = buildInitialProviderPayload(client);
+
+  if (!initialProvider.id) {
+    return null;
+  }
+
+  return {
+    context: 'products',
+    initialProvider,
+  };
+};

package/src/react/index.js

@@ -0,0 +1,4 @@
+// React entrypoint kept after Vue removal.
+const moduleEntry = {};
+
+export default moduleEntry;

package/src/react/pages/ClientDetailsSkeleton.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import styles from './details.page.styles';
+
+/**
+ * Loading skeleton for ClientDetails — extracted to keep details.js under 500 lines.
+ */
+const ClientDetailsSkeleton = ({ tabs = [] }) => (
+  <SafeAreaView style={styles.container} edges={['bottom']}>
+    <View style={styles.headerProfile}>
+      <View
+        style={[
+          styles.skeletonCircle,
+          { width: 64, height: 64, borderRadius: 32, marginBottom: 12 },
+        ]}
+      />
+      <View
+        style={[
+          styles.skeletonLine,
+          { width: 180, height: 22, marginBottom: 8 },
+        ]}
+      />
+      <View style={[styles.skeletonLine, { width: 90, height: 12 }]} />
+    </View>
+
+    <View style={styles.tabsHeader}>
+      {tabs.map(tab => (
+        <View key={`skeleton-${tab.key}`} style={styles.skeletonTab} />
+      ))}
+    </View>
+
+    <View style={styles.skeletonContent}>
+      <View style={styles.skeletonCard}>
+        <View
+          style={[
+            styles.skeletonLine,
+            { width: '48%', height: 18, marginBottom: 14 },
+          ]}
+        />
+        <View
+          style={[
+            styles.skeletonLine,
+            { width: '100%', height: 14, marginBottom: 10 },
+          ]}
+        />
+        <View
+          style={[
+            styles.skeletonLine,
+            { width: '90%', height: 14, marginBottom: 10 },
+          ]}
+        />
+        <View style={[styles.skeletonLine, { width: '82%', height: 14 }]} />
+      </View>
+      <View style={styles.skeletonCard}>
+        <View
+          style={[
+            styles.skeletonLine,
+            { width: '52%', height: 18, marginBottom: 14 },
+          ]}
+        />
+        <View
+          style={[
+            styles.skeletonLine,
+            {
+              width: '100%',
+              height: 46,
+              borderRadius: 10,
+              marginBottom: 10,
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.skeletonLine,
+            { width: '100%', height: 46, borderRadius: 10 },
+          ]}
+        />
+      </View>
+    </View>
+  </SafeAreaView>
+);
+
+export default ClientDetailsSkeleton;

package/src/react/pages/clientDetailsHelpers.js

@@ -0,0 +1,17 @@
+/** Compatibility exports for the shared people detail contract. */
+
+export {
+  resolveContextKey,
+  normalizeCollection,
+  PERSON_PHOTO_MEDIA_TYPES,
+  COMPANY_ICON_MEDIA_TYPES,
+  extractId,
+  resolveRouteClientSeed,
+  resolveRouteClientId,
+  mergeLinkedContactIntoClient,
+} from '@controleonline/ui-people/src/react/utils/peopleDetailsHelpers';
+
+export {
+  resolvePeopleDetailTabIndex as resolveInitialTabIndex,
+  buildPeopleDetailTabDefs as buildClientTabDefs,
+} from '@controleonline/ui-people/src/react/utils/peopleDetailsHelpers';

package/src/react/pages/clients.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import People from '@controleonline/ui-people/src/react/pages/People';
+
+const Clients = () => {
+  return (
+    <People
+      context={{
+        context: ['client', 'prospect'],
+        defaultContext: 'client',
+        // Keep the index independent from optional remote media. Broken/stale
+        // avatar files must not generate 404 requests while browsing clients.
+        usePeopleImage: false,
+        title: global.t?.t('people', 'title', 'clients'),
+        searchPlaceholder: global.t?.t('people', 'searchPlaceholder', 'searchClient'),
+        modalTitleByType: {
+          client: global.t?.t('people', 'title', 'registerClient'),
+          prospect: global.t?.t('people', 'title', 'registerProspect'),
+        },
+        emptyTitle: global.t?.t('people', 'title', 'emptyClient'),
+        emptySearchTitle: global.t?.t('people', 'title', 'emptySearchClient'),
+        emptySubtitle: global.t?.t('people', 'title', 'addFirstClient'),
+      }}
+    />
+  );
+};
+
+export default Clients;