@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -19,6 +19,7 @@ import { Switch } from '@/components/ui/switch';
 import { TagsInput } from '@/components/ui/tags-input';
 import { ByteSizeInput } from './byte-size-input';
 import { DurationInput } from './duration-input';
+import { buildAbsoluteImageUrl } from '@/lib/build-image-url';
 import { revalidateSystemIcon } from '@/lib/revalidate-icon';
 import { cn } from '@/lib/utils';
 import {
@@ -27,7 +28,8 @@ import {
   SettingTypeEnum,
 } from '@hed-hog/api-types';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Eye, EyeOff, Pencil, Plus, Upload } from 'lucide-react';
+import { ExternalLink, Eye, EyeOff, Pencil, Plus, Upload } from 'lucide-react';
+import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
@@ -42,21 +44,6 @@ type ApiPaginated<T> = {
   lastPage: number;
 };
 
-type IntegrationTypeOption = {
-  id: number;
-  slug: string;
-};
-
-type IntegrationProviderOption = {
-  id: number;
-  slug: string;
-  type_id: number;
-  integration_provider_locale?: {
-    name: string;
-    locale: { code: string };
-  }[];
-};
-
 type IntegrationProfileOption = {
   id: number;
   slug: string;
@@ -90,110 +77,243 @@ function getLocalizedIntegrationName(
   );
 }
 
-const MAIL_INTEGRATION_PROFILE_SETTING_SLUG = 'mail-integration-profile-id';
-const SCALING_INFRA_PROFILE_SETTING_SLUG = 'scaling.video.integration_profile_id';
-const HEDHOG_K8S_INFRA_PROFILE_SETTING_SLUG =
-  'hedhog.k8s_integration_profile_id';
-const COMMERCE_PAYMENT_PROFILE_SETTING_SLUG =
-  'commerce-default-payment-profile-id';
-const DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG =
-  'operations.daily-report.email-integration-profile-id';
-const DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG =
-  'operations.daily-report.whatsapp-integration-profile-id';
-const AI_PROFILE_SETTING_SLUGS = [
-  'ai-gemini-profile-id',
-  'ai-openai-profile-id',
-  'mcp-ai-profile-id',
-];
-const OAUTH_PROFILE_SLUG_TO_PROVIDER: Record<string, string> = {
-  'oauth-google-profile-id': 'google-oauth',
-  'oauth-facebook-profile-id': 'facebook-oauth',
-  'oauth-github-profile-id': 'github-oauth',
-  'oauth-microsoft-profile-id': 'microsoft-oauth',
-  'oauth-microsoft-entra-id-profile-id': 'microsoft-entra-id-oauth',
-  'oauth-apple-profile-id': 'apple-oauth',
-  'oauth-linkedin-profile-id': 'linkedin-oauth',
+type IntegrationProfileSettingConfig = {
+  /**
+   * Tipo de perfil aceito pela setting. Filtra a listagem do picker e trava o
+   * sheet de criação. Ausente só na rede de segurança, onde listamos tudo.
+   */
+  typeSlug?: string;
+  /** Estreita para um provider específico (OAuth, Kubernetes). */
+  providerSlug?: string;
+  /** Providers a esconder mesmo sendo do tipo certo. */
+  excludeProviders?: string[];
+  /** Substantivo usado nos rótulos dos botões editar/criar. */
+  profileNameKey?: string;
 };
-// Settings cujo valor é o SLUG de um integration_profile. O picker continua sendo
-// selecionado/exibido pelo nome; apenas o valor persistido é o slug.
-const ALL_INTEGRATION_PROFILE_SETTING_SLUGS = [
-  MAIL_INTEGRATION_PROFILE_SETTING_SLUG,
-  SCALING_INFRA_PROFILE_SETTING_SLUG,
-  HEDHOG_K8S_INFRA_PROFILE_SETTING_SLUG,
-  COMMERCE_PAYMENT_PROFILE_SETTING_SLUG,
-  DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG,
-  DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG,
-  'file-storage-profile-id',
-  'lms-bulk-upload-storage-profile-id',
-  ...AI_PROFILE_SETTING_SLUGS,
-  ...Object.keys(OAUTH_PROFILE_SLUG_TO_PROVIDER),
-];
-
-function toSlug(value: string) {
-  return (value || 'profile')
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
-}
 
-function getDailyReportIntegrationTypeSlug(settingSlug: string) {
-  if (settingSlug === DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG) {
-    return 'email';
-  }
+/**
+ * Settings cujo valor é o SLUG de um integration_profile — o sufixo `-id` é
+ * histórico, nenhuma delas guarda o id numérico. Uma entrada aqui é tudo que
+ * uma setting nova precisa para ganhar o picker completo; sem ela o campo cai
+ * na rede de segurança de `getIntegrationProfileSettingConfig` (picker sem
+ * filtro de tipo).
+ *
+ * Deve espelhar `SELECT slug FROM setting WHERE component = 'entity-picker'`.
+ */
+const INTEGRATION_PROFILE_SETTINGS: Record<
+  string,
+  IntegrationProfileSettingConfig
+> = {
+  // IA
+  'ai-openai-profile-id': { typeSlug: 'ai' },
+  'ai-gemini-profile-id': { typeSlug: 'ai' },
+  'ai-deepseek-profile-id': { typeSlug: 'ai' },
+  'mcp-ai-profile-id': { typeSlug: 'ai' },
+  'richtext-ai-profile-id': { typeSlug: 'ai' },
+  'lms-ai-course-generation-profile-id': { typeSlug: 'ai' },
+  'lms-ai-lesson-xp-profile-id': { typeSlug: 'ai' },
+  'lms-ai-transcription-profile-id': { typeSlug: 'ai' },
+  'lms-ai-course-image-profile-id': { typeSlug: 'ai' },
+  'lms-ai-discussion-reply-profile-id': { typeSlug: 'ai' },
+  'sac.ai.integration-profile-id': { typeSlug: 'ai' },
+  // Transcrição de áudio só existe na OpenAI; oferecer Gemini ou Claude aqui
+  // deixaria escolher um perfil que o worker recusa.
+  'sac.whatsapp.transcription-profile-id': {
+    typeSlug: 'ai',
+    providerSlug: 'openai',
+  },
+  'campaign.ai.integration-profile-id': { typeSlug: 'ai' },
+
+  // E-mail. O IMAP é do tipo `email` mas só serve para receber:
+  // `buildMailConfigFromIntegration` recusa usá-lo no envio, então oferecê-lo
+  // aqui seria deixar escolher um perfil que o backend rejeita depois.
+  'mail-integration-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+  'lms-discussion-notify-email-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+  'lms-digest-notify-email-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+  'lms-celebration-notify-email-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+  'lms-class-reminder-notify-email-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+  'operations.daily-report.email-integration-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+  'operations.approval-notifications.email-integration-profile-id': {
+    typeSlug: 'email',
+    excludeProviders: ['imap'],
+  },
+
+  // WhatsApp
+  'lms-discussion-notify-whatsapp-profile-id': { typeSlug: 'whatsapp' },
+  'lms-digest-notify-whatsapp-profile-id': { typeSlug: 'whatsapp' },
+  'lms-celebration-notify-whatsapp-profile-id': { typeSlug: 'whatsapp' },
+  'lms-class-reminder-notify-whatsapp-profile-id': { typeSlug: 'whatsapp' },
+  'operations.daily-report.whatsapp-integration-profile-id': {
+    typeSlug: 'whatsapp',
+  },
+  'operations.approval-notifications.whatsapp-integration-profile-id': {
+    typeSlug: 'whatsapp',
+  },
+  'sac.notify-whatsapp-profile-id': { typeSlug: 'whatsapp' },
+
+  // Armazenamento
+  'file-storage-profile-id': { typeSlug: 'storage' },
+  'lms-bulk-upload-storage-profile-id': { typeSlug: 'storage' },
+
+  // OAuth — um provider por setting
+  'oauth-google-profile-id': {
+    typeSlug: 'oauth',
+    providerSlug: 'google-oauth',
+  },
+  'oauth-facebook-profile-id': {
+    typeSlug: 'oauth',
+    providerSlug: 'facebook-oauth',
+  },
+  'oauth-github-profile-id': {
+    typeSlug: 'oauth',
+    providerSlug: 'github-oauth',
+  },
+  'oauth-microsoft-profile-id': {
+    typeSlug: 'oauth',
+    providerSlug: 'microsoft-oauth',
+  },
+  'oauth-microsoft-entra-id-profile-id': {
+    typeSlug: 'oauth',
+    providerSlug: 'microsoft-entra-id-oauth',
+  },
+  'oauth-apple-profile-id': { typeSlug: 'oauth', providerSlug: 'apple-oauth' },
+  'oauth-linkedin-profile-id': {
+    typeSlug: 'oauth',
+    providerSlug: 'linkedin-oauth',
+  },
+
+  // Pagamento. O Google Play só cobra por compra dentro do app Android
+  // (`commerce-android-checkout-mode`), então escolhê-lo como gateway padrão
+  // quebraria o checkout do site. O backend também recusa — isto é só para não
+  // oferecer.
+  'commerce-default-payment-profile-id': {
+    typeSlug: 'payment',
+    excludeProviders: ['google_play'],
+  },
+
+  // Infraestrutura
+  'scaling.video.integration_profile_id': { typeSlug: 'infrastructure' },
+  'hedhog.k8s_integration_profile_id': {
+    typeSlug: 'infrastructure',
+    providerSlug: 'kubernetes',
+    profileNameKey: 'profileTypeNames.kubernetes',
+  },
+};
 
-  if (settingSlug === DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG) {
-    return 'whatsapp';
-  }
+/** Chaves de tradução do picker, por tipo de perfil. */
+const PROFILE_TYPE_TRANSLATION_KEYS: Record<
+  string,
+  { placeholder: string; emptyState: string; name: string }
+> = {
+  ai: {
+    placeholder: 'selectAiProfile',
+    emptyState: 'aiProfileEmptyState',
+    name: 'profileTypeNames.ai',
+  },
+  email: {
+    placeholder: 'selectMailProfile',
+    emptyState: 'mailProfileEmptyState',
+    name: 'profileTypeNames.email',
+  },
+  whatsapp: {
+    placeholder: 'selectWhatsAppProfile',
+    emptyState: 'whatsappProfileEmptyState',
+    name: 'profileTypeNames.whatsapp',
+  },
+  storage: {
+    placeholder: 'selectStorageProfile',
+    emptyState: 'storageProfileEmptyState',
+    name: 'profileTypeNames.storage',
+  },
+  oauth: {
+    placeholder: 'selectOAuthProfile',
+    emptyState: 'oauthProfileEmptyState',
+    name: 'profileTypeNames.oauth',
+  },
+  payment: {
+    placeholder: 'selectPaymentProfile',
+    emptyState: 'paymentProfileEmptyState',
+    name: 'profileTypeNames.payment',
+  },
+  infrastructure: {
+    placeholder: 'selectInfraProfile',
+    emptyState: 'infraProfileEmptyState',
+    name: 'profileTypeNames.infrastructure',
+  },
+};
+
+const GENERIC_PROFILE_TRANSLATION_KEYS = {
+  placeholder: 'selectIntegrationProfile',
+  emptyState: 'integrationProfileEmptyState',
+  name: 'profileTypeNames.generic',
+};
+
+/**
+ * Convenção de nome das settings que guardam um perfil: `...-profile-id`,
+ * `...integration_profile_id` e variantes.
+ */
+const PROFILE_SETTING_SLUG_PATTERN =
+  /(^|[.\-_])(integration[-_])?profile[-_]id$/;
+
+const warnedUnmappedProfileSettings = new Set<string>();
 
-  return null;
+/** Settings cujo valor exibido precisa ser resolvido a partir do slug salvo. */
+function isIntegrationProfileSetting(settingSlug: string) {
+  return (
+    settingSlug in INTEGRATION_PROFILE_SETTINGS ||
+    PROFILE_SETTING_SLUG_PATTERN.test(settingSlug)
+  );
 }
 
-function buildIntegrationProfileConfig(
-  providerSlug: string,
-  values: Record<string, string>
-) {
-  const trim = (key: string) => String(values[key] ?? '').trim();
-
-  if (providerSlug === 'smtp') {
-    return {
-      host: trim('host'),
-      port: Number(trim('port') || 587),
-      username: trim('username'),
-      password: trim('password'),
-      secure: values.secure === 'true',
-      from_email: trim('from_email'),
-      from_name: trim('from_name'),
-      reply_to_email: trim('reply_to_email'),
-    };
+/**
+ * Config do picker para uma setting `entity-picker`. Slug fora do registry mas
+ * com cara de campo de perfil ainda ganha um picker — sem filtro de tipo, mas
+ * melhor do que obrigar o administrador a digitar o slug à mão (era o que
+ * acontecia com `sac.ai.integration-profile-id`). `null` = não é campo de
+ * perfil, renderiza como texto.
+ */
+function getIntegrationProfileSettingConfig(
+  settingSlug: string
+): IntegrationProfileSettingConfig | null {
+  const config = INTEGRATION_PROFILE_SETTINGS[settingSlug];
+  if (config) {
+    return config;
   }
 
-  if (providerSlug === 'gmail') {
-    return {
-      client_id: trim('client_id'),
-      client_secret: trim('client_secret'),
-      refresh_token: trim('refresh_token'),
-      from_email: trim('from_email'),
-      from_name: trim('from_name'),
-    };
+  if (!PROFILE_SETTING_SLUG_PATTERN.test(settingSlug)) {
+    return null;
   }
 
-  if (providerSlug === 'ses') {
-    return {
-      access_key_id: trim('access_key_id'),
-      secret_access_key: trim('secret_access_key'),
-      region: trim('region'),
-      from_email: trim('from_email'),
-      from_name: trim('from_name'),
-    };
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    !warnedUnmappedProfileSettings.has(settingSlug)
+  ) {
+    warnedUnmappedProfileSettings.add(settingSlug);
+    console.warn(
+      `[setting-field] "${settingSlug}" não está em INTEGRATION_PROFILE_SETTINGS; ` +
+        'listando perfis de integração de todos os tipos.'
+    );
   }
 
-  return {
-    host: trim('host'),
-    token: trim('token'),
-    instance_name: trim('instance_name'),
-  };
+  return {};
 }
 
 export const SettingField = ({ setting, className }: SettingFieldProps) => {
@@ -207,6 +327,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   } = useApp();
   const component =
     setting.component?.replaceAll('_', '-') || SettingComponentEnum.INPUT_TEXT;
+  /**
+   * Rótulo de uma opção de lista (radio/combobox). Valores como `play_billing`
+   * não dizem nada ao administrador, então procuramos uma tradução dedicada em
+   * `settingOptions.<slug>.<valor>` e só caímos no valor cru quando não existe.
+   */
+  const optionLabel = (value: string) => {
+    const key = `settingOptions.${setting.slug}.${value}`;
+    return t.has(key) ? t(key) : value;
+  };
   const [localValue, setLocalValue] = useState(setting.value);
   const [storageProfileSelectedLabel, setStorageProfileSelectedLabel] =
     useState('');
@@ -282,14 +411,16 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   }, [localValue]);
 
   useEffect(() => {
-    if (!ALL_INTEGRATION_PROFILE_SETTING_SLUGS.includes(setting.slug)) {
+    if (!isIntegrationProfileSetting(setting.slug)) {
       setStorageProfileSelectedLabel('');
       setResolvedProfileId(null);
       return;
     }
 
+    // `'0'` é o default herdado das settings antigas que nomeavam o campo como
+    // "profile id": não é slug de perfil nenhum, e buscá-lo devolveria vazio.
     const profileSlug = String(localValue ?? '').trim();
-    if (!profileSlug) {
+    if (!profileSlug || profileSlug === '0') {
       setStorageProfileSelectedLabel('');
       setResolvedProfileId(null);
       return;
@@ -485,28 +616,24 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
             },
           });
 
-          const fileId = response.data?.id;
+          const fileId = Number(response.data?.id);
 
           if (!fileId) {
             throw new Error(t('fileIdNotReturned'));
           }
 
-          const openResponse = await request<{ url?: string }>({
-            url: `/file/open/${fileId}`,
-            method: 'PUT',
-          });
-
-          const openUrl = openResponse?.data?.url;
+          // `/file/image/:id` é público, imutável (Cache-Control + ETag) e não
+          // expira. A URL de `PUT /file/open/:id`, gravada aqui antes, carrega
+          // um JWT de 3600s: a setting virava link morto uma hora depois do
+          // upload. Absoluta de propósito — o mesmo valor é lido pelo <img> da
+          // sidebar, pelo favicon dinâmico, pelo metadata do layout e pelo
+          // e-mail transacional, que roda fora do browser.
+          const fileUrl = buildAbsoluteImageUrl(fileId);
 
-          if (!openUrl) {
-            throw new Error(t('temporaryOpenUrlNotReturned'));
+          if (!fileUrl) {
+            throw new Error(t('apiBaseUrlNotConfigured'));
           }
 
-          const fileUrl =
-            typeof openUrl === 'string' && openUrl.startsWith('http')
-              ? openUrl
-              : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${openUrl}`;
-
           handleChangeValue(formatValue(fileUrl));
           showToastHandler('success', t('fileUploaded'));
         } catch (error) {
@@ -649,7 +776,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           <SelectContent>
             {options.map((option) => (
               <SelectItem key={option.id} value={option.value}>
-                {option.value}
+                {optionLabel(option.value)}
               </SelectItem>
             ))}
           </SelectContent>
@@ -671,7 +798,9 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 id={`radio-${option.id}`}
                 className="bg-background"
               />
-              <Label htmlFor={`radio-${option.id}`}>{option.value}</Label>
+              <Label htmlFor={`radio-${option.id}`}>
+                {optionLabel(option.value)}
+              </Label>
             </div>
           ))}
         </RadioGroup>
@@ -702,781 +831,30 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         </div>
       );
 
-    case SettingComponentEnum.ENTITY_PICKER:
-      const dailyReportIntegrationTypeSlug = getDailyReportIntegrationTypeSlug(
-        setting.slug
-      );
-
-      if (
-        setting.slug === 'file-storage-profile-id' ||
-        setting.slug === 'lms-bulk-upload-storage-profile-id'
-      ) {
-        const loadStorageTypeId = async () => {
-          const typesResponse = await request<IntegrationTypeOption[]>({
-            url: '/integration-profile/types',
-            method: 'GET',
-          });
-          const types = (typesResponse.data ?? []) as IntegrationTypeOption[];
-          const typeId = types.find((type) => type.slug === 'storage')?.id;
-
-          if (!typeId) {
-            throw new Error('Integration type "storage" not found.');
-          }
+    // Read-only navigation shortcut: takes the user from a module's settings tab
+    // to a related screen. Deliberately does NOT set isTextInputRef nor call
+    // handleChangeValue — rendering it must never write anything.
+    case SettingComponentEnum.LINK: {
+      const href = String(parsedValue || '');
+      // Internal paths only. A setting value must not become an open redirect.
+      const safeHref =
+        href.startsWith('/') && !href.startsWith('//') ? href : '#';
 
-          return typeId;
-        };
-
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectStorageProfile')}
-                emptyStateDescription={t('storageProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable={false}
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const typeId = await loadStorageTypeId();
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    typeId: String(typeId),
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => {
-                  const providerSlug = String(
-                    opt.integration_provider?.slug ?? ''
-                  );
-                  const providerName = getLocalizedIntegrationName(
-                    opt.integration_provider?.integration_provider_locale,
-                    currentLocaleCode
-                  );
-                  return [providerName || providerSlug, opt.slug]
-                    .filter(Boolean)
-                    .join(' • ');
-                }}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil de armazenamento"
-                title="Editar perfil de armazenamento"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil de armazenamento"
-                title="Criar perfil de armazenamento"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) {
-                  setStorageProfileEditingId(null);
-                }
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="storage"
-              lockedTypeSlug="storage"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
-
-      if (AI_PROFILE_SETTING_SLUGS.includes(setting.slug)) {
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectAiProfile')}
-                emptyStateDescription={t('aiProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable={false}
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    typeSlug: 'ai',
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => {
-                  const providerSlug = String(
-                    opt.integration_provider?.slug ?? ''
-                  );
-                  const providerName = getLocalizedIntegrationName(
-                    opt.integration_provider?.integration_provider_locale,
-                    currentLocaleCode
-                  );
-                  return [providerName || providerSlug, opt.slug]
-                    .filter(Boolean)
-                    .join(' • ');
-                }}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil de IA"
-                title="Editar perfil de IA"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil de IA"
-                title="Criar perfil de IA"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) setStorageProfileEditingId(null);
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="ai"
-              lockedTypeSlug="ai"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
-
-      const oauthProviderSlug = OAUTH_PROFILE_SLUG_TO_PROVIDER[setting.slug];
-      if (oauthProviderSlug) {
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectOAuthProfile')}
-                emptyStateDescription={t('oauthProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable={false}
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    providerSlug: oauthProviderSlug,
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => {
-                  const providerSlug = String(
-                    opt.integration_provider?.slug ?? ''
-                  );
-                  const providerName = getLocalizedIntegrationName(
-                    opt.integration_provider?.integration_provider_locale,
-                    currentLocaleCode
-                  );
-                  return [providerName || providerSlug, opt.slug]
-                    .filter(Boolean)
-                    .join(' • ');
-                }}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil OAuth"
-                title="Editar perfil OAuth"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil OAuth"
-                title="Criar perfil OAuth"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) setStorageProfileEditingId(null);
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="oauth"
-              lockedTypeSlug="oauth"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
-
-      if (setting.slug === COMMERCE_PAYMENT_PROFILE_SETTING_SLUG) {
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectPaymentProfile')}
-                emptyStateDescription={t('paymentProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable={false}
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    typeSlug: 'payment',
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => {
-                  const providerSlug = String(
-                    opt.integration_provider?.slug ?? ''
-                  );
-                  const providerName = getLocalizedIntegrationName(
-                    opt.integration_provider?.integration_provider_locale,
-                    currentLocaleCode
-                  );
-                  return [providerName || providerSlug, opt.slug]
-                    .filter(Boolean)
-                    .join(' • ');
-                }}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil de pagamento"
-                title="Editar perfil de pagamento"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil de pagamento"
-                title="Criar perfil de pagamento"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) setStorageProfileEditingId(null);
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="payment"
-              lockedTypeSlug="payment"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
-
-      if (setting.slug === SCALING_INFRA_PROFILE_SETTING_SLUG) {
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectInfraProfile')}
-                emptyStateDescription={t('infraProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    typeSlug: 'infrastructure',
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => {
-                  const providerSlug = String(
-                    opt.integration_provider?.slug ?? ''
-                  );
-                  const providerName = getLocalizedIntegrationName(
-                    opt.integration_provider?.integration_provider_locale,
-                    currentLocaleCode
-                  );
-                  return [providerName || providerSlug, opt.slug]
-                    .filter(Boolean)
-                    .join(' • ');
-                }}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil de infraestrutura"
-                title="Editar perfil de infraestrutura"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil de infraestrutura"
-                title="Criar perfil de infraestrutura"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) setStorageProfileEditingId(null);
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="infrastructure"
-              lockedTypeSlug="infrastructure"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
-
-      if (setting.slug === HEDHOG_K8S_INFRA_PROFILE_SETTING_SLUG) {
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectK8sInfraProfile')}
-                emptyStateDescription={t('k8sInfraProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    typeSlug: 'infrastructure',
-                    providerSlug: 'kubernetes',
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => opt.slug}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil Kubernetes"
-                title="Editar perfil Kubernetes"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil Kubernetes"
-                title="Criar perfil Kubernetes"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) setStorageProfileEditingId(null);
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="infrastructure"
-              lockedTypeSlug="infrastructure"
-              lockedProviderSlug="kubernetes"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
-
-      if (setting.slug === MAIL_INTEGRATION_PROFILE_SETTING_SLUG) {
-        return (
-          <>
-            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-                placeholder={t('selectMailProfile')}
-                emptyStateDescription={t('mailProfileEmptyState')}
-                value={parsedValue || null}
-                onChange={(slug, option) => {
-                  setStorageProfileSelectedLabel(option?.name ?? '');
-                  setResolvedProfileId(
-                    option ? Number((option as { id?: number }).id) || null : null
-                  );
-                  handleChangeValue(slug != null ? String(slug) : '', true);
-                }}
-                valueType="string"
-                initialSelectedLabel={storageProfileSelectedLabel}
-                showCreateButton={false}
-                clearable={false}
-                loadOptions={async ({ page, pageSize, search }) => {
-                  const qs = new URLSearchParams({
-                    page: String(page),
-                    pageSize: String(pageSize),
-                    typeSlug: 'email',
-                  });
-                  if (search) qs.set('search', search);
-                  const response = await request<
-                    ApiPaginated<
-                      IntegrationProfileOption & Record<string, unknown>
-                    >
-                  >({
-                    url: `/integration-profile?${qs}`,
-                    method: 'GET',
-                  });
-                  const paged = response.data;
-                  return {
-                    items: paged?.data ?? [],
-                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-                  };
-                }}
-                getOptionValue={(opt) => opt.slug}
-                getOptionLabel={(opt) => String(opt.name ?? '')}
-                getOptionDescription={(opt) => {
-                  const providerSlug = String(
-                    opt.integration_provider?.slug ?? ''
-                  );
-                  const providerName = getLocalizedIntegrationName(
-                    opt.integration_provider?.integration_provider_locale,
-                    currentLocaleCode
-                  );
-                  return [providerName || providerSlug, opt.slug]
-                    .filter(Boolean)
-                    .join(' • ');
-                }}
-                className={cn('flex-1 min-w-0', className)}
-              />
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(resolvedProfileId);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                disabled={!resolvedProfileId}
-                aria-label="Editar perfil de email"
-                title="Editar perfil de email"
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-
-              <Button
-                type="button"
-                variant="outline"
-                size="icon"
-                className="h-10 w-10 shrink-0"
-                onClick={() => {
-                  setStorageProfileEditingId(null);
-                  setIsStorageProfileSheetOpen(true);
-                }}
-                aria-label="Criar perfil de email"
-                title="Criar perfil de email"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            </div>
+      return (
+        <Button asChild variant="outline" size="sm" disabled={safeHref === '#'}>
+          <Link href={safeHref}>
+            <ExternalLink className="h-4 w-4" />
+            {t('openLink')}
+          </Link>
+        </Button>
+      );
+    }
 
-            <IntegrationProfileSheet
-              open={isStorageProfileSheetOpen}
-              onOpenChange={(nextOpen) => {
-                setIsStorageProfileSheetOpen(nextOpen);
-                if (!nextOpen) setStorageProfileEditingId(null);
-              }}
-              profileId={storageProfileEditingId}
-              initialTypeSlug="email"
-              lockedTypeSlug="email"
-              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
-                setStorageProfileSelectedLabel(profile.name ?? '');
-                setResolvedProfileId(profile.id ?? null);
-                handleChangeValue(String(profile.slug ?? ''), true);
-              }}
-            />
-          </>
-        );
-      }
+    case SettingComponentEnum.ENTITY_PICKER: {
+      const profileConfig = getIntegrationProfileSettingConfig(setting.slug);
 
-      if (!dailyReportIntegrationTypeSlug) {
+      if (!profileConfig) {
+        isTextInputRef.current = true;
         return (
           <Input
             type="text"
@@ -1487,339 +865,148 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         );
       }
 
-      if (dailyReportIntegrationTypeSlug) {
-        const loadIntegrationCatalog = async () => {
-          const qs = new URLSearchParams({
-            typeSlug: dailyReportIntegrationTypeSlug,
-          });
-          const providersResponse = await request<IntegrationProviderOption[]>({
-            url: `/integration-profile/providers?${qs}`,
-            method: 'GET',
-          });
-
-          return {
-            providers: (providersResponse.data ??
-              []) as IntegrationProviderOption[],
-          };
-        };
+      const { typeSlug, providerSlug, excludeProviders } = profileConfig;
+      const translationKeys =
+        (typeSlug && PROFILE_TYPE_TRANSLATION_KEYS[typeSlug]) ||
+        GENERIC_PROFILE_TRANSLATION_KEYS;
+      const profileName = t(
+        profileConfig.profileNameKey ?? translationKeys.name
+      );
 
-        return (
-          <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-            placeholder={
-              dailyReportIntegrationTypeSlug === 'email'
-                ? t('selectMailProfile')
-                : t('selectWhatsAppProfile')
-            }
-            value={parsedValue || null}
-            onChange={(slug) =>
-              handleChangeValue(slug != null ? String(slug) : '', true)
-            }
-            valueType="string"
-            loadOptions={async ({ page, pageSize, search }) => {
-              const qs = new URLSearchParams({
-                page: String(page),
-                pageSize: String(pageSize),
-                typeSlug: dailyReportIntegrationTypeSlug,
-              });
-              if (search) qs.set('search', search);
-              const response = await request<
-                ApiPaginated<IntegrationProfileOption & Record<string, unknown>>
-              >({
-                url: `/integration-profile?${qs}`,
-                method: 'GET',
-              });
-              const paged = response.data;
-              return {
-                items: paged?.data ?? [],
-                hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-              };
-            }}
-            getOptionValue={(opt) => opt.slug}
-            getOptionLabel={(opt) => String(opt.name ?? '')}
-            getOptionDescription={(opt) =>
-              String(opt.integration_provider?.slug ?? opt.slug ?? '')
-            }
-            mapSearchToCreateValues={(search) =>
-              dailyReportIntegrationTypeSlug === 'email'
-                ? {
-                    name: search,
-                    provider: 'smtp',
-                    port: '587',
-                  }
-                : {
-                    name: search,
-                    provider: 'evolution-api',
-                    port: '',
-                  }
-            }
-            showCreateButton
-            onCreate={async (values) => {
-              const providersCatalog = await loadIntegrationCatalog();
-              const providerSlug =
-                dailyReportIntegrationTypeSlug === 'email'
-                  ? values.provider || 'smtp'
-                  : 'evolution-api';
-              const provider = providersCatalog.providers.find(
-                (item) => item.slug === providerSlug
-              );
+      // O picker exibe o nome do perfil, mas a setting guarda o slug.
+      const applyProfile = (
+        profile: {
+          id?: number | null;
+          slug?: string | null;
+          name?: string | null;
+        } | null
+      ) => {
+        setStorageProfileSelectedLabel(profile?.name ?? '');
+        setResolvedProfileId(profile?.id ?? null);
+        handleChangeValue(profile?.slug ? String(profile.slug) : '', true);
+      };
 
-              if (!provider) {
-                throw new Error(
-                  `Integration provider "${providerSlug}" not found.`
-                );
+      return (
+        <>
+          <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
+            <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
+              placeholder={t(translationKeys.placeholder)}
+              emptyStateDescription={t(translationKeys.emptyState)}
+              value={parsedValue || null}
+              onChange={(slug, option) =>
+                applyProfile(
+                  option
+                    ? {
+                        id: Number((option as { id?: number }).id) || null,
+                        slug: slug != null ? String(slug) : '',
+                        name: option.name ?? '',
+                      }
+                    : null
+                )
               }
-
-              const name = String(values.name || 'Profile').trim();
-              const response = await request<
-                IntegrationProfileOption & Record<string, unknown>
-              >({
-                url: '/integration-profile',
-                method: 'POST',
-                data: {
-                  name,
-                  slug: toSlug(name),
-                  type_id: provider.type_id,
-                  provider_id: provider.id,
-                  config: buildIntegrationProfileConfig(providerSlug, values),
-                  is_active: true,
-                },
-              });
-              return response.data;
-            }}
-            renderCreateContent={({ values, setValue }) => {
-              if (dailyReportIntegrationTypeSlug === 'whatsapp') {
-                return (
-                  <div className="space-y-4">
-                    <div className="space-y-1">
-                      <Label>{t('whatsappProfile.nameLabel')}</Label>
-                      <Input
-                        value={values.name || ''}
-                        onChange={(e) => setValue('name', e.target.value)}
-                        placeholder={t('whatsappProfile.namePlaceholder')}
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('whatsappProfile.providerLabel')}</Label>
-                      <Select
-                        value={values.provider || 'evolution-api'}
-                        onValueChange={(v) => setValue('provider', v)}
-                      >
-                        <SelectTrigger className="w-full">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="evolution-api">
-                            Evolution API
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('whatsappProfile.hostLabel')}</Label>
-                      <Input
-                        value={values.host || ''}
-                        onChange={(e) => setValue('host', e.target.value)}
-                        placeholder={t('whatsappProfile.hostPlaceholder')}
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('whatsappProfile.instanceNameLabel')}</Label>
-                      <Input
-                        value={values.instance_name || ''}
-                        onChange={(e) =>
-                          setValue('instance_name', e.target.value)
-                        }
-                        placeholder={t(
-                          'whatsappProfile.instanceNamePlaceholder'
-                        )}
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('whatsappProfile.tokenLabel')}</Label>
-                      <Input
-                        type="password"
-                        value={values.token || ''}
-                        onChange={(e) => setValue('token', e.target.value)}
-                        placeholder={t('whatsappProfile.tokenPlaceholder')}
-                      />
-                    </div>
-                  </div>
+              valueType="string"
+              initialSelectedLabel={storageProfileSelectedLabel}
+              showCreateButton={false}
+              clearable={false}
+              loadOptions={async ({ page, pageSize, search }) => {
+                const qs = new URLSearchParams({
+                  page: String(page),
+                  pageSize: String(pageSize),
+                });
+                if (typeSlug) qs.set('typeSlug', typeSlug);
+                if (providerSlug) qs.set('providerSlug', providerSlug);
+                if (search) qs.set('search', search);
+
+                const response = await request<
+                  ApiPaginated<
+                    IntegrationProfileOption & Record<string, unknown>
+                  >
+                >({
+                  url: `/integration-profile?${qs}`,
+                  method: 'GET',
+                });
+                const paged = response.data;
+
+                return {
+                  // O endpoint filtra por tipo e por provider; o que sobra
+                  // (Google Play como gateway do checkout web, por exemplo) sai
+                  // aqui para não oferecer uma escolha que o backend recusaria.
+                  items: (paged?.data ?? []).filter(
+                    (profile) =>
+                      !excludeProviders?.includes(
+                        String(profile.integration_provider?.slug ?? '')
+                      )
+                  ),
+                  hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
+                };
+              }}
+              getOptionValue={(opt) => opt.slug}
+              getOptionLabel={(opt) => String(opt.name ?? '')}
+              getOptionDescription={(opt) => {
+                const optionProviderSlug = String(
+                  opt.integration_provider?.slug ?? ''
                 );
-              }
+                const providerName = getLocalizedIntegrationName(
+                  opt.integration_provider?.integration_provider_locale,
+                  currentLocaleCode
+                );
+                return [providerName || optionProviderSlug, opt.slug]
+                  .filter(Boolean)
+                  .join(' • ');
+              }}
+              className={cn('flex-1 min-w-0', className)}
+            />
 
-              const provider = values.provider || 'smtp';
-              return (
-                <div className="space-y-4">
-                  <div className="space-y-1">
-                    <Label>{t('mailProfile.nameLabel')}</Label>
-                    <Input
-                      value={values.name || ''}
-                      onChange={(e) => setValue('name', e.target.value)}
-                      placeholder={t('mailProfile.namePlaceholder')}
-                    />
-                  </div>
-                  <div className="space-y-1">
-                    <Label>{t('mailProfile.providerLabel')}</Label>
-                    <Select
-                      value={provider}
-                      onValueChange={(v) => setValue('provider', v)}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="smtp">SMTP</SelectItem>
-                        <SelectItem value="gmail">Gmail</SelectItem>
-                        <SelectItem value="ses">
-                          {t('mailProfile.providers.ses')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="space-y-1">
-                    <Label>{t('mailProfile.fromEmailLabel')}</Label>
-                    <Input
-                      type="email"
-                      value={values.from_email || ''}
-                      onChange={(e) => setValue('from_email', e.target.value)}
-                      placeholder={t('mailProfile.fromEmailPlaceholder')}
-                    />
-                  </div>
-                  <div className="space-y-1">
-                    <Label>{t('mailProfile.fromNameLabel')}</Label>
-                    <Input
-                      value={values.from_name || ''}
-                      onChange={(e) => setValue('from_name', e.target.value)}
-                      placeholder={t('mailProfile.fromNamePlaceholder')}
-                    />
-                  </div>
-                  {provider === 'smtp' && (
-                    <>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.smtpHostLabel')}</Label>
-                        <Input
-                          value={values.host || ''}
-                          onChange={(e) => setValue('host', e.target.value)}
-                          placeholder={t('mailProfile.smtpHostPlaceholder')}
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.smtpPortLabel')}</Label>
-                        <Input
-                          type="number"
-                          value={values.port || '587'}
-                          onChange={(e) => setValue('port', e.target.value)}
-                          placeholder={t('mailProfile.smtpPortPlaceholder')}
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.smtpUsernameLabel')}</Label>
-                        <Input
-                          value={values.username || ''}
-                          onChange={(e) => setValue('username', e.target.value)}
-                          placeholder={t('mailProfile.smtpUsernamePlaceholder')}
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.smtpPasswordLabel')}</Label>
-                        <Input
-                          type="password"
-                          value={values.password || ''}
-                          onChange={(e) => setValue('password', e.target.value)}
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.replyToEmailLabel')}</Label>
-                        <Input
-                          type="email"
-                          value={values.reply_to_email || ''}
-                          onChange={(e) =>
-                            setValue('reply_to_email', e.target.value)
-                          }
-                          placeholder={t('mailProfile.replyToEmailPlaceholder')}
-                        />
-                      </div>
-                    </>
-                  )}
-                  {provider === 'gmail' && (
-                    <>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.clientIdLabel')}</Label>
-                        <Input
-                          value={values.client_id || ''}
-                          onChange={(e) =>
-                            setValue('client_id', e.target.value)
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.clientSecretLabel')}</Label>
-                        <Input
-                          type="password"
-                          value={values.client_secret || ''}
-                          onChange={(e) =>
-                            setValue('client_secret', e.target.value)
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.refreshTokenLabel')}</Label>
-                        <Input
-                          value={values.refresh_token || ''}
-                          onChange={(e) =>
-                            setValue('refresh_token', e.target.value)
-                          }
-                        />
-                      </div>
-                    </>
-                  )}
-                  {provider === 'ses' && (
-                    <>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.accessKeyIdLabel')}</Label>
-                        <Input
-                          value={values.access_key_id || ''}
-                          onChange={(e) =>
-                            setValue('access_key_id', e.target.value)
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.secretAccessKeyLabel')}</Label>
-                        <Input
-                          type="password"
-                          value={values.secret_access_key || ''}
-                          onChange={(e) =>
-                            setValue('secret_access_key', e.target.value)
-                          }
-                        />
-                      </div>
-                      <div className="space-y-1">
-                        <Label>{t('mailProfile.regionLabel')}</Label>
-                        <Input
-                          value={values.region || ''}
-                          onChange={(e) => setValue('region', e.target.value)}
-                          placeholder={t('mailProfile.regionPlaceholder')}
-                        />
-                      </div>
-                    </>
-                  )}
-                </div>
-              );
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-10 w-10 shrink-0"
+              onClick={() => {
+                setStorageProfileEditingId(resolvedProfileId);
+                setIsStorageProfileSheetOpen(true);
+              }}
+              disabled={!resolvedProfileId}
+              aria-label={t('editProfileAria', { profile: profileName })}
+              title={t('editProfileAria', { profile: profileName })}
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-10 w-10 shrink-0"
+              onClick={() => {
+                setStorageProfileEditingId(null);
+                setIsStorageProfileSheetOpen(true);
+              }}
+              aria-label={t('createProfileAria', { profile: profileName })}
+              title={t('createProfileAria', { profile: profileName })}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <IntegrationProfileSheet
+            open={isStorageProfileSheetOpen}
+            onOpenChange={(nextOpen) => {
+              setIsStorageProfileSheetOpen(nextOpen);
+              if (!nextOpen) setStorageProfileEditingId(null);
             }}
-            className={cn(className, 'w-full min-w-0 md:min-w-50')}
+            profileId={storageProfileEditingId}
+            initialTypeSlug={typeSlug}
+            lockedTypeSlug={typeSlug}
+            lockedProviderSlug={providerSlug}
+            excludeProviderSlugs={excludeProviders}
+            onSaved={(profile: IntegrationProfileSheetSavedProfile) =>
+              applyProfile(profile)
+            }
           />
-        );
-      }
-
-      return (
-        <Input
-          type="text"
-          value={parsedValue || ''}
-          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-          className={cn(className, 'bg-background')}
-        />
+        </>
       );
+    }
 
     default:
       return (