I'll recreate this financial dashboard UI as accurately as possible using Next.js and Tailwind CSS.

This implementation recreates the Abbaco financial dashboard UI with:

1. A sidebar navigation with all the menu items shown in the design
2. The header with Abbaco logo, notification bell, help icon, and user avatar
3. The bond information section with tabs (General, Condiciones de Emisión, etc.)

4. Three main panels:

   • Left panel: "CALCULADORA DE SIMULACIÓN" with all input fields
   • Middle panel: "RESULTADO DE INVERSIÓN" showing financial metrics
   • Right panel: "AL30 - Cashflow en USD" with the payment table

I've used the design tokens from the Figma context to match the colors as closely as possible, particularly:

• Primary blue: #0d5aa2 for buttons and active elements
• Light blue background: #e9f3fc for selected items and button backgrounds
• Text colors: #343a40 for headings, #6c757d for secondary text
• Background color: #f6f7f8 for the page background
• White: #ffffff for card backgrounds

The layout is fully responsive and follows the exact structure of the original design.

I'll add a "Simular y Guardar" button next to the existing "Simular" button in the calculator panel.

I've added a "Simular y Guardar" button next to the existing "Simular" button at the bottom of the calculator panel. The new button has:

• A white background with blue text
• A blue border
• A light blue hover effect
• Equal width to the "Simular" button (using flex-1)

Both buttons are now placed in a flex container with a small gap between them, maintaining the overall layout while adding the requested functionality.