@hed-hog/core 0.0.354 → 0.0.356

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

@@ -24,20 +24,151 @@ import { Eye, EyeOff, 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_PROFILE_SLUG =
+  'operations.daily-report.email-profile-id';
+const DAILY_REPORT_WHATSAPP_PROFILE_SLUG =
+  'operations.daily-report.whatsapp-profile-id';
+
+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_PROFILE_SLUG) {
+    return 'email';
+  }
+
+  if (settingSlug === DAILY_REPORT_WHATSAPP_PROFILE_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 } =
+    useApp();
   const component =
     setting.component?.replaceAll('_', '-') || SettingComponentEnum.INPUT_TEXT;
   const [localValue, setLocalValue] = useState(setting.value);
+  const [storageProfileSelectedLabel, setStorageProfileSelectedLabel] =
+    useState('');
   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 +176,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 +198,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 +225,49 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
     };
   }, [localValue]);
 
-  const handleChangeValue = (newValue: any, immediate = false) => {
+  useEffect(() => {
+    if (setting.slug !== 'file-storage-profile-id') {
+      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 +300,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 +310,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
       case SettingTypeEnum.NUMBER:
         return val?.toString() || '0';
       default:
-        return val;
+        return String(val ?? '');
     }
   };
 
@@ -189,13 +356,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 +372,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 +384,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 +399,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 +475,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)}
         />
       );
 
@@ -434,7 +597,79 @@ 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 (
+          <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}
+            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(className, 'w-full min-w-0 md:min-w-50')}
+          />
+        );
+      }
+
+      if (
+        setting.slug !== 'mail-profile-id' &&
+        !dailyReportIntegrationTypeSlug
+      ) {
         return (
           <Input
             type="text"
@@ -444,198 +679,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')}
         />
       );