Dívidas Index Page UI Blueprint

Design Goal

The Dívidas page should feel native to Lifehub's existing finance module:

dark-first
high information density without looking crowded
rounded cards with subtle borders
action-first header
KPI row followed by actionable lists

The page should sit visually between Despesas and Investimentos.

Add Dívidas to the finance sidebar and dropdown menu.

Recommended order:

Painel Financeiro
Contas
Despesas
Dívidas
Investimentos
Análises
Simulador
Planejamento

Rationale:

Contas shows where money is
Despesas shows what money is being consumed by
Dívidas shows what money is obligated to
Investimentos shows what money is building toward

Page Structure

Header
KPI Cards Row
Upcoming Payments Panel
Main Debts Table
Bottom Analytics Cards

Left Side

title: Dívidas
subtitle: X dívidas registradas

Right Side

primary CTA: Nova Dívida

Optional later action:

filter pill group: Todas, Pessoais, Família, Atrasadas

Tone

This page should feel urgent but controlled. It is not red everywhere. Red should be reserved for actual risk or overdue states. Primary actions can use blue, keeping consistency with other finance pages.

KPI Cards Row

Use a 4-card responsive row similar to other finance pages.

Card 1: Total em Dívidas

value: total active debt balance
supporting text: passivo atual
accent color: red/orange only if debt load is severe, otherwise neutral with red detail

Card 2: Pagamento Mínimo Mensal

value: sum of minimum payments
supporting text: obrigação recorrente
accent color: amber

Card 3: Vencendo em 7 Dias

value: amount due soon
supporting text: N contas próximas
accent color: orange

Card 4: Juros Estimados do Mês

value: estimated monthly interest burden
supporting text: custo do endividamento
accent color: red

Upcoming Payments Panel

This should be the first actionable block after the KPIs.

Layout

full-width card
list of upcoming obligations in the next 30 days
each row compact and readable

Row Content

debt name
lender or type subtitle
due date chip
amount chip
owner badge
status chip

Status Styles

Atrasada: red background tint
Hoje: orange tint
Nesta semana: amber tint
Próxima: neutral/blue tint

Empty State

If there are no upcoming debts:

icon: calendar/check style
text: Nenhum vencimento próximo
supportive line: Suas dívidas ativas não possuem cobrança nos próximos 30 dias.

Main Debts Table

Use a card-wrapped table like other finance pages, but optimize for liability-specific scanning.

Columns

Dívida
Tipo
Saldo Atual
Pagamento Mínimo
Juros
Próximo Vencimento
Parcelas
Status
Ações

Row Design

Debt cell

main line: debt name
sub line: lender name or ownership hint
optional ownership badge: Pessoal or Família

Type cell

colored chip using type mapping

Suggested type colors:

credit card: amber
personal loan: blue
mortgage: emerald
vehicle financing: violet
installment plan: orange
tax debt: red
family loan: cyan
other: gray

Balance cell

strong number formatting
optional progress hint below: % quitado

Interest cell

formatted as 1,99% a.m. or 18,90% a.a.
if high-cost, add subtle warning chip

Due cell

exact date or dia 10
if overdue, show red caption

Installments cell

show 3/12 when applicable
show -- for non-installment debt

Status cell

Ativa
Quitada
Atrasada
Renegociada
Pausada

Actions cell

Ver
Editar
compact kebab or icon button if needed

Bottom Analytics Cards

The bottom of the page should contain two smaller analytics cards.

Card A: Por Tipo

grouped totals by debt type
compact legend list
optional simple bars instead of pie chart

Why bars instead of pie:

more readable in dense financial interfaces
easier to compare categories precisely

Card B: Evolução das Dívidas

last 6 months
simple bar or area chart
highlight current month in a stronger accent

If historical data is not yet available in MVP, this card may initially use:

current active balances snapshot by created month
or be replaced with a Resumo de risco card until history exists

Suggested Visual Tokens

Align with existing finance pages:

card background: bg-white dark:bg-[#161b22]
border: border-gray-200/60 dark:border-white/[0.06]
title text: text-gray-900 dark:text-white
body text: text-gray-500 dark:text-gray-400
rounded containers: rounded-2xl

Avoid making the full page red. Use red as a semantic warning color, not as the whole visual theme.

Empty State Blueprint

When there are no debts yet, show a strong empty state card.

Content

icon: 💳 or 📉
title: Nenhuma dívida registrada
body: Cadastre empréstimos, parcelamentos, financiamentos ou valores em aberto para acompanhar vencimentos e quitação.
CTA: Nova Dívida

Secondary guidance

Small examples below the CTA:

Cartão de crédito
Empréstimo pessoal
Financiamento de veículo
Parcelamento

Mobile Behavior

The page must remain useful on narrow screens.

Mobile adjustments

KPI cards become 2 columns
upcoming payments remain stacked cards
debts table collapses into card rows
primary CTA stays visible at top
avoid horizontal scroll as the primary mobile pattern

Mobile debt card contents

Each card should show:

name and lender
current balance
minimum payment
due date
status chip
Ver action

Tone And Messaging

Page copy should communicate clarity, not shame.

Good tone:

objective
organized
financially serious

Avoid tone like:

panic-heavy
guilt-driven
overly optimistic marketing language

Suggested Copy Snippets

Header subtitle

Acompanhe seus passivos, vencimentos e progresso de quitação.

KPI helper text

passivo atual
obrigação mensal
vence em breve
custo mensal estimado

Upcoming panel subtitle

Pagamentos previstos para os próximos 30 dias

Table helper text

Dívidas ativas e histórico de liquidação

Future UI Extensions

These are intentionally outside the MVP but the layout should leave room for them.

snowball versus avalanche comparison banner
refinancing suggestions panel
credit utilization card
debt-free forecast widget
notification preferences for due reminders