export default function Loading() { return null }
Añade un boton de agregar activo con un formulario con el tomando en cuenta el siguiente modelo import { ObjectId } from "mongodb";
export interface ActivoFijo { _id?: ObjectId | string; // MongoDB ObjectId or string for compatibility "No caso": string; "Descripcion"?: string; "Marca"?: string; "Modelo"?: string; "Serie"?: string; "# Maquina"?: string; "Extra 1 (MM)"?: string; "Extra 2 (Inventario Trucklite 1)"?: string; "Extra 3 (Inventario Trucklite 2)"?: string; "Extra 4 (Mex)"?: string; "Area"?: string; "Linea"?: string; "Numero layout"?: string; "Cuadrante"?: string; "Pais de origen"?: string; "Tipo de documento"?: string; "No pedimento/folio factura"?: string; "Fecha de pago/emision"?: string; "Estatus"?: "Activo" | "Mantenimiento" | "Inactivo"; "Accion correctiva"?: string; "Accesorios del activo"?: string; "Comentario de placa"?: string; "Comentario correlación"?: string; "Año de adquisicion"?: string; "Rectificacion 2023/2024"?: string; "Imagenes"?: string[]; }
I'll add an "Agregar Activo" button with a form dialog that follows your ActivoFijo model. This will allow users to add new assets to the system.
He añadido un botón "Agregar Activo" con un formulario completo que sigue el modelo ActivoFijo que proporcionaste. El formulario incluye:
- Todos los campos del modelo ActivoFijo con sus tipos correspondientes
- Validación básica (campo obligatorio para "No caso")
- Selects para campos con opciones predefinidas como Área, Estatus y Tipo de documento
- Soporte para carga de múltiples imágenes con vista previa
- Un diseño responsive con scroll para manejar la gran cantidad de campos
- Botones para cancelar y guardar
El botón se ha colocado junto a los filtros para mantener una interfaz coherente. Cuando el usuario hace clic en "Agregar Activo", se abre un diálogo modal con el formulario completo.
Perfecto! Voy a crear una página completa para el formulario con un estilo similar al de la imagen y hacer que el botón sea azul.
Perfecto! He creado el formulario como una página completa con el estilo que solicitaste:
Cambios realizados:
- Nueva ruta
/agregar-activo: Creé una página completa para el formulario en lugar de un modal Estilo similar a la imagen:
- Labels en color rosa/rose (
text-rose-400) - Diseño limpio con fondo blanco y bordes sutiles
- Grid de 2 columnas para organizar los campos
- Inputs con bordes grises que cambian a rosa al hacer focus
- Labels en color rosa/rose (
- Botón azul: El botón "Agregar Activo" ahora es azul (
bg-blue-600 hover:bg-blue-700) - Navegación: El botón navega a la nueva página usando Next.js Link
- Header con botón de volver: Incluye un botón para regresar a la página principal
- Formulario completo: Mantiene todos los campos del modelo ActivoFijo
Características del formulario:
- Diseño responsive: Se adapta a diferentes tamaños de pantalla
- Validación: Campo obligatorio para "No caso"
- Carga de imágenes: Con vista previa de las imágenes seleccionadas
- Campos organizados: En un grid de 2 columnas para mejor legibilidad
- Estilo consistente: Labels en rosa, inputs limpios, y botón de guardado azul
El formulario mantiene la funcionalidad completa y ahora tiene el estilo limpio y minimalista que mostraste en la imagen de referencia.
