@hed-hog/core 0.0.355 → 0.0.358

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

@@ -1,3 +1,7 @@
+import {
+  IntegrationProfileSheet,
+  type IntegrationProfileSheetSavedProfile,
+} from '@/components/integration-profile/integration-profile-sheet';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { EntityPicker } from '@/components/ui/entity-picker';
@@ -20,24 +24,190 @@ import {
   SettingTypeEnum,
 } from '@hed-hog/api-types';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Eye, EyeOff, Upload } from 'lucide-react';
+import { Eye, EyeOff, Pencil, Plus, Upload } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
-type SettingFieldProps = {
-  setting: Setting;
-  className?: string;
-};
-
-export const SettingField = ({ setting, className }: SettingFieldProps) => {
+type SettingFieldProps = {
+  setting: Setting;
+  className?: string;
+};
+
+type ApiPaginated<T> = {
+  data: T[];
+  page: number;
+  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;
+  name: string;
+  integration_provider?: {
+    slug: string;
+    integration_provider_locale?: {
+      name: string;
+      locale: { code: string };
+    }[];
+  };
+};
+
+function getLocalizedIntegrationName(
+  locales:
+    | {
+        name: string;
+        locale: { code: string };
+      }[]
+    | undefined,
+  localeCode: string
+) {
+  if (!locales?.length) {
+    return '';
+  }
+
+  return (
+    locales.find((locale) => locale.locale.code === localeCode)?.name ??
+    locales[0]?.name ??
+    ''
+  );
+}
+
+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',
+};
+const ADMIN_LOGIN_OAUTH_SETTING_SLUG = 'admin-login-page-oauth-providers';
+const ADMIN_LOGIN_PROVIDER_ENABLED_SLUG_BY_PROVIDER: Record<string, string> = {
+  facebook: 'oauth-facebook-enabled',
+  github: 'oauth-github-enabled',
+  google: 'oauth-google-enabled',
+  microsoft: 'oauth-microsoft-enabled',
+  'microsoft-entra-id': 'oauth-microsoft-entra-id-enabled',
+};
+const INTEGRATION_PROFILE_PICKER_SLUGS = [
+  'file-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';
+  }
+
+  if (settingSlug === DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG) {
+    return 'whatsapp';
+  }
+
+  return null;
+}
+
+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'),
+    };
+  }
+
+  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 (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'),
+    };
+  }
+
+  return {
+    host: trim('host'),
+    token: trim('token'),
+    instance_name: trim('instance_name'),
+  };
+}
+
+export const SettingField = ({ setting, className }: SettingFieldProps) => {
   const t = useTranslations('core.Configurations');
-  const { showToastHandler, setSettingValue, request } = useApp();
+  const {
+    showToastHandler,
+    setSettingValue,
+    request,
+    currentLocaleCode,
+    getSettingValue,
+  } = useApp();
   const component =
     setting.component?.replaceAll('_', '-') || SettingComponentEnum.INPUT_TEXT;
   const [localValue, setLocalValue] = useState(setting.value);
+  const [storageProfileSelectedLabel, setStorageProfileSelectedLabel] =
+    useState('');
+  const [isStorageProfileSheetOpen, setIsStorageProfileSheetOpen] =
+    useState(false);
+  const [storageProfileEditingId, setStorageProfileEditingId] = useState<
+    number | null
+  >(null);
   const [showSecretValue, setShowSecretValue] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
   const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const isTextInputRef = useRef<boolean>(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const isThemeSetting = (slug: string) => {
     return slug.startsWith('theme-') || slug === 'menu-width';
@@ -45,7 +215,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
 
   const applyThemeSettings = async () => {
     try {
-      const response: any = await request({
+      const response = await request<{ setting?: Record<string, unknown> }>({
         url: '/setting/initial',
         method: 'GET',
       });
@@ -67,11 +237,11 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
 
     debounceTimerRef.current = setTimeout(() => {
       if (localValue !== setting.value) {
-        setSettingValue(setting.slug, localValue)
-          .then(async () => {
-            showToastHandler('success', t('settingUpdated'));
-
-            if (['icon-url'].includes(setting.slug)) {
+        setSettingValue(setting.slug, localValue)
+          .then(async () => {
+            showToastHandler('success', t('settingUpdated'));
+
+            if (['icon-url'].includes(setting.slug)) {
               await revalidateSystemIcon();
               showToastHandler('success', t('iconRevalidated'));
               window.location.reload();
@@ -94,13 +264,49 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
     };
   }, [localValue]);
 
-  const handleChangeValue = (newValue: any, immediate = false) => {
+  useEffect(() => {
+    if (!INTEGRATION_PROFILE_PICKER_SLUGS.includes(setting.slug)) {
+      setStorageProfileSelectedLabel('');
+      return;
+    }
+
+    const profileId = Number(localValue);
+    if (!profileId) {
+      setStorageProfileSelectedLabel('');
+      return;
+    }
+
+    let isCurrent = true;
+
+    request<IntegrationProfileOption>({
+      url: `/integration-profile/${profileId}`,
+      method: 'GET',
+    })
+      .then((response) => {
+        if (!isCurrent) {
+          return;
+        }
+
+        setStorageProfileSelectedLabel(response.data?.name ?? '');
+      })
+      .catch(() => {
+        if (isCurrent) {
+          setStorageProfileSelectedLabel('');
+        }
+      });
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [localValue, request, setting.slug]);
+
+  const handleChangeValue = (newValue: string, immediate = false) => {
     setLocalValue(newValue);
     if (immediate) {
-      setSettingValue(setting.slug, newValue)
-        .then(async () => {
-          showToastHandler('success', t('settingUpdated'));
-          if (isThemeSetting(setting.slug)) {
+      setSettingValue(setting.slug, newValue)
+        .then(async () => {
+          showToastHandler('success', t('settingUpdated'));
+          if (isThemeSetting(setting.slug)) {
             await applyThemeSettings();
           }
         })
@@ -133,7 +339,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
     }
   };
 
-  const formatValue = (val: any) => {
+  const formatValue = (val: unknown): string => {
     switch (setting.type) {
       case SettingTypeEnum.ARRAY:
       case SettingTypeEnum.JSON:
@@ -143,7 +349,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
       case SettingTypeEnum.NUMBER:
         return val?.toString() || '0';
       default:
-        return val;
+        return String(val ?? '');
     }
   };
 
@@ -189,13 +395,11 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           <Button
             type="button"
             variant="ghost"
-            size="icon"
-            className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
-            onClick={() => setShowSecretValue((prev) => !prev)}
-            aria-label={
-              showSecretValue ? t('hidePassword') : t('showPassword')
-            }
-          >
+            size="icon"
+            className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
+            onClick={() => setShowSecretValue((prev) => !prev)}
+            aria-label={showSecretValue ? t('hidePassword') : t('showPassword')}
+          >
             {showSecretValue ? (
               <EyeOff className="h-4 w-4" />
             ) : (
@@ -207,8 +411,6 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
 
     case SettingComponentEnum.INPUT_FILE:
       isTextInputRef.current = true;
-      const fileInputRef = useRef<HTMLInputElement>(null);
-      const [isUploading, setIsUploading] = useState(false);
 
       const handleFileUpload = async (
         e: React.ChangeEvent<HTMLInputElement>
@@ -221,7 +423,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           const formData = new FormData();
           formData.append('file', file);
 
-          const response: any = await request({
+          const response = await request<{ id?: number | string }>({
             url: '/file',
             method: 'POST',
             data: formData,
@@ -236,7 +438,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
             throw new Error(t('fileIdNotReturned'));
           }
 
-          const openResponse: any = await request({
+          const openResponse = await request<{ url?: string }>({
             url: `/file/open/${fileId}`,
             method: 'PUT',
           });
@@ -312,7 +514,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           onCheckedChange={(checked) =>
             handleChangeValue(formatValue(checked), true)
           }
-          className={cn(className)}
+          className={cn('w-8! min-w-8 max-w-8', className)}
         />
       );
 
@@ -322,6 +524,9 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         const selectedValues: string[] = Array.isArray(parsedValue)
           ? parsedValue
           : [];
+        const isAdminLoginOAuthSetting =
+          setting.slug === ADMIN_LOGIN_OAUTH_SETTING_SLUG;
+
         return (
           <div
             className={cn(
@@ -329,26 +534,50 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               className
             )}
           >
-            {options.map((option) => (
-              <div key={option.id} className="flex items-center space-x-2">
-                <Checkbox
-                  className="bg-background"
-                  checked={selectedValues.includes(option.value)}
-                  onCheckedChange={(checked) => {
-                    let newValues = [...selectedValues];
-                    if (checked) {
-                      newValues.push(option.value);
-                    } else {
-                      newValues = newValues.filter(
-                        (val) => val !== option.value
-                      );
-                    }
-                    handleChangeValue(formatValue(newValues), true);
-                  }}
-                />
-                <Label>{option.value}</Label>
-              </div>
-            ))}
+            {options.map((option) => {
+              const enabledSettingSlug =
+                ADMIN_LOGIN_PROVIDER_ENABLED_SLUG_BY_PROVIDER[option.value];
+              const isProviderGloballyEnabled = enabledSettingSlug
+                ? getSettingValue(enabledSettingSlug) === true
+                : true;
+              const isOptionDisabled =
+                isAdminLoginOAuthSetting && !isProviderGloballyEnabled;
+
+              return (
+                <div key={option.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    className="bg-background"
+                    checked={selectedValues.includes(option.value)}
+                    disabled={isOptionDisabled}
+                    onCheckedChange={(checked) => {
+                      if (isOptionDisabled) {
+                        return;
+                      }
+
+                      let newValues = [...selectedValues];
+                      if (checked) {
+                        newValues.push(option.value);
+                      } else {
+                        newValues = newValues.filter(
+                          (val) => val !== option.value
+                        );
+                      }
+                      handleChangeValue(formatValue(newValues), true);
+                    }}
+                  />
+                  <Label className={cn(isOptionDisabled && 'opacity-60')}>
+                    {option.value}
+                  </Label>
+                </div>
+              );
+            })}
+            {isAdminLoginOAuthSetting && (
+              <p className="text-xs text-muted-foreground">
+                {currentLocaleCode.startsWith('pt')
+                  ? 'Providers desabilitados globalmente (oauth-*-enabled = false) ficam indisponíveis nesta lista.'
+                  : 'Providers disabled globally (oauth-*-enabled = false) are unavailable in this list.'}
+              </p>
+            )}
           </div>
         );
       }
@@ -434,7 +663,351 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
       );
 
     case SettingComponentEnum.ENTITY_PICKER:
-      if (setting.slug !== 'mail-profile-id') {
+      const dailyReportIntegrationTypeSlug = getDailyReportIntegrationTypeSlug(
+        setting.slug
+      );
+
+      if (setting.slug === 'file-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.');
+          }
+
+          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 ? Number(parsedValue) : null}
+                onChange={(id, option) => {
+                  setStorageProfileSelectedLabel(option?.name ?? '');
+                  handleChangeValue(id != null ? String(id) : '', true);
+                }}
+                valueType="number"
+                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.id}
+                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(
+                    parsedValue ? Number(parsedValue) : null
+                  );
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                disabled={!parsedValue}
+                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 ?? '');
+                handleChangeValue(String(profile.id), 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 ? Number(parsedValue) : null}
+                onChange={(id, option) => {
+                  setStorageProfileSelectedLabel(option?.name ?? '');
+                  handleChangeValue(id != null ? String(id) : '', true);
+                }}
+                valueType="number"
+                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.id}
+                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(
+                    parsedValue ? Number(parsedValue) : null
+                  );
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                disabled={!parsedValue}
+                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 ?? '');
+                handleChangeValue(String(profile.id), 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 ? Number(parsedValue) : null}
+                onChange={(id, option) => {
+                  setStorageProfileSelectedLabel(option?.name ?? '');
+                  handleChangeValue(id != null ? String(id) : '', true);
+                }}
+                valueType="number"
+                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.id}
+                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(
+                    parsedValue ? Number(parsedValue) : null
+                  );
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                disabled={!parsedValue}
+                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 ?? '');
+                handleChangeValue(String(profile.id), true);
+              }}
+            />
+          </>
+        );
+      }
+
+      if (
+        setting.slug !== 'mail-integration-profile-id' &&
+        !dailyReportIntegrationTypeSlug
+      ) {
         return (
           <Input
             type="text"
@@ -444,198 +1017,338 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           />
         );
       }
-      return (
-        <EntityPicker
-          placeholder={t('selectMailProfile')}
-          value={parsedValue ? Number(parsedValue) : null}
-          onChange={(id) =>
-            handleChangeValue(id != null ? String(id) : '', true)
-          }
-          valueType="number"
-          loadOptions={async ({ page, pageSize, search }) => {
-            const qs = new URLSearchParams({
-              page: String(page),
-              pageSize: String(pageSize),
-            });
-            if (search) qs.set('search', search);
-            const response: any = await request({
-              url: `/mail-profile?${qs}`,
-            });
-            const paged = response.data;
-            return {
-              items: paged?.data ?? [],
-              hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
-            };
-          }}
-          getOptionValue={(opt) => opt.id as number}
-          getOptionLabel={(opt) => String(opt.name ?? '')}
-          getOptionDescription={(opt) => String((opt as any).from_email ?? '')}
-          mapSearchToCreateValues={(search) => ({
-            name: search,
-            provider: 'SMTP',
-          })}
-          showCreateButton
-          onCreate={async (values) => {
-            const slug = (values.name || 'profile')
-              .toLowerCase()
-              .normalize('NFD')
-              .replace(/[\u0300-\u036f]/g, '')
-              .replace(/[^a-z0-9]+/g, '-')
-              .replace(/^-+|-+$/g, '');
-            const response: any = await request({
-              url: '/mail-profile',
-              method: 'POST',
-              data: { ...values, slug },
-            });
-            return response.data;
-          }}
-          renderCreateContent={({ values, setValue }) => {
-            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.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.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>
-                {provider === 'SMTP' && (
-                  <>
-                    <div className="space-y-1">
-                      <Label>{t('mailProfile.smtpHostLabel')}</Label>
-                      <Input
-                        value={values.smtp_host || ''}
-                        onChange={(e) => setValue('smtp_host', e.target.value)}
-                        placeholder={t('mailProfile.smtpHostPlaceholder')}
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('mailProfile.smtpPortLabel')}</Label>
-                      <Input
-                        type="number"
-                        value={values.smtp_port || '587'}
-                        onChange={(e) => setValue('smtp_port', e.target.value)}
-                        placeholder={t('mailProfile.smtpPortPlaceholder')}
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('mailProfile.smtpUsernameLabel')}</Label>
-                      <Input
-                        value={values.smtp_username || ''}
-                        onChange={(e) =>
-                          setValue('smtp_username', e.target.value)
-                        }
-                        placeholder={t('mailProfile.smtpUsernamePlaceholder')}
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('mailProfile.smtpPasswordLabel')}</Label>
-                      <Input
-                        type="password"
-                        value={values.smtp_password || ''}
-                        onChange={(e) =>
-                          setValue('smtp_password', e.target.value)
-                        }
-                      />
-                    </div>
-                  </>
-                )}
-                {provider === 'GMAIL' && (
-                  <>
+
+      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[],
+          };
+        };
+
+        return (
+          <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
+            placeholder={
+              dailyReportIntegrationTypeSlug === 'email'
+                ? t('selectMailProfile')
+                : t('selectWhatsAppProfile')
+            }
+            value={parsedValue ? Number(parsedValue) : null}
+            onChange={(id) =>
+              handleChangeValue(id != null ? String(id) : '', true)
+            }
+            valueType="number"
+            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.id}
+            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
+              );
+
+              if (!provider) {
+                throw new Error(
+                  `Integration provider "${providerSlug}" not found.`
+                );
+              }
+
+              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('mailProfile.clientIdLabel')}</Label>
+                      <Label>{t('whatsappProfile.nameLabel')}</Label>
                       <Input
-                        value={values.gmail_client_id || ''}
-                        onChange={(e) =>
-                          setValue('gmail_client_id', e.target.value)
-                        }
+                        value={values.name || ''}
+                        onChange={(e) => setValue('name', e.target.value)}
+                        placeholder={t('whatsappProfile.namePlaceholder')}
                       />
                     </div>
                     <div className="space-y-1">
-                      <Label>{t('mailProfile.clientSecretLabel')}</Label>
-                      <Input
-                        type="password"
-                        value={values.gmail_client_secret || ''}
-                        onChange={(e) =>
-                          setValue('gmail_client_secret', e.target.value)
-                        }
-                      />
+                      <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('mailProfile.refreshTokenLabel')}</Label>
+                      <Label>{t('whatsappProfile.hostLabel')}</Label>
                       <Input
-                        value={values.gmail_refresh_token || ''}
-                        onChange={(e) =>
-                          setValue('gmail_refresh_token', e.target.value)
-                        }
+                        value={values.host || ''}
+                        onChange={(e) => setValue('host', e.target.value)}
+                        placeholder={t('whatsappProfile.hostPlaceholder')}
                       />
                     </div>
-                  </>
-                )}
-                {provider === 'SES' && (
-                  <>
                     <div className="space-y-1">
-                      <Label>{t('mailProfile.accessKeyIdLabel')}</Label>
+                      <Label>{t('whatsappProfile.instanceNameLabel')}</Label>
                       <Input
-                        value={values.ses_access_key_id || ''}
+                        value={values.instance_name || ''}
                         onChange={(e) =>
-                          setValue('ses_access_key_id', e.target.value)
+                          setValue('instance_name', e.target.value)
                         }
+                        placeholder={t(
+                          'whatsappProfile.instanceNamePlaceholder'
+                        )}
                       />
                     </div>
                     <div className="space-y-1">
-                      <Label>{t('mailProfile.secretAccessKeyLabel')}</Label>
+                      <Label>{t('whatsappProfile.tokenLabel')}</Label>
                       <Input
                         type="password"
-                        value={values.ses_secret_access_key || ''}
-                        onChange={(e) =>
-                          setValue('ses_secret_access_key', e.target.value)
-                        }
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <Label>{t('mailProfile.regionLabel')}</Label>
-                      <Input
-                        value={values.ses_region || ''}
-                        onChange={(e) => setValue('ses_region', e.target.value)}
-                        placeholder={t('mailProfile.regionPlaceholder')}
+                        value={values.token || ''}
+                        onChange={(e) => setValue('token', e.target.value)}
+                        placeholder={t('whatsappProfile.tokenPlaceholder')}
                       />
                     </div>
-                  </>
-                )}
-              </div>
-            );
-          }}
-          className={cn(className, 'w-full min-w-0 md:min-w-50')}
+                  </div>
+                );
+              }
+
+              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>
+              );
+            }}
+            className={cn(className, 'w-full min-w-0 md:min-w-50')}
+          />
+        );
+      }
+
+      return (
+        <Input
+          type="text"
+          value={parsedValue || ''}
+          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+          className={cn(className, 'bg-background')}
         />
       );