FactuGES_ERP/modules/customers/src/web/components/form-debug.tsx

import { UseFormReturn } from "react-hook-form";

export const FormDebug = ({ form }: { form: UseFormReturn }) => {
  const {
    watch,
    formState: { isDirty, dirtyFields, defaultValues },
  } = form;

  const currentValues = watch();

  return (
    <div className='p-4 border rounded bg-red-50 mb-6'>
      <p>
        <strong>¿Formulario modificado?</strong> {isDirty ? "Sí" : "No"}
      </p>
      <div className='mt-2'>
        <strong>Campos modificados:</strong>
        {Object.keys(dirtyFields).length > 0 ? (
          <ul className='list-disc list-inside mt-1'>
            {Object.keys(dirtyFields).map((campo) => (
              <li key={campo}>
                <span className='font-medium'>{campo}:</span>{" "}
                <span className='text-gray-500 line-through'>{String(defaultValues![campo])}</span>{" "}
                ➝ <span className='text-green-600'>{String(currentValues[campo])}</span>
              </li>
            ))}
          </ul>
        ) : (
          <p>Ninguno</p>
        )}
      </div>
    </div>
  );
};