Claro que sí. Basado en todas nuestras conversaciones y el detallado análisis de las imágenes y la lógica, he construido un prompt final, versión 4.0.

Este prompt está diseñado para ser lo más detallado, eficiente y directo posible. Su estructura está optimizada para guiar a una IA de desarrollo como la de Vercel, dividiendo el trabajo en componentes lógicos y especificando estados y props para asegurar un resultado coherente y funcional.

Recomendación: Copia y pega el siguiente bloque de código completo en la herramienta de IA de Vercel.

Prompt Final y Detallado para Generador de UI (Vercel)

Rol y Objetivo del Proyecto

Eres un desarrollador Frontend experto en Next.js, TypeScript y Tailwind CSS. Tu objetivo es generar el código completo para el frontend de una aplicación web de cálculo de proformas agropecuarias. La aplicación debe ser modular, reactiva y fiel a las especificaciones detalladas a continuación.

Tecnologías y Estilos Globales

Stack: Next.js 14+ con App Router.

Lenguaje: TypeScript.

Estilos: Tailwind CSS.

Fuente: Inter de Google Fonts.

Paleta de Colores:

Header/Fondos Sutiles: bg-[#f9faec]

Acento (Botones, Iconos, Links, Bordes activos): bg-[#009974], text-[#009974], border-[#009974]

Texto Principal: text-gray-800

Fondo Principal: bg-white o bg-gray-50

Estructura de Componentes y Páginas

Genera el código para los siguientes archivos, asegurando que sean modulares y reutilizables.

1. Layout Principal (app/layout.tsx y components/Header.tsx)

components/Header.tsx:

Un header fijo con fondo #f9faec.

A la izquierda, un logo en texto: h2 con el texto "Proforma SISA" en color de acento (#009974) y font-bold.

En el centro, links de navegación para "Calculadora" (/) y "Historial" (/historial). Usa el componente <Link> de Next.js.

A la derecha, un botón "Cerrar Sesión".

app/layout.tsx:

Importa y renderiza el componente Header encima de {children} para que sea persistente en todas las páginas.

2. Página de la Calculadora (app/page.tsx)

Esta es la página principal (/). Debe gestionar el estado general de la proforma y renderizar los componentes hijos.

// app/page.tsx 'use client'; import { useState } from 'react'; // Importa los componentes que crearás a continuación

export default function CalculatorPage() { // Define aquí todos los estados para los inputs, outputs y opciones // Ejemplo: const [proformaData, setProformaData] = useState({ /* ... todos los campos ... */ }); const [isReverseCalc, setIsReverseCalc] = useState(false); // Para el checkbox "Valor Final" const [isModalOpen, setIsModalOpen] = useState(false);

const handleReset = () => { /* ... Lógica para limpiar el estado ... */ };

return ( <main className="p-8"> <div className="flex justify-between items-center mb-4"> <h1 className="text-3xl font-bold text-gray-800">Calculadora de Proforma</h1> <button onClick={handleReset} title="Limpiar Formulario"> {/* Ícono de Papelera/Basura de una librería como heroicons */} </button> </div>

  {/* 1. Componente de Búsqueda de Productor */}
  <ProductorSearch />

  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
    {/* 2. Componente del Formulario de Cálculo */}
    <CalculatorForm 
      data={proformaData} 
      setData={setProformaData}
      isReverseCalc={isReverseCalc}
      setIsReverseCalc={setIsReverseCalc}
    />

    {/* 3. Componente de Visualización de Resultados */}
    <ResultsDisplay 
      data={proformaData}
      isReverseCalc={isReverseCalc}
    />
  </div>

  <div className="mt-8 text-center">
    <button onClick={() => setIsModalOpen(true)} className="bg-[#009974] text-white px-8 py-3 rounded-lg font-bold">
      Ver Resumen
    </button>
  </div>

  {/* 4. Componente Modal de Resumen */}
  <ResumenProformaModal 
    isOpen={isModalOpen} 
    onClose={() => setIsModalOpen(false)}
    data={proformaData}
  />
</main>

); }

3. Componentes de la Calculadora

components/ProductorSearch.tsx:

Contiene un botón "Cargar Padrón SISA".

A su derecha, un input de texto deshabilitado que se habilita después de hacer clic en el botón, con el placeholder "Buscar productor por Razón Social o CUIT...".

Debe mostrar los resultados de la búsqueda (simulados por ahora) y al seleccionar uno, mostrar un div con la Razón Social y un campo de solo lectura "Estado: [Nro]".

components/CalculatorForm.tsx:

Recibe data, setData, isReverseCalc, setIsReverseCalc como props.

Renderiza todos los campos de entrada y opciones.

Lógica de UI Condicional:

Checkbox Pric. U$D:

Si se marca, oculta el input "Pizarra" y muestra dos inputs: "Price (U$D)" y "TC".

Checkbox Valor Final: Su estado es controlado por el prop isReverseCalc.

Inputs con Decimales Específicos:

Pizarra: 1 decimal

Toneladas: 2 decimales

Comisión: 2 decimales

Flete: 1 decimal

Paritaria y Secada: 1 decimal

% Liquidación: 2 decimales, con validación para no superar 100.

Sección de Opciones:

Radio buttons para "Estado" (1, 2, 3, 4), visible solo si no hay un productor seleccionado.

Radio buttons para "Tipo de Operación" (COMUN/CANJE).

Checkboxes para "Cj. Gastos", "IVA CBU", "Flete Líquido".

components/ResultsDisplay.tsx:

Recibe data y isReverseCalc como props.

Muestra todos los campos de resultados (Neto, IVA, Ret. IVA, etc.) como texto de solo lectura.

Campo $ TOTAL:

Si isReverseCalc es false, es un h2 grande y en negrita (solo lectura).

Si isReverseCalc es true, es un input de tipo number estilizado para destacar, donde el usuario ingresa el valor final deseado.

components/ResumenProformaModal.tsx:

Recibe isOpen, onClose, y data como props.

Debe ser un modal que cubra la vista.

Layout: Un diseño limpio y formal, como se ve en la imagen de resumen. Incluir un

div en el encabezado para un futuro logo.

Contenido Editable:

Input de texto para "Grano".

Input de texto para "Campaña".

Contenido de Solo Lectura: Renderiza todos los datos de la proforma de forma estructurada (Cliente, Gastos, Impuestos, Total).

Botones de Acción en el pie del modal:

"Guardar Proforma": Simula una llamada a API y al tener éxito, muestra una notificación "toast" (ej. con react-hot-toast) con el mensaje "Registro guardado correctamente" sin cerrar el modal.

"Generar PDF": Botón estilizado.

"Volver a Edición": Ejecuta la función onClose.

4. Página de Historial (app/historial/page.tsx)

Funcionalidad: Muestra una tabla con las proformas guardadas.

Layout: Título <h1>Historial</h1> y una tabla responsive.

Tabla:

Columnas: "Fecha", "Cliente", "Tipo", "Total Liquidado", "Acciones".

Botón en "Acciones": Un botón "Cargar para Editar".

Lógica del Botón: Al hacer clic, debe usar next/navigation (useRouter) para navegar al usuario a la página / y pasar los datos del registro seleccionado (ej. a través de query params o un gestor de estado como Zustand/Redux) para poblar el formulario de la calculadora.

5. Página de Login (app/login/page.tsx)

Un formulario simple y centrado con campos para "Email", "Contraseña" y un botón "Ingresar".