Criação de Página para Controle de Devolução de Multa por Cancelamento
Instruções de Design e Funcionalidade:
Página Inicial: Título da Página: Controle de Devolução de Multa por Cancelamento
Opções Principais:
Exibir dois botões centrais no início da página: Inserir Devolução Inserir Multa por Cancelamento Processo e Páginas para "Inserir Devolução": Título da Página: Controle de Devolução/Reembolso
Filtros no Topo da Página:
Campo para Matrícula do Cliente (input de texto). Campo para Vencimento (seletor de data). Campo para Data de Pagamento (seletor de data). Botão Buscar para aplicar os filtros. Grid de Exibição:
Colunas: Título (nome do título pago pelo cliente). Data do Pagamento. Valor Pago. Status da Devolução (Exibir texto "Devolvido" em vermelho quando devolvido). Cada linha deve ter um botão Devolver (habilitado apenas para títulos não devolvidos). Botão "Devolver":
Ao clicar, abrir um modal ou nova tela com: Campo para inserir o Valor a Devolver (input numérico). Campo para Data Prevista para Devolução (seletor de data). Botão Confirmar Devolução. Status "Devolvido":
Quando um título estiver com status "Devolvido", o botão Devolver deve ser substituído por um botão Detalhes da Devolução. Botão "Detalhes da Devolução":
Ao clicar, abrir um modal ou nova tela com: Mostrar os detalhes da devolução: Valor devolvido. Data prevista para devolução. Data efetiva da devolução. Botão Remover Devolução (com confirmação antes de executar). Processo e Páginas para "Inserir Multa por Cancelamento": Título da Página: Controle de Multa por Cancelamento
Filtros no Topo da Página:
Campo para Matrícula do Cliente (input de texto). Campo para Vencimento (seletor de data). Botão Buscar para aplicar os filtros. Grid de Exibição:
Colunas: Título (nome do título em aberto do cliente). Valor em Aberto. Data de Vencimento. Botão "Cancelar e Aplicar Multa":
Para cada linha no grid, exibir o botão Cancelar e Aplicar Multa. Ao clicar, abrir um modal ou nova tela com: Campo para inserir o Valor da Multa (input numérico). Texto fixo explicativo: "Todos os títulos em aberto serão cancelados e um novo faturamento será gerado no valor da multa informada." Botão Confirmar Multa. Estilo Visual: Fundo: Tons de azul (limpo, profissional e suave). Design: Minimalista e responsivo. Botões arredondados com efeitos de hover (mudança de cor ou leve sombreamento). Grid com linhas alternadas em tons suaves de azul claro para melhor visualização. Fontes modernas e legíveis. Layout Geral: Página Inicial:
Título no topo da página centralizado. Exibição dos botões Inserir Devolução e Inserir Multa por Cancelamento centralizados. Demais Páginas:
O cabeçalho terá o título da página centralizado. Filtros alinhados horizontalmente abaixo do cabeçalho. Grid ocupando o restante da tela. Modal ou novas telas devem seguir o mesmo estilo de cores e design.
I'll create a React project that implements the design and functionality you've described for the "Controle de Devolução de Multa por Cancelamento" system. I'll use Next.js with the App Router, Tailwind CSS for styling, and shadcn/ui components for a clean, modern look.
Let's start by creating the main components and pages:
This implementation creates a responsive and modern-looking application for managing refunds and cancellation fees. The main features include:
The design uses a blue color scheme with a gradient background on the home page and a light blue background on other pages. The layout is responsive and uses modern, rounded buttons with hover effects.
To further improve the application, you might want to:
Let me know if you want any changes or additions to this implementation!