@hed-hog/catalog 0.0.279 → 0.0.286

package/hedhog/frontend/app/_components/catalog-resource-form-sheet.tsx.ejs

@@ -1,964 +1,973 @@
-'use client';
-
-import {
-  catalogResourceMap,
-  getCatalogLocalizedText,
-  getCatalogRecordLabel,
-  type CatalogFormFieldDefinition,
-  type CatalogResourceDefinition,
-} from '../_lib/catalog-resources';
-import { RichTextEditor } from '@/components/rich-text-editor';
-import { Button } from '@/components/ui/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { ChevronsUpDown, Loader2, Plus, Save, Upload, X } from 'lucide-react';
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-type CatalogRecord = Record<string, unknown>;
-type CatalogFormValues = Record<string, unknown>;
-type RelationOption = { id: number; label: string };
-type FormSheetProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  resource: string;
-  resourceConfig: CatalogResourceDefinition;
-  resourceTitle: string;
-  resourceDescription: string;
-  recordId: number | null;
-  onSuccess: (record: CatalogRecord) => Promise<void> | void;
-};
-
-function toDateInputValue(value: unknown) {
-  if (!value) return '';
-  const date = new Date(String(value));
-  if (Number.isNaN(date.getTime())) return '';
-  return date.toISOString().slice(0, 10);
-}
-
-function toDateTimeInputValue(value: unknown) {
-  if (!value) return '';
-  const date = new Date(String(value));
-  if (Number.isNaN(date.getTime())) return '';
-  const offset = date.getTimezoneOffset();
-  const local = new Date(date.getTime() - offset * 60 * 1000);
-  return local.toISOString().slice(0, 16);
-}
-
-function buildFieldSchema(field: CatalogFormFieldDefinition) {
-  switch (field.type) {
-    case 'switch':
-      return z.boolean().default(false);
-    case 'number':
-    case 'currency':
-    case 'relation':
-    case 'upload':
-      return z.number().nullable().optional();
-    case 'json':
-      return z.string().superRefine((value, ctx) => {
-        if (!value.trim()) return;
-        try {
-          JSON.parse(value);
-        } catch {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: 'JSON inválido',
-          });
-        }
-      });
-    case 'url':
-      return z.string().superRefine((value, ctx) => {
-        const normalized = value.trim();
-        if (!normalized) return;
-
-        try {
-          new URL(normalized);
-        } catch {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: 'URL inválida',
-          });
-        }
-      });
-    default:
-      return z.string();
-  }
-}
-
-function buildFormSchema(resourceConfig: CatalogResourceDefinition) {
-  const shape: Record<string, z.ZodTypeAny> = {};
-
-  for (const section of resourceConfig.formSections) {
-    for (const field of section.fields) {
-      let schema = buildFieldSchema(field);
-
-      if (field.required) {
-        if (
-          field.type === 'text' ||
-          field.type === 'url' ||
-          field.type === 'textarea' ||
-          field.type === 'richtext' ||
-          field.type === 'select' ||
-          field.type === 'date' ||
-          field.type === 'datetime' ||
-          field.type === 'json'
-        ) {
-          schema = z.string().min(1, 'Campo obrigatório');
-        }
-
-        if (
-          field.type === 'number' ||
-          field.type === 'currency' ||
-          field.type === 'relation' ||
-          field.type === 'upload'
-        ) {
-          schema = z.number({
-            required_error: 'Campo obrigatório',
-            invalid_type_error: 'Campo obrigatório',
-          });
-        }
-      }
-
-      shape[field.key] = schema;
-    }
-  }
-
-  return z.object(shape);
-}
-
-function serializeInitialValue(
-  field: CatalogFormFieldDefinition,
-  rawValue: unknown
-): unknown {
-  if (field.type === 'json') {
-    if (rawValue === null || rawValue === undefined || rawValue === '') {
-      return '{}';
-    }
-
-    return JSON.stringify(rawValue, null, 2);
-  }
-
-  if (field.type === 'switch') {
-    return Boolean(rawValue);
-  }
-
-  if (field.type === 'currency' || field.type === 'number') {
-    return rawValue === null || rawValue === undefined || rawValue === ''
-      ? null
-      : Number(rawValue);
-  }
-
-  if (field.type === 'relation' || field.type === 'upload') {
-    return rawValue === null || rawValue === undefined || rawValue === ''
-      ? null
-      : Number(rawValue);
-  }
-
-  if (field.type === 'date') {
-    return toDateInputValue(rawValue);
-  }
-
-  if (field.type === 'datetime') {
-    return toDateTimeInputValue(rawValue);
-  }
-
-  return rawValue === null || rawValue === undefined ? '' : String(rawValue);
-}
-
-function buildDefaultValues(
-  resourceConfig: CatalogResourceDefinition,
-  payload: CatalogRecord
-) {
-  const defaults: CatalogFormValues = {};
-
-  for (const section of resourceConfig.formSections) {
-    for (const field of section.fields) {
-      defaults[field.key] = serializeInitialValue(field, payload[field.key]);
-    }
-  }
-
-  return defaults;
-}
-
-function normalizeSubmitValue(
-  field: CatalogFormFieldDefinition,
-  rawValue: unknown
-) {
-  if (field.type === 'json') {
-    return String(rawValue || '').trim() ? JSON.parse(String(rawValue)) : {};
-  }
-
-  if (field.type === 'switch') {
-    return Boolean(rawValue);
-  }
-
-  if (
-    field.type === 'number' ||
-    field.type === 'currency' ||
-    field.type === 'relation' ||
-    field.type === 'upload'
-  ) {
-    if (rawValue === null || rawValue === undefined || rawValue === '') {
-      return null;
-    }
-
-    const parsed = Number(rawValue);
-    return Number.isNaN(parsed) ? null : parsed;
-  }
-
-  if (
-    field.type === 'text' ||
-    field.type === 'url' ||
-    field.type === 'textarea' ||
-    field.type === 'richtext'
-  ) {
-    return String(rawValue || '').trim() || null;
-  }
-
-  if (field.type === 'date' || field.type === 'datetime' || field.type === 'select') {
-    return String(rawValue || '').trim() || null;
-  }
-
-  return rawValue;
-}
-
-function extractRecordId(record: CatalogRecord) {
-  return Number(record.id ?? record.category_id ?? record.content_id ?? 0);
-}
-
-function extractRelationLabel(
-  item: CatalogRecord,
-  labelKeys: string[]
-) {
-  for (const key of labelKeys) {
-    const value = item[key];
-
-    if (value !== undefined && value !== null && String(value).trim() !== '') {
-      return String(value);
-    }
-  }
-
-  return getCatalogRecordLabel(item);
-}
-
-function getLocalizedPlaceholder(
-  field: CatalogFormFieldDefinition,
-  localeCode?: string | null
-) {
-  if (field.placeholder) {
-    return getCatalogLocalizedText(field.placeholder, localeCode);
-  }
-
-  const label = getCatalogLocalizedText(field.label, localeCode);
-  return localeCode?.startsWith('pt')
-    ? `Preencha ${label.toLowerCase()}`
-    : `Enter ${label.toLowerCase()}`;
-}
-
-function CatalogRelationField({
-  field,
-  value,
-  onChange,
-}: {
-  field: CatalogFormFieldDefinition;
-  value: unknown;
-  onChange: (value: number | null) => void;
-}) {
-  const { request, currentLocaleCode } = useApp();
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const [createOpen, setCreateOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState('');
-  const debounceRef = useRef<NodeJS.Timeout | null>(null);
-  const childResource =
-    field.relation?.createResource &&
-    catalogResourceMap.get(field.relation.createResource);
-
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-
-  useEffect(() => {
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-
-    debounceRef.current = setTimeout(() => {
-      setDebouncedSearch(search);
-    }, 300);
-
-    return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-    };
-  }, [search]);
-
-  const { data: options = [], isLoading } = useQuery<RelationOption[]>({
-    queryKey: [
-      'catalog-relation-options',
-      field.key,
-      field.relation?.endpoint,
-      debouncedSearch,
-    ],
-    queryFn: async () => {
-      if (!field.relation) return [];
-
-      const params: Record<string, string | number> = {
-        page: 1,
-        pageSize: 20,
-      };
-
-      if (debouncedSearch.trim()) {
-        params[field.relation.searchParam || 'search'] = debouncedSearch.trim();
-      }
-
-      const response = await request({
-        url: field.relation.endpoint,
-        method: 'GET',
-        params,
-      });
-
-      const payload = response.data as
-        | CatalogRecord[]
-        | { data?: CatalogRecord[] }
-        | undefined;
-      const items = Array.isArray(payload)
-        ? payload
-        : Array.isArray(payload?.data)
-          ? payload.data
-          : [];
-
-      return items.map((item) => ({
-        id: Number(item[field.relation.valueKey || 'id']),
-        label: extractRelationLabel(item, field.relation.labelKeys),
-      }));
-    },
-    enabled: Boolean(field.relation),
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const selectedOption = options.find((item) => item.id === Number(value));
-  const currentLabel =
-    selectedOption?.label ||
-    selectedLabel ||
-    (value ? `ID #${String(value)}` : '');
-
-  return (
-    <>
-      <div className="flex w-full items-center gap-2">
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              className="h-9 flex-1 justify-between overflow-hidden"
-            >
-              <span className="truncate text-left">
-                {currentLabel ||
-                  getCatalogLocalizedText(
-                    field.placeholder || field.label,
-                    currentLocaleCode
-                  )}
-              </span>
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="w-[var(--radix-popover-trigger-width)] p-0"
-            align="start"
-          >
-            <Command shouldFilter={false}>
-              <CommandInput
-                placeholder={
-                  currentLocaleCode?.startsWith('pt')
-                    ? 'Buscar registro...'
-                    : 'Search record...'
-                }
-                value={search}
-                onValueChange={setSearch}
-              />
-              <CommandList>
-                <CommandEmpty>
-                  {isLoading
-                    ? currentLocaleCode?.startsWith('pt')
-                      ? 'Carregando...'
-                      : 'Loading...'
-                    : currentLocaleCode?.startsWith('pt')
-                      ? 'Nenhum resultado.'
-                      : 'No results.'}
-                </CommandEmpty>
-                <CommandGroup>
-                  {options.map((option) => (
-                    <CommandItem
-                      key={option.id}
-                      value={`${option.label}-${option.id}`}
-                      onSelect={() => {
-                        onChange(option.id);
-                        setSelectedLabel(option.label);
-                        setOpen(false);
-                      }}
-                    >
-                      {option.label}
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-
-        {value ? (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            onClick={() => {
-              onChange(null);
-              setSelectedLabel('');
-            }}
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        ) : null}
-
-        {field.relation?.allowCreate && childResource ? (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            onClick={() => setCreateOpen(true)}
-          >
-            <Plus className="h-4 w-4" />
-          </Button>
-        ) : null}
-      </div>
-
-      {childResource ? (
-        <CatalogResourceFormSheet
-          open={createOpen}
-          onOpenChange={setCreateOpen}
-          resource={childResource.resource}
-          resourceConfig={childResource}
-          resourceTitle={childResource.singularLabel.pt}
-          resourceDescription=""
-          recordId={null}
-          onSuccess={(created) => {
-            const createdId = extractRecordId(created);
-            if (createdId) {
-              onChange(createdId);
-            }
-
-            setSelectedLabel(getCatalogRecordLabel(created));
-          }}
-        />
-      ) : null}
-    </>
-  );
-}
-
-function CatalogUploadField({
-  field,
-  value,
-  onChange,
-}: {
-  field: CatalogFormFieldDefinition;
-  value: unknown;
-  onChange: (value: number | null) => void;
-}) {
-  const { request } = useApp();
-  const [isUploading, setIsUploading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [previewUrl, setPreviewUrl] = useState('/placeholder.png');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    const loadPreview = async () => {
-      if (!value || Number(value) <= 0) {
-        setPreviewUrl('/placeholder.png');
-        return;
-      }
-
-      try {
-        const response = await request<{ url?: string }>({
-          url: `/file/open/${Number(value)}`,
-          method: 'PUT',
-        });
-        const nextUrl = String(response.data?.url || '').trim();
-        setPreviewUrl(
-          /^https?:\/\//i.test(nextUrl)
-            ? nextUrl
-            : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${nextUrl}`
-        );
-      } catch {
-        setPreviewUrl('/placeholder.png');
-      }
-    };
-
-    void loadPreview();
-  }, [request, value]);
-
-  const handleUpload = async (file: File) => {
-    setIsUploading(true);
-    setProgress(0);
-
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('destination', field.uploadDestination || 'catalog/file');
-
-      const response = await request<{ id?: number }>({
-        url: '/file',
-        method: 'POST',
-        data: formData,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-        onUploadProgress: (event) => {
-          if (!event.total) return;
-          setProgress(Math.round((event.loaded * 100) / event.total));
-        },
-      });
-
-      onChange(Number(response.data?.id || 0) || null);
-      setProgress(100);
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Falha no upload');
-      setProgress(0);
-    } finally {
-      setIsUploading(false);
-      if (inputRef.current) {
-        inputRef.current.value = '';
-      }
-    }
-  };
-
-  const handleRemove = async () => {
-    if (value) {
-      try {
-        await request({
-          url: '/file',
-          method: 'DELETE',
-          data: { ids: [Number(value)] },
-        });
-      } catch {
-        // Ignore cleanup errors to keep the form stable.
-      }
-    }
-
-    onChange(null);
-    setProgress(0);
-  };
-
-  return (
-    <div className="w-full space-y-3">
-      <input
-        ref={inputRef}
-        type="file"
-        accept={field.accept}
-        className="hidden"
-        onChange={(event) => {
-          const file = event.target.files?.[0];
-          if (file) {
-            void handleUpload(file);
-          }
-        }}
-      />
-
-      <div className="flex items-start gap-3">
-        <div className="relative size-24 shrink-0 overflow-hidden rounded-md border bg-muted/20">
-          <Image
-            src={previewUrl}
-            alt={String(value ? 'Preview do arquivo' : 'Placeholder de upload')}
-            fill
-            unoptimized
-            className="object-cover"
-          />
-        </div>
-
-        <div className="flex min-w-0 flex-1 flex-col gap-2">
-          <div className="flex flex-wrap items-center gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => inputRef.current?.click()}
-              disabled={isUploading}
-            >
-              <Upload className="mr-2 h-4 w-4" />
-              {value ? 'Trocar arquivo' : 'Enviar arquivo'}
-            </Button>
-
-            {value ? (
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => void handleRemove()}
-                disabled={isUploading}
-              >
-                Remover
-              </Button>
-            ) : null}
-          </div>
-
-          <p className="text-xs text-muted-foreground">
-            {value
-              ? `Arquivo vinculado: #${String(value)}`
-              : 'Nenhuma imagem enviada. O placeholder será usado até o upload.'}
-          </p>
-        </div>
-      </div>
-
-      {isUploading ? <Progress value={progress} /> : null}
-    </div>
-  );
-}
-
-export function CatalogResourceFormSheet({
-  open,
-  onOpenChange,
-  resource,
-  resourceConfig,
-  resourceTitle,
-  resourceDescription,
-  recordId,
-  onSuccess,
-}: FormSheetProps) {
-  const { request, currentLocaleCode } = useApp();
-  const t = useTranslations('catalog');
-  const isEditing = Boolean(recordId);
-  const formSchema = useMemo(
-    () => buildFormSchema(resourceConfig),
-    [resourceConfig]
-  );
-
-  const form = useForm<CatalogFormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: buildDefaultValues(resourceConfig, resourceConfig.template),
-  });
-
-  const { data: currentRecord, isLoading } = useQuery<CatalogRecord>({
-    queryKey: ['catalog-record-details', resource, recordId],
-    queryFn: async () => {
-      const response = await request({
-        url: `/catalog/${resource}/${recordId}`,
-        method: 'GET',
-      });
-
-      return response.data as CatalogRecord;
-    },
-    enabled: open && Boolean(recordId),
-  });
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const payload = currentRecord || resourceConfig.template;
-    form.reset(buildDefaultValues(resourceConfig, payload));
-  }, [currentRecord, form, open, resourceConfig]);
-
-  const submitLabel = isEditing
-    ? getCatalogLocalizedText(resourceConfig.editActionLabel, currentLocaleCode)
-    : getCatalogLocalizedText(resourceConfig.createActionLabel, currentLocaleCode);
-
-  const handleSubmit = async (values: CatalogFormValues) => {
-    try {
-      const payload: CatalogRecord = {};
-
-      for (const section of resourceConfig.formSections) {
-        for (const field of section.fields) {
-          payload[field.key] = normalizeSubmitValue(field, values[field.key]);
-        }
-      }
-
-      const response = await request({
-        url: isEditing
-          ? `/catalog/${resource}/${recordId}`
-          : `/catalog/${resource}`,
-        method: isEditing ? 'PATCH' : 'POST',
-        data: payload,
-      });
-
-      const savedRecord = (response.data || payload) as CatalogRecord;
-      toast.success(t('toasts.saveSuccess', { resource: resourceTitle }));
-      onOpenChange(false);
-      await onSuccess(savedRecord);
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : t('toasts.saveError')
-      );
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-2xl">
-        <SheetHeader>
-          <SheetTitle>{submitLabel}</SheetTitle>
-          <SheetDescription>{resourceDescription}</SheetDescription>
-        </SheetHeader>
-
-        {isEditing && isLoading ? (
-          <div className="flex items-center gap-2 p-4 text-sm text-muted-foreground">
-            <Loader2 className="h-4 w-4 animate-spin" />
-            Carregando dados do registro...
-          </div>
-        ) : (
-          <Form {...form}>
-            <form
-              id={`catalog-form-${resource}`}
-              className="min-w-0 space-y-6 px-4 pb-4"
-              onSubmit={form.handleSubmit(handleSubmit)}
-            >
-              {resourceConfig.formSections.map((section) => (
-                <section
-                  key={section.title.en}
-                  className="min-w-0 max-w-full space-y-4"
-                >
-                  <div>
-                    <h3 className="text-sm font-semibold">
-                      {getCatalogLocalizedText(section.title, currentLocaleCode)}
-                    </h3>
-                    {section.description ? (
-                      <p className="text-sm text-muted-foreground">
-                        {getCatalogLocalizedText(
-                          section.description,
-                          currentLocaleCode
-                        )}
-                      </p>
-                    ) : null}
-                  </div>
-
-                  <div className="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2">
-                    {section.fields.map((field) => (
-                      <div
-                        key={field.key}
-                        className={`min-w-0 ${
-                          field.span === 2 ? 'sm:col-span-2' : ''
-                        }`}
-                      >
-                        <FormField
-                          control={form.control}
-                          name={field.key}
-                          render={({ field: formField }) => (
-                            <FormItem>
-                              <FormLabel>
-                                {getCatalogLocalizedText(
-                                  field.label,
-                                  currentLocaleCode
-                                )}
-                              </FormLabel>
-                              <FormControl>
-                                {field.type === 'text' ||
-                                field.type === 'url' ||
-                                field.type === 'date' ||
-                                field.type === 'datetime' ? (
-                                  <Input
-                                    type={
-                                      field.type === 'url'
-                                        ? 'url'
-                                        : field.type === 'date'
-                                        ? 'date'
-                                        : field.type === 'datetime'
-                                          ? 'datetime-local'
-                                          : 'text'
-                                    }
-                                    placeholder={getLocalizedPlaceholder(
-                                      field,
-                                      currentLocaleCode
-                                    )}
-                                    className="w-full"
-                                    value={String(formField.value ?? '')}
-                                    onChange={formField.onChange}
-                                  />
-                                ) : field.type === 'textarea' ||
-                                  field.type === 'json' ? (
-                                  <Textarea
-                                    placeholder={getLocalizedPlaceholder(
-                                      field,
-                                      currentLocaleCode
-                                    )}
-                                    value={String(formField.value ?? '')}
-                                    onChange={formField.onChange}
-                                    className={
-                                      field.type === 'json'
-                                        ? 'min-h-40 w-full font-mono text-xs'
-                                        : 'min-h-28 w-full'
-                                    }
-                                  />
-                                ) : field.type === 'richtext' ? (
-                                  <div className="min-w-0 w-full max-w-full overflow-x-hidden space-y-2">
-                                    {!String(formField.value ?? '').trim() ? (
-                                      <p className="text-xs text-muted-foreground">
-                                        {getLocalizedPlaceholder(
-                                          field,
-                                          currentLocaleCode
-                                        )}
-                                      </p>
-                                    ) : null}
-                                    <RichTextEditor
-                                      value={String(formField.value ?? '')}
-                                      onChange={formField.onChange}
-                                      className="min-w-0 w-full max-w-full"
-                                    />
-                                  </div>
-                                ) : field.type === 'number' ? (
-                                  <Input
-                                    type="number"
-                                    className={
-                                      'w-full'
-                                    }
-                                    placeholder={getLocalizedPlaceholder(
-                                      field,
-                                      currentLocaleCode
-                                    )}
-                                    value={
-                                      formField.value === null ||
-                                      formField.value === undefined
-                                        ? ''
-                                        : String(formField.value)
-                                    }
-                                    onChange={(event) =>
-                                      formField.onChange(
-                                        event.target.value === ''
-                                          ? null
-                                          : Number(event.target.value)
-                                      )
-                                    }
-                                  />
-                                ) : field.type === 'currency' ? (
-                                  <InputMoney
-                                    className="w-full"
-                                    value={
-                                      typeof formField.value === 'number'
-                                        ? formField.value
-                                        : undefined
-                                    }
-                                    onValueChange={formField.onChange}
-                                  />
-                                ) : field.type === 'switch' ? (
-                                  <div className="flex h-9 w-full items-center">
-                                    <Switch
-                                      checked={Boolean(formField.value)}
-                                      onCheckedChange={formField.onChange}
-                                    />
-                                  </div>
-                                ) : field.type === 'select' ? (
-                                  <Select
-                                    value={String(formField.value ?? '')}
-                                    onValueChange={formField.onChange}
-                                  >
-                                    <SelectTrigger className="w-full">
-                                      <SelectValue
-                                        placeholder={getLocalizedPlaceholder(
-                                          field,
-                                          currentLocaleCode
-                                        )}
-                                      />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                      {field.options?.map((option) => (
-                                        <SelectItem
-                                          key={option.value}
-                                          value={option.value}
-                                        >
-                                          {getCatalogLocalizedText(
-                                            option.label,
-                                            currentLocaleCode
-                                          )}
-                                        </SelectItem>
-                                      ))}
-                                    </SelectContent>
-                                  </Select>
-                                ) : field.type === 'relation' ? (
-                                  <CatalogRelationField
-                                    field={field}
-                                    value={formField.value}
-                                    onChange={formField.onChange}
-                                  />
-                                ) : field.type === 'upload' ? (
-                                  <CatalogUploadField
-                                    field={field}
-                                    value={formField.value}
-                                    onChange={formField.onChange}
-                                  />
-                                ) : null}
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    ))}
-                  </div>
-                </section>
-              ))}
-            </form>
-          </Form>
-        )}
-
-        <SheetFooter className="border-t">
-          <div className="w-full">
-            <Button
-              type="submit"
-              form={`catalog-form-${resource}`}
-              className="w-full"
-              disabled={form.formState.isSubmitting || isLoading}
-            >
-              {form.formState.isSubmitting ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Save className="mr-2 h-4 w-4" />
-              )}
-              {isEditing ? 'Salvar alterações' : 'Salvar'}
-            </Button>
-          </div>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-}
+'use client';
+
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ChevronsUpDown, Loader2, Plus, Save, Upload, X } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import {
+  catalogResourceMap,
+  getCatalogLocalizedText,
+  getCatalogRecordLabel,
+  type CatalogFormFieldDefinition,
+  type CatalogResourceDefinition,
+} from '../_lib/catalog-resources';
+
+type CatalogRecord = Record<string, unknown>;
+type CatalogFormValues = Record<string, unknown>;
+type RelationOption = { id: number; label: string };
+type FormSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  resource: string;
+  resourceConfig: CatalogResourceDefinition;
+  resourceTitle: string;
+  resourceDescription: string;
+  recordId: number | null;
+  onSuccess: (record: CatalogRecord) => Promise<void> | void;
+};
+
+function toDateInputValue(value: unknown) {
+  if (!value) return '';
+  const date = new Date(String(value));
+  if (Number.isNaN(date.getTime())) return '';
+  return date.toISOString().slice(0, 10);
+}
+
+function toDateTimeInputValue(value: unknown) {
+  if (!value) return '';
+  const date = new Date(String(value));
+  if (Number.isNaN(date.getTime())) return '';
+  const offset = date.getTimezoneOffset();
+  const local = new Date(date.getTime() - offset * 60 * 1000);
+  return local.toISOString().slice(0, 16);
+}
+
+function buildFieldSchema(field: CatalogFormFieldDefinition) {
+  switch (field.type) {
+    case 'switch':
+      return z.boolean().default(false);
+    case 'number':
+    case 'currency':
+    case 'relation':
+    case 'upload':
+      return z.number().nullable().optional();
+    case 'json':
+      return z.string().superRefine((value, ctx) => {
+        if (!value.trim()) return;
+        try {
+          JSON.parse(value);
+        } catch {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'JSON inválido',
+          });
+        }
+      });
+    case 'url':
+      return z.string().superRefine((value, ctx) => {
+        const normalized = value.trim();
+        if (!normalized) return;
+
+        try {
+          new URL(normalized);
+        } catch {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'URL inválida',
+          });
+        }
+      });
+    default:
+      return z.string();
+  }
+}
+
+function buildFormSchema(resourceConfig: CatalogResourceDefinition) {
+  const shape: Record<string, z.ZodTypeAny> = {};
+
+  for (const section of resourceConfig.formSections) {
+    for (const field of section.fields) {
+      let schema: z.ZodTypeAny = buildFieldSchema(field);
+
+      if (field.required) {
+        if (
+          field.type === 'text' ||
+          field.type === 'url' ||
+          field.type === 'textarea' ||
+          field.type === 'richtext' ||
+          field.type === 'select' ||
+          field.type === 'date' ||
+          field.type === 'datetime' ||
+          field.type === 'json'
+        ) {
+          schema = z.string().min(1, 'Campo obrigatório');
+        }
+
+        if (
+          field.type === 'number' ||
+          field.type === 'currency' ||
+          field.type === 'relation' ||
+          field.type === 'upload'
+        ) {
+          schema = z.number({
+            required_error: 'Campo obrigatório',
+            invalid_type_error: 'Campo obrigatório',
+          });
+        }
+      }
+
+      shape[field.key] = schema;
+    }
+  }
+
+  return z.object(shape);
+}
+
+function serializeInitialValue(
+  field: CatalogFormFieldDefinition,
+  rawValue: unknown
+): unknown {
+  if (field.type === 'json') {
+    if (rawValue === null || rawValue === undefined || rawValue === '') {
+      return '{}';
+    }
+
+    return JSON.stringify(rawValue, null, 2);
+  }
+
+  if (field.type === 'switch') {
+    return Boolean(rawValue);
+  }
+
+  if (field.type === 'currency' || field.type === 'number') {
+    return rawValue === null || rawValue === undefined || rawValue === ''
+      ? null
+      : Number(rawValue);
+  }
+
+  if (field.type === 'relation' || field.type === 'upload') {
+    return rawValue === null || rawValue === undefined || rawValue === ''
+      ? null
+      : Number(rawValue);
+  }
+
+  if (field.type === 'date') {
+    return toDateInputValue(rawValue);
+  }
+
+  if (field.type === 'datetime') {
+    return toDateTimeInputValue(rawValue);
+  }
+
+  return rawValue === null || rawValue === undefined ? '' : String(rawValue);
+}
+
+function buildDefaultValues(
+  resourceConfig: CatalogResourceDefinition,
+  payload: CatalogRecord
+) {
+  const defaults: CatalogFormValues = {};
+
+  for (const section of resourceConfig.formSections) {
+    for (const field of section.fields) {
+      defaults[field.key] = serializeInitialValue(field, payload[field.key]);
+    }
+  }
+
+  return defaults;
+}
+
+function normalizeSubmitValue(
+  field: CatalogFormFieldDefinition,
+  rawValue: unknown
+) {
+  if (field.type === 'json') {
+    return String(rawValue || '').trim() ? JSON.parse(String(rawValue)) : {};
+  }
+
+  if (field.type === 'switch') {
+    return Boolean(rawValue);
+  }
+
+  if (
+    field.type === 'number' ||
+    field.type === 'currency' ||
+    field.type === 'relation' ||
+    field.type === 'upload'
+  ) {
+    if (rawValue === null || rawValue === undefined || rawValue === '') {
+      return null;
+    }
+
+    const parsed = Number(rawValue);
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+
+  if (
+    field.type === 'text' ||
+    field.type === 'url' ||
+    field.type === 'textarea' ||
+    field.type === 'richtext'
+  ) {
+    return String(rawValue || '').trim() || null;
+  }
+
+  if (
+    field.type === 'date' ||
+    field.type === 'datetime' ||
+    field.type === 'select'
+  ) {
+    return String(rawValue || '').trim() || null;
+  }
+
+  return rawValue;
+}
+
+function extractRecordId(record: CatalogRecord) {
+  return Number(record.id ?? record.category_id ?? record.content_id ?? 0);
+}
+
+function extractRelationLabel(
+  item: CatalogRecord,
+  labelKeys: string[]
+): string {
+  for (const key of labelKeys) {
+    const value = item[key];
+
+    if (value !== undefined && value !== null && String(value).trim() !== '') {
+      return String(value);
+    }
+  }
+
+  return String(getCatalogRecordLabel(item));
+}
+
+function getLocalizedPlaceholder(
+  field: CatalogFormFieldDefinition,
+  localeCode?: string | null
+) {
+  if (field.placeholder) {
+    return getCatalogLocalizedText(field.placeholder, localeCode);
+  }
+
+  const label = getCatalogLocalizedText(field.label, localeCode);
+  return localeCode?.startsWith('pt')
+    ? `Preencha ${label.toLowerCase()}`
+    : `Enter ${label.toLowerCase()}`;
+}
+
+function CatalogRelationField({
+  field,
+  value,
+  onChange,
+}: {
+  field: CatalogFormFieldDefinition;
+  value: unknown;
+  onChange: (value: number | null) => void;
+}) {
+  const { request, currentLocaleCode } = useApp();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [selectedLabel, setSelectedLabel] = useState('');
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+  const childResource =
+    field.relation?.createResource &&
+    catalogResourceMap.get(field.relation.createResource);
+
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 300);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [search]);
+
+  const { data: options = [], isLoading } = useQuery<RelationOption[]>({
+    queryKey: [
+      'catalog-relation-options',
+      field.key,
+      field.relation?.endpoint,
+      debouncedSearch,
+    ],
+    queryFn: async () => {
+      const relation = field.relation;
+      if (!relation) return [];
+
+      const params: Record<string, string | number> = {
+        page: 1,
+        pageSize: 20,
+      };
+
+      if (debouncedSearch.trim()) {
+        params[relation.searchParam || 'search'] = debouncedSearch.trim();
+      }
+
+      const response = await request({
+        url: relation.endpoint,
+        method: 'GET',
+        params,
+      });
+
+      const payload = response.data as
+        | CatalogRecord[]
+        | { data?: CatalogRecord[] }
+        | undefined;
+      const items = Array.isArray(payload)
+        ? payload
+        : Array.isArray(payload?.data)
+          ? payload.data
+          : [];
+
+      return items.map((item) => ({
+        id: Number(item[relation.valueKey || 'id']),
+        label: extractRelationLabel(item, relation.labelKeys),
+      }));
+    },
+    enabled: Boolean(field.relation),
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const selectedOption = options.find((item) => item.id === Number(value));
+  const currentLabel =
+    selectedOption?.label ||
+    selectedLabel ||
+    (value ? `ID #${String(value)}` : '');
+
+  return (
+    <>
+      <div className="flex w-full items-center gap-2">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              className="h-9 flex-1 justify-between overflow-hidden"
+            >
+              <span className="truncate text-left">
+                {currentLabel ||
+                  getCatalogLocalizedText(
+                    field.placeholder || field.label,
+                    currentLocaleCode
+                  )}
+              </span>
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-[var(--radix-popover-trigger-width)] p-0"
+            align="start"
+          >
+            <Command shouldFilter={false}>
+              <CommandInput
+                placeholder={
+                  currentLocaleCode?.startsWith('pt')
+                    ? 'Buscar registro...'
+                    : 'Search record...'
+                }
+                value={search}
+                onValueChange={setSearch}
+              />
+              <CommandList>
+                <CommandEmpty>
+                  {isLoading
+                    ? currentLocaleCode?.startsWith('pt')
+                      ? 'Carregando...'
+                      : 'Loading...'
+                    : currentLocaleCode?.startsWith('pt')
+                      ? 'Nenhum resultado.'
+                      : 'No results.'}
+                </CommandEmpty>
+                <CommandGroup>
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.id}
+                      value={`${option.label}-${option.id}`}
+                      onSelect={() => {
+                        onChange(option.id);
+                        setSelectedLabel(option.label);
+                        setOpen(false);
+                      }}
+                    >
+                      {option.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        {value ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={() => {
+              onChange(null);
+              setSelectedLabel('');
+            }}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        ) : null}
+
+        {field.relation?.allowCreate && childResource ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={() => setCreateOpen(true)}
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        ) : null}
+      </div>
+
+      {childResource ? (
+        <CatalogResourceFormSheet
+          open={createOpen}
+          onOpenChange={setCreateOpen}
+          resource={childResource.resource}
+          resourceConfig={childResource}
+          resourceTitle={childResource.singularLabel.pt}
+          resourceDescription=""
+          recordId={null}
+          onSuccess={(created) => {
+            const createdId = extractRecordId(created);
+            if (createdId) {
+              onChange(createdId);
+            }
+
+            setSelectedLabel(String(getCatalogRecordLabel(created)));
+          }}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function CatalogUploadField({
+  field,
+  value,
+  onChange,
+}: {
+  field: CatalogFormFieldDefinition;
+  value: unknown;
+  onChange: (value: number | null) => void;
+}) {
+  const { request } = useApp();
+  const [isUploading, setIsUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [previewUrl, setPreviewUrl] = useState('/placeholder.png');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const loadPreview = async () => {
+      if (!value || Number(value) <= 0) {
+        setPreviewUrl('/placeholder.png');
+        return;
+      }
+
+      try {
+        const response = await request<{ url?: string }>({
+          url: `/file/open/${Number(value)}`,
+          method: 'PUT',
+        });
+        const nextUrl = String(response.data?.url || '').trim();
+        setPreviewUrl(
+          /^https?:\/\//i.test(nextUrl)
+            ? nextUrl
+            : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${nextUrl}`
+        );
+      } catch {
+        setPreviewUrl('/placeholder.png');
+      }
+    };
+
+    void loadPreview();
+  }, [request, value]);
+
+  const handleUpload = async (file: File) => {
+    setIsUploading(true);
+    setProgress(0);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', field.uploadDestination || 'catalog/file');
+
+      const response = await request<{ id?: number }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (event) => {
+          if (!event.total) return;
+          setProgress(Math.round((event.loaded * 100) / event.total));
+        },
+      });
+
+      onChange(Number(response.data?.id || 0) || null);
+      setProgress(100);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Falha no upload');
+      setProgress(0);
+    } finally {
+      setIsUploading(false);
+      if (inputRef.current) {
+        inputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleRemove = async () => {
+    if (value) {
+      try {
+        await request({
+          url: '/file',
+          method: 'DELETE',
+          data: { ids: [Number(value)] },
+        });
+      } catch {
+        // Ignore cleanup errors to keep the form stable.
+      }
+    }
+
+    onChange(null);
+    setProgress(0);
+  };
+
+  return (
+    <div className="w-full space-y-3">
+      <input
+        ref={inputRef}
+        type="file"
+        accept={field.accept}
+        className="hidden"
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) {
+            void handleUpload(file);
+          }
+        }}
+      />
+
+      <div className="flex items-start gap-3">
+        <div className="relative size-24 shrink-0 overflow-hidden rounded-md border bg-muted/20">
+          <Image
+            src={previewUrl}
+            alt={String(value ? 'Preview do arquivo' : 'Placeholder de upload')}
+            fill
+            unoptimized
+            className="object-cover"
+          />
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => inputRef.current?.click()}
+              disabled={isUploading}
+            >
+              <Upload className="mr-2 h-4 w-4" />
+              {value ? 'Trocar arquivo' : 'Enviar arquivo'}
+            </Button>
+
+            {value ? (
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => void handleRemove()}
+                disabled={isUploading}
+              >
+                Remover
+              </Button>
+            ) : null}
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            {value
+              ? `Arquivo vinculado: #${String(value)}`
+              : 'Nenhuma imagem enviada. O placeholder será usado até o upload.'}
+          </p>
+        </div>
+      </div>
+
+      {isUploading ? <Progress value={progress} /> : null}
+    </div>
+  );
+}
+
+export function CatalogResourceFormSheet({
+  open,
+  onOpenChange,
+  resource,
+  resourceConfig,
+  resourceTitle,
+  resourceDescription,
+  recordId,
+  onSuccess,
+}: FormSheetProps) {
+  const { request, currentLocaleCode } = useApp();
+  const t = useTranslations('catalog');
+  const isEditing = Boolean(recordId);
+  const formSchema = useMemo(
+    () => buildFormSchema(resourceConfig),
+    [resourceConfig]
+  );
+
+  const form = useForm<CatalogFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: buildDefaultValues(resourceConfig, resourceConfig.template),
+  });
+
+  const { data: currentRecord, isLoading } = useQuery<CatalogRecord>({
+    queryKey: ['catalog-record-details', resource, recordId],
+    queryFn: async () => {
+      const response = await request({
+        url: `/catalog/${resource}/${recordId}`,
+        method: 'GET',
+      });
+
+      return response.data as CatalogRecord;
+    },
+    enabled: open && Boolean(recordId),
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const payload = currentRecord || resourceConfig.template;
+    form.reset(buildDefaultValues(resourceConfig, payload));
+  }, [currentRecord, form, open, resourceConfig]);
+
+  const submitLabel = isEditing
+    ? getCatalogLocalizedText(resourceConfig.editActionLabel, currentLocaleCode)
+    : getCatalogLocalizedText(
+        resourceConfig.createActionLabel,
+        currentLocaleCode
+      );
+
+  const handleSubmit = async (values: CatalogFormValues) => {
+    try {
+      const payload: CatalogRecord = {};
+
+      for (const section of resourceConfig.formSections) {
+        for (const field of section.fields) {
+          payload[field.key] = normalizeSubmitValue(field, values[field.key]);
+        }
+      }
+
+      const response = await request({
+        url: isEditing
+          ? `/catalog/${resource}/${recordId}`
+          : `/catalog/${resource}`,
+        method: isEditing ? 'PATCH' : 'POST',
+        data: payload,
+      });
+
+      const savedRecord = (response.data || payload) as CatalogRecord;
+      toast.success(t('toasts.saveSuccess', { resource: resourceTitle }));
+      onOpenChange(false);
+      await onSuccess(savedRecord);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t('toasts.saveError')
+      );
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full overflow-x-hidden overflow-y-auto sm:max-w-2xl">
+        <SheetHeader>
+          <SheetTitle>{submitLabel}</SheetTitle>
+          <SheetDescription>{resourceDescription}</SheetDescription>
+        </SheetHeader>
+
+        {isEditing && isLoading ? (
+          <div className="flex items-center gap-2 p-4 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Carregando dados do registro...
+          </div>
+        ) : (
+          <Form {...form}>
+            <form
+              id={`catalog-form-${resource}`}
+              className="min-w-0 space-y-6 px-4 pb-4"
+              onSubmit={form.handleSubmit(handleSubmit)}
+            >
+              {resourceConfig.formSections.map((section) => (
+                <section
+                  key={section.title.en}
+                  className="min-w-0 max-w-full space-y-4"
+                >
+                  <div>
+                    <h3 className="text-sm font-semibold">
+                      {getCatalogLocalizedText(
+                        section.title,
+                        currentLocaleCode
+                      )}
+                    </h3>
+                    {section.description ? (
+                      <p className="text-sm text-muted-foreground">
+                        {getCatalogLocalizedText(
+                          section.description,
+                          currentLocaleCode
+                        )}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <div className="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2">
+                    {section.fields.map((field) => (
+                      <div
+                        key={field.key}
+                        className={`min-w-0 ${
+                          field.span === 2 ? 'sm:col-span-2' : ''
+                        }`}
+                      >
+                        <FormField
+                          control={form.control}
+                          name={field.key}
+                          render={({ field: formField }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {getCatalogLocalizedText(
+                                  field.label,
+                                  currentLocaleCode
+                                )}
+                              </FormLabel>
+                              <FormControl>
+                                {field.type === 'text' ||
+                                field.type === 'url' ||
+                                field.type === 'date' ||
+                                field.type === 'datetime' ? (
+                                  <Input
+                                    type={
+                                      field.type === 'url'
+                                        ? 'url'
+                                        : field.type === 'date'
+                                          ? 'date'
+                                          : field.type === 'datetime'
+                                            ? 'datetime-local'
+                                            : 'text'
+                                    }
+                                    placeholder={getLocalizedPlaceholder(
+                                      field,
+                                      currentLocaleCode
+                                    )}
+                                    className="w-full"
+                                    value={String(formField.value ?? '')}
+                                    onChange={formField.onChange}
+                                  />
+                                ) : field.type === 'textarea' ||
+                                  field.type === 'json' ? (
+                                  <Textarea
+                                    placeholder={getLocalizedPlaceholder(
+                                      field,
+                                      currentLocaleCode
+                                    )}
+                                    value={String(formField.value ?? '')}
+                                    onChange={formField.onChange}
+                                    className={
+                                      field.type === 'json'
+                                        ? 'min-h-40 w-full font-mono text-xs'
+                                        : 'min-h-28 w-full'
+                                    }
+                                  />
+                                ) : field.type === 'richtext' ? (
+                                  <div className="min-w-0 w-full max-w-full overflow-x-hidden space-y-2">
+                                    {!String(formField.value ?? '').trim() ? (
+                                      <p className="text-xs text-muted-foreground">
+                                        {getLocalizedPlaceholder(
+                                          field,
+                                          currentLocaleCode
+                                        )}
+                                      </p>
+                                    ) : null}
+                                    <RichTextEditor
+                                      value={String(formField.value ?? '')}
+                                      onChange={formField.onChange}
+                                      className="min-w-0 w-full max-w-full"
+                                    />
+                                  </div>
+                                ) : field.type === 'number' ? (
+                                  <Input
+                                    type="number"
+                                    className={'w-full'}
+                                    placeholder={getLocalizedPlaceholder(
+                                      field,
+                                      currentLocaleCode
+                                    )}
+                                    value={
+                                      formField.value === null ||
+                                      formField.value === undefined
+                                        ? ''
+                                        : String(formField.value)
+                                    }
+                                    onChange={(event) =>
+                                      formField.onChange(
+                                        event.target.value === ''
+                                          ? null
+                                          : Number(event.target.value)
+                                      )
+                                    }
+                                  />
+                                ) : field.type === 'currency' ? (
+                                  <InputMoney
+                                    className="w-full"
+                                    value={
+                                      typeof formField.value === 'number'
+                                        ? formField.value
+                                        : undefined
+                                    }
+                                    onValueChange={formField.onChange}
+                                  />
+                                ) : field.type === 'switch' ? (
+                                  <div className="flex h-9 w-full items-center">
+                                    <Switch
+                                      checked={Boolean(formField.value)}
+                                      onCheckedChange={formField.onChange}
+                                    />
+                                  </div>
+                                ) : field.type === 'select' ? (
+                                  <Select
+                                    value={String(formField.value ?? '')}
+                                    onValueChange={formField.onChange}
+                                  >
+                                    <SelectTrigger className="w-full">
+                                      <SelectValue
+                                        placeholder={getLocalizedPlaceholder(
+                                          field,
+                                          currentLocaleCode
+                                        )}
+                                      />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {field.options?.map((option) => (
+                                        <SelectItem
+                                          key={option.value}
+                                          value={option.value}
+                                        >
+                                          {getCatalogLocalizedText(
+                                            option.label,
+                                            currentLocaleCode
+                                          )}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                ) : field.type === 'relation' ? (
+                                  <CatalogRelationField
+                                    field={field}
+                                    value={formField.value}
+                                    onChange={formField.onChange}
+                                  />
+                                ) : field.type === 'upload' ? (
+                                  <CatalogUploadField
+                                    field={field}
+                                    value={formField.value}
+                                    onChange={formField.onChange}
+                                  />
+                                ) : null}
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              ))}
+            </form>
+          </Form>
+        )}
+
+        <SheetFooter className="border-t">
+          <div className="w-full">
+            <Button
+              type="submit"
+              form={`catalog-form-${resource}`}
+              className="w-full"
+              disabled={form.formState.isSubmitting || isLoading}
+            >
+              {form.formState.isSubmitting ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Save className="mr-2 h-4 w-4" />
+              )}
+              {isEditing ? 'Salvar alterações' : 'Salvar'}
+            </Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}