Tenho essa plataforma (1 imagem, em branco) eu queria fazer uma tela de cobranças agora, essa tela se resume em gerar cobranças e ver cobranças recentes. Porém estou sem idéia de layout, achei esse segundo (branco e verde) e gostei. Poderia adaptar o layout para ver se fica bom no primeiro modelo?
também enviei a versão darkmode da minha plataforma. Ela é a payshark.
Na payshark, também não teremos a parte ao lado "ações rapidas", não temos essas funções, então o ideal seria substituir a modal por alguma outra coisa, como um sumario ou até mesmo um gráfico de cobrança.
Eu estava pensando em algo diferencial: A tela de cobranças o objetivo é listar as cobranças, gerar uma cobrança poderia ser um botão dentro dessa listagem, que ao clicar, iria modificar a tela (expandir uma nova caixa) empurrando a listagem para baixo, e surgindo o painel de gerar cobranças. E ter um botão de recolher , para que, ao clicar, voltasse para dentro do botão e a listagem voltasse a ser o foco.
O ideal é uma tela que siga exatamente o layout já existente da payshark, criando algo novo para cobranças mas seguindo seu estilo
não cometa erros
Vou analisar as imagens:
- PayShark Light Mode - Dashboard com sidebar à esquerda, cards de estatísticas no topo, gráfico de vendas diárias, métodos de pagamento e transações recentes
- PayShark Dark Mode - Mesmo layout em tema escuro
- Elix (Referência) - Tela de cobrança Pix com input grande de valor, botão verde "Continuar", lista de cobranças recentes e painel lateral de ações rápidas
Vou criar a tela de cobranças seguindo exatamente o estilo da PayShark, com o painel expansível de gerar cobrança que você descreveu. Primeiro, deixe-me verificar a estrutura atual do projeto.
Agora vou ler os componentes UI que vou usar e criar a tela de cobranças seguindo o estilo PayShark.
Agora vou atualizar o globals.css com as cores da PayShark e criar a página de cobranças completa.
Agora vou criar os componentes da tela de cobranças:
Agora vou criar a página principal:
Agora preciso verificar se o dropdown-menu está disponível:
Agora preciso adicionar as variáveis de cor customizadas ao tema inline do CSS:
O CSS está correto. Deixe-me verificar se há erros e fazer alguns ajustes finais na lista de cobranças para garantir que os estilos funcionem corretamente:
Vou atualizar a charge-list para usar cores inline já que as variáveis customizadas de success/warning podem não estar no Tailwind config:
Agora vou corrigir também o charge-summary:
Pronto! Criei a tela de cobranças completa para a PayShark. A implementação inclui:
- Sidebar - Réplica fiel da PayShark com logo, navegação categorizada (Produtos, Gestão, Outros) e toggle de tema light/dark
- Header - Com saudação, busca, notificações e avatar do usuário
- Cards de Resumo - 4 cards com Total em Cobranças, Cobranças Pagas, Pendentes e Expiradas, cada um com mini gráficos de linha
Painel Expansível de Gerar Cobrança - O diferencial que você pediu: um botão "Gerar Nova Cobrança" que ao clicar, expande suavemente um card completo com:
- Input grande de valor formatado em R$
- Seleção de método de pagamento (PIX, Boleto, Cartão)
- Campo de descrição
- Botão de recolher para voltar ao estado inicial
- Gráfico de Cobranças por Dia - Substituindo o "Ações Rápidas" que você não queria
- Lista de Cobranças - Com filtros de status e busca, badges coloridos por status (Pago=verde, Pendente=amarelo, Expirado=vermelho, Cancelado=cinza), e menu de ações em hover
O tema alterna entre light e dark seguindo exatamente as cores da PayShark.