Fix some minor issues

# Usa la imagen oficial de Nginx desde Docker Hub

# Use the official Nginx image from Docker Hub

FROM nginx

# Copia el archivo de configuración personalizado al directorio de configuración de NGINX

# Copy custom config file into NGINX config directory

# COPY nginx.conf /etc/nginx/nginx.conf

# Copia el contenido estático desde el directorio local al directorio del servidor Nginx

# Copy static content from local directory to Nginx web root

COPY ./out /usr/share/nginx/html

# Expone el puerto 8080 del contenedor

# Expose container port 80

EXPOSE 80

 No newline at end of file

# Usa una imagen oficial de Node como base

# Use official Node image as base

FROM node:20

# Establece el directorio de trabajo en /app

# Set the working directory to /app

WORKDIR /app

# Copia los archivos de configuración y las dependencias

# Copy config files and dependencies

COPY package.json yarn.lock ./

# Instala las dependencias usando yarn

# Install dependencies using yarn

RUN yarn install

# Copia el resto de la aplicación

# Copy the rest of the application

COPY . .

# Compila la aplicación

# Build the application

RUN yarn build

# Expone el puerto 3000 (o el puerto que hayas configurado en tu aplicación Next.js)

# Expose port 3000 (or the port configured for your Next.js app)

EXPOSE 3000

# Comando para iniciar la aplicación

# Command used to start the application

CMD ["yarn", "start"]

# Usa una imagen oficial de Node como base

# Use official Node image as base

FROM node:20 as build

# Establece el directorio de trabajo en /app

# Set the working directory to /app

WORKDIR /app

# Copia los archivos de configuración y las dependencias

# Copy config files and dependencies

COPY package.json yarn.lock ./

# Instala las dependencias usando yarn

# Install dependencies using yarn

RUN yarn install

# Copia el resto de la aplicación

# Copy the rest of the application

COPY . .

# Compila la aplicación

# Build the application

RUN yarn build

RUN yarn export

const ajv = new Ajv();

const ConfigCapif = () => {

  // Obtener configuración desde el backend

  // Get configuration from backend

  const { data: configData, isLoading, isError, refetch } = useQuery({

    queryKey: ['configuration'],

    queryFn: getConfiguration,

  const [editableConfig, setEditableConfig] = useState(null);

  const [jsonConfig, setJsonConfig] = useState('');

  const [isJsonValid, setIsJsonValid] = useState(true);

  const [newParams, setNewParams] = useState({}); // Estado para nuevos parámetros

  const [newParams, setNewParams] = useState({}); // State for new parameters

  const [openDialog, setOpenDialog] = useState(false);

  const [currentSection, setCurrentSection] = useState('');

    }

  }, [configData]);

  // Mutaciones para actualizar parámetros individuales y reemplazar la configuración

  // Mutations to update individual parameters and replace configuration

  const updateParamMutation = useMutation({

    mutationFn: updateConfigParam,

    onSuccess: () => refetch(),

    updateParamMutation.mutate({ param_path: path, new_value: value });

  };

  // Manejar el evento de presionar Enter

  // Handle Enter key press event

  const handleKeyDown = (event, path, value) => {

    if (event.key === 'Enter') {

      handleBlur(path, value);

    }

  };

  const [jsonError, setJsonError] = useState(""); // Nuevo estado para manejar el error del JSON

  const [jsonError, setJsonError] = useState(""); // New state to handle JSON errors

  const handleJsonChange = (e) => {

    const value = e.target.value;

      return "The 'settings' field must contain at least one section with settings.";

    }

    // Expresión regular para validar *snake_case* (solo minúsculas y _)

    // Regex to validate snake_case (lowercase and underscore only)

    const snakeCaseRegex = /^[a-z0-9_]+$/;

    // Función recursiva para validar nombres de los campos

    // Recursive function to validate field names

    const validateKeys = (obj, parentKey = "") => {

      for (const key in obj) {

        if (!snakeCaseRegex.test(key)) {

      return null;

    };

    // Validamos los nombres de los campos en toda la estructura

    // Validate field names across the full structure

    const snakeCaseError = validateKeys(json);

    if (snakeCaseError) return snakeCaseError;

    return null; //  No hay errores

    return null; //  No errors

  };

  const formatTitle = (text) => {

  const handleAddConfig = () => {

    if (!newParamName || newParamValue === undefined) {

      alert("Debe ingresar un nombre y un valor para la configuración.");

      alert("You must provide a configuration name and value.");

      return;

    }

  const handleAddSection = () => {

    if (!newSectionName.trim() || newSectionParams.some(p => !p.key.trim())) {

      alert("Debes ingresar un nombre para la sección y al menos un parámetro.");

      alert("You must provide a section name and at least one parameter.");

      return;

    }

  };

  // Estado para el diálogo de confirmación

  // State for confirmation dialog

  const [openConfirmDialog, setOpenConfirmDialog] = useState(false);

  const [deleteTarget, setDeleteTarget] = useState({ type: '', path: '' });

  // Mutaciones

  // Mutations

  const removeParamMutation = useMutation({

    mutationFn: removeConfigParam,

    onSuccess: () => refetch(),

    onSuccess: () => refetch(),

  });

  // Función para abrir el diálogo antes de eliminar

  // Function to open dialog before deletion

  const handleOpenConfirmDialog = (type, path) => {

    setDeleteTarget({ type, path });

    setOpenConfirmDialog(true);

  };

  // Función para cerrar el diálogo

  // Function to close the dialog

  const handleCloseConfirmDialog = () => {

    setOpenConfirmDialog(false);

    setDeleteTarget({ type: '', path: '' });

  };

  // Función para confirmar eliminación

  // Function to confirm deletion

  const handleConfirmDelete = () => {

    if (deleteTarget.type === 'param') {

      removeParamMutation.mutate({ param_path: deleteTarget.path });

  return (

    <Grid container spacing={3} marginTop={2}>

      {/* Cuadro principal con datos generales y secciones desplegables */}

      {/* Main panel with general data and expandable sections */}

      <Grid item xs={12}>

        <Card>

          <CardHeader 

const ajv = new Ajv();

const ConfigRegister = () => {

  // Obtener configuración desde el backend

  // Get configuration from backend

  const { data: configData, isLoading, isError, refetch } = useQuery({

    queryKey: ['configuration'],

    queryFn: getRegisterConfiguration,

  const [editableConfig, setEditableConfig] = useState(null);

  const [jsonConfig, setJsonConfig] = useState('');

  const [isJsonValid, setIsJsonValid] = useState(true);

  const [newParams, setNewParams] = useState({}); // Estado para nuevos parámetros

  const [newParams, setNewParams] = useState({}); // State for new parameters

  const [openDialog, setOpenDialog] = useState(false);

  const [currentSection, setCurrentSection] = useState('');

    }

  }, [configData]);

  // Mutaciones para actualizar parámetros individuales y reemplazar la configuración

  // Mutations to update individual parameters and replace configuration

  const updateParamMutation = useMutation({

    mutationFn: updateRegisterConfigParam,

    onSuccess: () => refetch(),

    updateParamMutation.mutate({ param_path: path, new_value: value });

  };

  // Manejar el evento de presionar Enter

  // Handle Enter key press event

  const handleKeyDown = (event, path, value) => {

    if (event.key === 'Enter') {

      handleBlur(path, value);

    }

  };

  const [jsonError, setJsonError] = useState(""); // Nuevo estado para manejar el error del JSON

  const [jsonError, setJsonError] = useState(""); // New state to handle JSON errors

  const handleJsonChange = (e) => {

    const value = e.target.value;

      return "The 'settings' field must contain at least one section with settings.";

    }

    // Expresión regular para validar *snake_case* (solo minúsculas y _)

    // Regex to validate snake_case (lowercase and underscore only)

    const snakeCaseRegex = /^[a-z0-9_]+$/;

    // Función recursiva para validar nombres de los campos

    // Recursive function to validate field names

    const validateKeys = (obj, parentKey = "") => {

      for (const key in obj) {

        if (!snakeCaseRegex.test(key)) {

      return null;

    };

    // Validamos los nombres de los campos en toda la estructura

    // Validate field names across the full structure

    const snakeCaseError = validateKeys(json);

    if (snakeCaseError) return snakeCaseError;

    return null; //  No hay errores

    return null; //  No errors

  };

  const formatTitle = (text) => {

  const handleAddConfig = () => {

    if (!newParamName || newParamValue === undefined) {

      alert("Debe ingresar un nombre y un valor para la configuración.");

      alert("You must provide a configuration name and value.");

      return;

    }

  const handleAddSection = () => {

    if (!newSectionName.trim() || newSectionParams.some(p => !p.key.trim())) {

      alert("Debes ingresar un nombre para la sección y al menos un parámetro.");

      alert("You must provide a section name and at least one parameter.");

      return;

    }

  // Estado para el diálogo de confirmación

  // State for confirmation dialog

  const [openConfirmDialog, setOpenConfirmDialog] = useState(false);

  const [deleteTarget, setDeleteTarget] = useState({ type: '', path: '' });

  // Mutaciones

  // Mutations

  const removeParamMutation = useMutation({

    mutationFn: removeRegisterConfigParam,

    onSuccess: () => refetch(),

    onSuccess: () => refetch(),

  });

  // Función para abrir el diálogo antes de eliminar

  // Function to open dialog before deletion

  const handleOpenConfirmDialog = (type, path) => {

    setDeleteTarget({ type, path });

    setOpenConfirmDialog(true);

  };

  // Función para cerrar el diálogo

  // Function to close the dialog

  const handleCloseConfirmDialog = () => {

    setOpenConfirmDialog(false);

    setDeleteTarget({ type: '', path: '' });

  };

  // Función para confirmar eliminación

  // Function to confirm deletion

  const handleConfirmDelete = () => {

    if (deleteTarget.type === 'param') {

      removeParamMutation.mutate({ param_path: deleteTarget.path });

  return (

    <Grid container spacing={3} marginTop={2}>

      {/* Cuadro principal con datos generales y secciones desplegables */}

      {/* Main panel with general data and expandable sections */}

      <Grid item xs={12}>

        <Card>

          <CardHeader