@hed-hog/core 0.0.400 → 0.0.402

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

@@ -225,6 +225,13 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const isTextInputRef = useRef<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  /** Envolve os campos digitados: saber se o foco está neles decide quando salvar. */
+  const fieldRef = useRef<HTMLDivElement>(null);
+  /** O último valor gravado (o `setting.value` da prop não muda depois de salvar). */
+  const savedValueRef = useRef(setting.value);
+  /** O valor em edição, para salvar no blur e na desmontagem sem esperar render. */
+  const localValueRef = useRef(localValue);
+  localValueRef.current = localValue;
 
   const isThemeSetting = (slug: string) => {
     return slug.startsWith('theme-') || slug === 'menu-width';
@@ -245,34 +252,50 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
     }
   };
 
-  useEffect(() => {
-    if (!isTextInputRef.current) return;
-
+  const saveValue = (value: typeof setting.value) => {
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = undefined;
     }
+    if (value === savedValueRef.current) return;
+
+    const previous = savedValueRef.current;
+    savedValueRef.current = value;
+    setSettingValue(setting.slug, value)
+      .then(async () => {
+        showToastHandler('success', t('settingUpdated'));
+
+        if (['icon-url'].includes(setting.slug)) {
+          await revalidateSystemIcon();
+          showToastHandler('success', t('iconRevalidated'));
+          window.location.reload();
+        }
 
-    debounceTimerRef.current = setTimeout(() => {
-      if (localValue !== setting.value) {
-        setSettingValue(setting.slug, localValue)
-          .then(async () => {
-            showToastHandler('success', t('settingUpdated'));
+        if (isThemeSetting(setting.slug)) {
+          await applyThemeSettings();
+        }
+      })
+      .catch(() => {
+        savedValueRef.current = previous;
+        showToastHandler('error', t('settingUpdateFailed'));
+      });
+  };
 
-            if (['icon-url'].includes(setting.slug)) {
-              await revalidateSystemIcon();
-              showToastHandler('success', t('iconRevalidated'));
-              window.location.reload();
-            }
+  /**
+   * Salvamento automático dos campos digitados. Enquanto o foco está no campo,
+   * nada é gravado: salvar a cada pausa gravava o valor pela metade (digitando
+   * "10" GB, o "1" ia para o banco). Grava ao sair do campo, no Enter e ao
+   * desmontar (trocar de aba). Mudança sem foco no campo — arquivo enviado,
+   * perfil aplicado — segue com o debounce de 500 ms.
+   */
+  useEffect(() => {
+    if (!isTextInputRef.current) return;
+    if (fieldRef.current?.contains(document.activeElement)) return;
 
-            if (isThemeSetting(setting.slug)) {
-              await applyThemeSettings();
-            }
-          })
-          .catch(() => {
-            showToastHandler('error', t('settingUpdateFailed'));
-          });
-      }
-    }, 500);
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(() => saveValue(localValue), 500);
 
     return () => {
       if (debounceTimerRef.current) {
@@ -281,6 +304,26 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
     };
   }, [localValue]);
 
+  // Desmontar com edição pendente (trocar de aba, sair da tela) grava o valor,
+  // em vez de descartá-lo junto com o timer.
+  useEffect(() => {
+    return () => {
+      if (isTextInputRef.current) saveValue(localValueRef.current);
+    };
+  }, []);
+
+  const handleFieldBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    const next = event.relatedTarget as Node | null;
+    if (next && event.currentTarget.contains(next)) return;
+    saveValue(localValueRef.current);
+  };
+
+  const handleFieldKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
+      saveValue(localValueRef.current);
+    }
+  };
+
   // Booleano em vez de `setting` na lista de dependências: o objeto da setting
   // troca de identidade a cada render do pai e dispararia a resolução do rótulo
   // de novo a cada vez.
@@ -332,7 +375,9 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
 
   const handleChangeValue = (newValue: string, immediate = false) => {
     setLocalValue(newValue);
+    localValueRef.current = newValue;
     if (immediate) {
+      savedValueRef.current = newValue;
       setSettingValue(setting.slug, newValue)
         .then(async () => {
           showToastHandler('success', t('settingUpdated'));
@@ -384,518 +429,558 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   };
 
   const parsedValue = getParsedValue();
-  switch (component) {
-    case SettingComponentEnum.INPUT_TEXT:
-      isTextInputRef.current = true;
-      return (
-        <Input
-          type="text"
-          value={parsedValue || ''}
-          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
-        />
-      );
-
-    case SettingComponentEnum.INPUT_NUMBER:
-      isTextInputRef.current = true;
-      return (
-        <Input
-          type="number"
-          value={parsedValue || 0}
-          onChange={(e) =>
-            handleChangeValue(formatValue(parseFloat(e.target.value) || 0))
-          }
-          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
-        />
-      );
-
-    case SettingComponentEnum.INPUT_DURATION:
-      isTextInputRef.current = true; // reaproveita o debounce de 500ms existente
-      return (
-        <DurationInput
-          value={
-            typeof parsedValue === 'number'
-              ? parsedValue
-              : parseFloat(parsedValue) || 0
-          }
-          onChange={(seconds) => handleChangeValue(formatValue(seconds))}
-          persistKey={setting.slug}
-          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
-        />
-      );
-
-    case SettingComponentEnum.INPUT_BYTES:
-      isTextInputRef.current = true; // reaproveita o debounce de 500ms existente
-      return (
-        <ByteSizeInput
-          value={
-            typeof parsedValue === 'number'
-              ? parsedValue
-              : parseFloat(parsedValue) || 0
-          }
-          onChange={(bytes) => handleChangeValue(formatValue(bytes))}
-          persistKey={setting.slug}
-          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
-        />
-      );
-
-    case SettingComponentEnum.INPUT_SECRET:
-      isTextInputRef.current = true;
-      return (
-        <div className="relative w-full min-w-0 md:min-w-50">
+  isTextInputRef.current = false;
+  const control = renderControl();
+
+  if (!isTextInputRef.current) return control;
+
+  return (
+    <div
+      ref={fieldRef}
+      className="contents"
+      onBlur={handleFieldBlur}
+      onKeyDown={handleFieldKeyDown}
+    >
+      {control}
+    </div>
+  );
+
+  function renderControl() {
+    switch (component) {
+      case SettingComponentEnum.INPUT_TEXT:
+        isTextInputRef.current = true;
+        return (
           <Input
-            type={showSecretValue ? 'text' : 'password'}
+            type="text"
             value={parsedValue || ''}
             onChange={(e) => handleChangeValue(formatValue(e.target.value))}
             className={cn(
               className,
-              'w-full min-w-0 bg-background pr-10 md:min-w-50'
+              'w-full min-w-0 bg-background md:min-w-50'
             )}
           />
-          <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)}
-            tooltip={showSecretValue ? t('hidePassword') : t('showPassword')}
-          >
-            {showSecretValue ? (
-              <EyeOff className="h-4 w-4" />
-            ) : (
-              <Eye className="h-4 w-4" />
-            )}
-          </Button>
-        </div>
-      );
-
-    case SettingComponentEnum.INPUT_FILE:
-      isTextInputRef.current = true;
-
-      const handleFileUpload = async (
-        e: React.ChangeEvent<HTMLInputElement>
-      ) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
+        );
 
-        setIsUploading(true);
-        try {
-          const formData = new FormData();
-          formData.append('file', file);
-
-          const response = await request<{ id?: number | string }>({
-            url: '/file',
-            method: 'POST',
-            data: formData,
-            headers: {
-              'Content-Type': 'multipart/form-data',
-            },
-          });
-
-          const fileId = Number(response.data?.id);
-
-          if (!fileId) {
-            throw new Error(t('fileIdNotReturned'));
-          }
+      case SettingComponentEnum.INPUT_NUMBER:
+        isTextInputRef.current = true;
+        return (
+          <Input
+            type="number"
+            value={parsedValue || 0}
+            onChange={(e) =>
+              handleChangeValue(formatValue(parseFloat(e.target.value) || 0))
+            }
+            className={cn(
+              className,
+              'w-full min-w-0 bg-background md:min-w-50'
+            )}
+          />
+        );
 
-          // `/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);
+      case SettingComponentEnum.INPUT_DURATION:
+        isTextInputRef.current = true; // reaproveita o debounce de 500ms existente
+        return (
+          <DurationInput
+            value={
+              typeof parsedValue === 'number'
+                ? parsedValue
+                : parseFloat(parsedValue) || 0
+            }
+            onChange={(seconds) => handleChangeValue(formatValue(seconds))}
+            persistKey={setting.slug}
+            className={cn(
+              className,
+              'w-full min-w-0 bg-background md:min-w-50'
+            )}
+          />
+        );
 
-          if (!fileUrl) {
-            throw new Error(t('apiBaseUrlNotConfigured'));
-          }
+      case SettingComponentEnum.INPUT_BYTES:
+        isTextInputRef.current = true; // reaproveita o debounce de 500ms existente
+        return (
+          <ByteSizeInput
+            value={
+              typeof parsedValue === 'number'
+                ? parsedValue
+                : parseFloat(parsedValue) || 0
+            }
+            onChange={(bytes) => handleChangeValue(formatValue(bytes))}
+            persistKey={setting.slug}
+            className={cn(
+              className,
+              'w-full min-w-0 bg-background md:min-w-50'
+            )}
+          />
+        );
 
-          handleChangeValue(formatValue(fileUrl));
-          showToastHandler('success', t('fileUploaded'));
-        } catch (error) {
-          showToastHandler('error', t('fileUploadFailed'));
-        } finally {
-          setIsUploading(false);
-          if (fileInputRef.current) {
-            fileInputRef.current.value = '';
-          }
-        }
-      };
-
-      return (
-        <div className="flex w-full min-w-0 flex-col gap-2 md:min-w-50">
-          {parsedValue && (
-            <div>
-              <img
-                src={parsedValue || ''}
-                alt={t('uploadedFileAlt')}
-                className="max-w-full md:w-50"
-              />
-            </div>
-          )}
-          <div className="flex w-full min-w-0 items-center gap-2">
-            <input
-              ref={fileInputRef}
-              type="file"
-              onChange={handleFileUpload}
-              className="hidden"
-              id={`file-${setting.id}`}
+      case SettingComponentEnum.INPUT_SECRET:
+        isTextInputRef.current = true;
+        return (
+          <div className="relative w-full min-w-0 md:min-w-50">
+            <Input
+              type={showSecretValue ? 'text' : 'password'}
+              value={parsedValue || ''}
+              onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+              className={cn(
+                className,
+                'w-full min-w-0 bg-background pr-10 md:min-w-50'
+              )}
             />
             <Button
               type="button"
-              variant="outline"
+              variant="ghost"
               size="icon"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={isUploading}
-              className="shrink-0"
-              tooltip={t('uploadFile')}
+              className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
+              onClick={() => setShowSecretValue((prev) => !prev)}
+              tooltip={showSecretValue ? t('hidePassword') : t('showPassword')}
             >
-              <Upload className="h-4 w-4" />
+              {showSecretValue ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
             </Button>
-            <Input
-              type="text"
-              value={parsedValue || ''}
-              onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-              className="min-w-0 flex-1 bg-background"
-              placeholder={t('fileUrlPlaceholder')}
-              disabled={isUploading}
-            />
           </div>
-        </div>
-      );
-
-    case SettingComponentEnum.INPUT_TAGS: {
-      const tagsValue: string[] = Array.isArray(parsedValue) ? parsedValue : [];
-      return (
-        <TagsInput
-          value={tagsValue}
-          onChange={(val) => handleChangeValue(formatValue(val), true)}
-          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
-        />
-      );
-    }
+        );
+
+      case SettingComponentEnum.INPUT_FILE:
+        isTextInputRef.current = true;
+
+        const handleFileUpload = async (
+          e: React.ChangeEvent<HTMLInputElement>
+        ) => {
+          const file = e.target.files?.[0];
+          if (!file) return;
+
+          setIsUploading(true);
+          try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const response = await request<{ id?: number | string }>({
+              url: '/file',
+              method: 'POST',
+              data: formData,
+              headers: {
+                'Content-Type': 'multipart/form-data',
+              },
+            });
+
+            const fileId = Number(response.data?.id);
+
+            if (!fileId) {
+              throw new Error(t('fileIdNotReturned'));
+            }
+
+            // `/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);
 
-    case SettingComponentEnum.SWITCH:
-      return (
-        <Switch
-          checked={parsedValue || false}
-          onCheckedChange={(checked) =>
-            handleChangeValue(formatValue(checked), true)
+            if (!fileUrl) {
+              throw new Error(t('apiBaseUrlNotConfigured'));
+            }
+
+            handleChangeValue(formatValue(fileUrl));
+            showToastHandler('success', t('fileUploaded'));
+          } catch (error) {
+            showToastHandler('error', t('fileUploadFailed'));
+          } finally {
+            setIsUploading(false);
+            if (fileInputRef.current) {
+              fileInputRef.current.value = '';
+            }
           }
-          className={cn('w-8! min-w-8 max-w-8', className)}
-        />
-      );
+        };
 
-    case SettingComponentEnum.CHECKBOX:
-      if (setting.type === SettingTypeEnum.ARRAY) {
-        const options = setting.setting_list || [];
-        const selectedValues: string[] = Array.isArray(parsedValue)
+        return (
+          <div className="flex w-full min-w-0 flex-col gap-2 md:min-w-50">
+            {parsedValue && (
+              <div>
+                <img
+                  src={parsedValue || ''}
+                  alt={t('uploadedFileAlt')}
+                  className="max-w-full md:w-50"
+                />
+              </div>
+            )}
+            <div className="flex w-full min-w-0 items-center gap-2">
+              <input
+                ref={fileInputRef}
+                type="file"
+                onChange={handleFileUpload}
+                className="hidden"
+                id={`file-${setting.id}`}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={() => fileInputRef.current?.click()}
+                disabled={isUploading}
+                className="shrink-0"
+                tooltip={t('uploadFile')}
+              >
+                <Upload className="h-4 w-4" />
+              </Button>
+              <Input
+                type="text"
+                value={parsedValue || ''}
+                onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+                className="min-w-0 flex-1 bg-background"
+                placeholder={t('fileUrlPlaceholder')}
+                disabled={isUploading}
+              />
+            </div>
+          </div>
+        );
+
+      case SettingComponentEnum.INPUT_TAGS: {
+        const tagsValue: string[] = Array.isArray(parsedValue)
           ? parsedValue
           : [];
-
         return (
-          <div
+          <TagsInput
+            value={tagsValue}
+            onChange={(val) => handleChangeValue(formatValue(val), true)}
             className={cn(
-              'flex w-full min-w-0 flex-col space-y-2 md:min-w-50',
-              className
+              className,
+              'w-full min-w-0 bg-background md:min-w-50'
             )}
-          >
-            {options.map((option) => {
-              return (
-                <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>
-              );
-            })}
-          </div>
+          />
         );
       }
-      return (
-        <Checkbox
-          checked={parsedValue || false}
-          onCheckedChange={(checked) =>
-            handleChangeValue(formatValue(checked), true)
-          }
-          className={cn(className)}
-        />
-      );
-
-    case SettingComponentEnum.COMBOBOX:
-      const options = setting.setting_list || [];
-      return (
-        <Select
-          value={parsedValue?.toString() || ''}
-          onValueChange={(val) => handleChangeValue(formatValue(val), true)}
-        >
-          <SelectTrigger
-            className={cn(
-              'w-full min-w-0 bg-background md:min-w-50',
-              className
-            )}
-          >
-            <SelectValue placeholder={t('selectOption')} />
-          </SelectTrigger>
-          <SelectContent>
-            {options.map((option) => (
-              <SelectItem key={option.id} value={option.value}>
-                {optionLabel(option.value)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      );
-
-    case SettingComponentEnum.RADIO:
-      const radioOptions = setting.setting_list || [];
-      return (
-        <RadioGroup
-          value={parsedValue?.toString() || ''}
-          onValueChange={(val) => handleChangeValue(formatValue(val), true)}
-          className={cn(className, 'w-full min-w-0 md:min-w-50')}
-        >
-          {radioOptions.map((option) => (
-            <div key={option.id} className="flex items-center space-x-2">
-              <RadioGroupItem
-                value={option.value}
-                id={`radio-${option.id}`}
-                className="bg-background"
-              />
-              <Label htmlFor={`radio-${option.id}`}>
-                {optionLabel(option.value)}
-              </Label>
-            </div>
-          ))}
-        </RadioGroup>
-      );
-
-    case SettingComponentEnum.COLOR_PICKER:
-      isTextInputRef.current = true;
-      return (
-        <div className="flex w-full min-w-0 items-center gap-2 md:max-w-50">
-          <Input
-            type="color"
-            value={parsedValue || '#000000'}
-            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-            className={cn(
-              'h-10 w-10 border-none p-0 cursor-pointer',
-              className
-            )}
+
+      case SettingComponentEnum.SWITCH:
+        return (
+          <Switch
+            checked={parsedValue || false}
+            onCheckedChange={(checked) =>
+              handleChangeValue(formatValue(checked), true)
+            }
+            className={cn('w-8! min-w-8 max-w-8', className)}
           />
-          <Input
-            type="text"
-            value={parsedValue || '#000000'}
-            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-            className="flex-1 bg-background"
-            placeholder="#000000"
-            maxLength={7}
-            minLength={7}
+        );
+
+      case SettingComponentEnum.CHECKBOX:
+        if (setting.type === SettingTypeEnum.ARRAY) {
+          const options = setting.setting_list || [];
+          const selectedValues: string[] = Array.isArray(parsedValue)
+            ? parsedValue
+            : [];
+
+          return (
+            <div
+              className={cn(
+                'flex w-full min-w-0 flex-col space-y-2 md:min-w-50',
+                className
+              )}
+            >
+              {options.map((option) => {
+                return (
+                  <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>
+                );
+              })}
+            </div>
+          );
+        }
+        return (
+          <Checkbox
+            checked={parsedValue || false}
+            onCheckedChange={(checked) =>
+              handleChangeValue(formatValue(checked), true)
+            }
+            className={cn(className)}
           />
-        </div>
-      );
-
-    // 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 (
-        <Button asChild variant="outline" size="sm" disabled={safeHref === '#'}>
-          <Link href={safeHref}>
-            <ExternalLink className="h-4 w-4" />
-            {t('openLink')}
-          </Link>
-        </Button>
-      );
-    }
+        );
 
-    case SettingComponentEnum.ENTITY_PICKER: {
-      const profileConfig = getIntegrationProfileSettingConfig(setting);
+      case SettingComponentEnum.COMBOBOX:
+        const options = setting.setting_list || [];
+        return (
+          <Select
+            value={parsedValue?.toString() || ''}
+            onValueChange={(val) => handleChangeValue(formatValue(val), true)}
+          >
+            <SelectTrigger
+              className={cn(
+                'w-full min-w-0 bg-background md:min-w-50',
+                className
+              )}
+            >
+              <SelectValue placeholder={t('selectOption')} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.id} value={option.value}>
+                  {optionLabel(option.value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+
+      case SettingComponentEnum.RADIO:
+        const radioOptions = setting.setting_list || [];
+        return (
+          <RadioGroup
+            value={parsedValue?.toString() || ''}
+            onValueChange={(val) => handleChangeValue(formatValue(val), true)}
+            className={cn(className, 'w-full min-w-0 md:min-w-50')}
+          >
+            {radioOptions.map((option) => (
+              <div key={option.id} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={option.value}
+                  id={`radio-${option.id}`}
+                  className="bg-background"
+                />
+                <Label htmlFor={`radio-${option.id}`}>
+                  {optionLabel(option.value)}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        );
 
-      if (!profileConfig) {
+      case SettingComponentEnum.COLOR_PICKER:
         isTextInputRef.current = true;
         return (
-          <Input
-            type="text"
-            value={parsedValue || ''}
-            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-            className={cn(className, 'bg-background')}
-          />
+          <div className="flex w-full min-w-0 items-center gap-2 md:max-w-50">
+            <Input
+              type="color"
+              value={parsedValue || '#000000'}
+              onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+              className={cn(
+                'h-10 w-10 border-none p-0 cursor-pointer',
+                className
+              )}
+            />
+            <Input
+              type="text"
+              value={parsedValue || '#000000'}
+              onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+              className="flex-1 bg-background"
+              placeholder="#000000"
+              maxLength={7}
+              minLength={7}
+            />
+          </div>
+        );
+
+      // 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 (
+          <Button
+            asChild
+            variant="outline"
+            size="sm"
+            disabled={safeHref === '#'}
+          >
+            <Link href={safeHref}>
+              <ExternalLink className="h-4 w-4" />
+              {t('openLink')}
+            </Link>
+          </Button>
         );
       }
 
-      const { typeSlug, providerSlug, excludeProviders } = profileConfig;
-      // Um tipo sem tradução própria (ou sem filtro nenhum) cai no genérico.
-      const profileTypeKey =
-        typeSlug && t.has(`profileTypes.${typeSlug}.placeholder`)
-          ? `profileTypes.${typeSlug}`
-          : GENERIC_PROFILE_TYPE_KEY;
-      // Provider com nome próprio (Kubernetes) manda no rótulo dos botões;
-      // sem ele, o substantivo é o do tipo.
-      const profileName =
-        providerSlug && t.has(`profileProviders.${providerSlug}`)
-          ? t(`profileProviders.${providerSlug}`)
-          : t(`${profileTypeKey}.name`);
-
-      // 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);
-      };
-
-      return (
-        <>
-          <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
-            <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
-              placeholder={t(`${profileTypeKey}.placeholder`)}
-              emptyStateDescription={t(`${profileTypeKey}.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
-                )
-              }
-              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)}
+      case SettingComponentEnum.ENTITY_PICKER: {
+        const profileConfig = getIntegrationProfileSettingConfig(setting);
+
+        if (!profileConfig) {
+          isTextInputRef.current = true;
+          return (
+            <Input
+              type="text"
+              value={parsedValue || ''}
+              onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+              className={cn(className, 'bg-background')}
             />
+          );
+        }
 
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="h-10 w-10 shrink-0"
-              onClick={() => {
-                setStorageProfileEditingId(resolvedProfileId);
-                setIsStorageProfileSheetOpen(true);
-              }}
-              disabled={!resolvedProfileId}
-              tooltip={t('editProfileAria', { profile: profileName })}
-            >
-              <Pencil className="h-4 w-4" />
-            </Button>
+        const { typeSlug, providerSlug, excludeProviders } = profileConfig;
+        // Um tipo sem tradução própria (ou sem filtro nenhum) cai no genérico.
+        const profileTypeKey =
+          typeSlug && t.has(`profileTypes.${typeSlug}.placeholder`)
+            ? `profileTypes.${typeSlug}`
+            : GENERIC_PROFILE_TYPE_KEY;
+        // Provider com nome próprio (Kubernetes) manda no rótulo dos botões;
+        // sem ele, o substantivo é o do tipo.
+        const profileName =
+          providerSlug && t.has(`profileProviders.${providerSlug}`)
+            ? t(`profileProviders.${providerSlug}`)
+            : t(`${profileTypeKey}.name`);
+
+        // 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);
+        };
 
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="h-10 w-10 shrink-0"
-              onClick={() => {
-                setStorageProfileEditingId(null);
-                setIsStorageProfileSheetOpen(true);
+        return (
+          <>
+            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
+              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
+                placeholder={t(`${profileTypeKey}.placeholder`)}
+                emptyStateDescription={t(`${profileTypeKey}.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
+                  )
+                }
+                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)}
+              />
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-10 w-10 shrink-0"
+                onClick={() => {
+                  setStorageProfileEditingId(resolvedProfileId);
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                disabled={!resolvedProfileId}
+                tooltip={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);
+                }}
+                tooltip={t('createProfileAria', { profile: profileName })}
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <IntegrationProfileSheet
+              open={isStorageProfileSheetOpen}
+              onOpenChange={(nextOpen) => {
+                setIsStorageProfileSheetOpen(nextOpen);
+                if (!nextOpen) setStorageProfileEditingId(null);
               }}
-              tooltip={t('createProfileAria', { profile: profileName })}
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
-          </div>
+              profileId={storageProfileEditingId}
+              initialTypeSlug={typeSlug}
+              lockedTypeSlug={typeSlug}
+              lockedProviderSlug={providerSlug}
+              excludeProviderSlugs={excludeProviders}
+              onSaved={(profile: IntegrationProfileSheetSavedProfile) =>
+                applyProfile(profile)
+              }
+            />
+          </>
+        );
+      }
 
-          <IntegrationProfileSheet
-            open={isStorageProfileSheetOpen}
-            onOpenChange={(nextOpen) => {
-              setIsStorageProfileSheetOpen(nextOpen);
-              if (!nextOpen) setStorageProfileEditingId(null);
-            }}
-            profileId={storageProfileEditingId}
-            initialTypeSlug={typeSlug}
-            lockedTypeSlug={typeSlug}
-            lockedProviderSlug={providerSlug}
-            excludeProviderSlugs={excludeProviders}
-            onSaved={(profile: IntegrationProfileSheetSavedProfile) =>
-              applyProfile(profile)
-            }
+      default:
+        return (
+          <Input
+            type="text"
+            value={parsedValue || ''}
+            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+            className={cn(className, 'bg-background')}
           />
-        </>
-      );
+        );
     }
-
-    default:
-      return (
-        <Input
-          type="text"
-          value={parsedValue || ''}
-          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-          className={cn(className, 'bg-background')}
-        />
-      );
   }
 };