Design and build the main customer dashboard (v0) for the Debitia debt management portal using Next.js App Router, Tailwind CSS, and TypeScript. Linear.app style (minimalistic, clean)
This screen should include:
A top summary section with 3 cards showing:
Saldo Vencido (red)
Saldo Vigente (yellow)
Saldo Total (gray/neutral)
A "Documentos Pendientes" section:
Table layout with: Checkbox, Fecha, Nº Documento, Monto, Vencimiento, Estado
Allow selecting multiple documents
Show action bar if one or more are selected, with buttons: “Pagar”, “Informar Pago”
A "Últimos Pagos (3 meses)" section:
Table or list layout showing: Fecha, Documento, Monto, Método, Banco, Estado
A "Información del Cliente" box with:
Nombre, Nº Cliente, Clasificación, Método de Pago, Forma de Pago, Banco de Pago
A section for acciones generales, below the info box:
Buttons: “Informar Pago”, “Hacer Aclaración” (full width on mobile)
UX guidelines:
Prioritize clarity and mobile responsiveness
Sticky footer CTA on mobile: “Pagar documentos seleccionados”
Avoid clutter. Use collapsible sections if needed.
Keep customer name and ID visible at all times
I'll create a clean, minimalistic customer dashboard for the Debitia debt management portal with a Linear.app inspired design. This will include all the requested sections with proper mobile responsiveness and selection functionality.
I've created a comprehensive customer dashboard for the Debitia debt management portal with a clean, Linear.app-inspired design. Here are the key features implemented:
Top Summary Cards: Three balance cards showing overdue (red), current (yellow), and total (gray) amounts with appropriate color coding and icons.
Pending Documents Section:
Recent Payments Section:
Customer Information Sidebar:
General Actions:
The design follows Linear.app's minimalistic approach with: