Data - Copy this React, Tailwind Component to your project
Crie-um-WebApp-em-React-(sem-TypeScript)-utilizando-Tailwind-CSS-e-ShadCN-UI-para-gerenciar-carnês-de-pagamento.-O-objetivo-do-sistema-é-permitir-que-os-usuários-registrem-dívidas,-acompanhem-parcelas-pendentes-e-gerem-documentos-mensais-detalhados-para-compartilhar-com-credores.-As-principais-funcionalidades-devem-incluir:-1.-Cadastro-de-dívidas-com-os-campos:-Nome-do-credor,-Valor-total,-Quantidade-de-parcelas-e-Valor-por-parcela-(calculado-automaticamente).-2.-Controle-de-status-das-parcelas-(pago/em-aberto)-com-atualização-manual.-3.-Geração-de-documentos-mensais-detalhados-(PDF-ou-link-compartilhável)-contendo-Nome-do-credor,-Valor-total,-Parcelas-pagas-e-Saldo-restante.-**Requisitos-técnicos:**---Estilização-com-Tailwind-CSS-para-design-responsivo.---Utilizar-ShadCN-UI-para-estruturação-dos-componentes.---Implementar-ícones-com-Lucide-React.---Configurar-`next.config.js`-para-suportar-imagens-remotas-de-**Picsum.photos**.-**Estrutura-de-navegação:**-1.-Cabeçalho-com:-Logotipo,-Perfil-do-usuário-e-Botão-"Adicionar-Dívida".-2.-Barra-lateral-com:-Dashboard-(ícone-de-casa),-Dívidas-(ícone-de-lista),-Documentos-(ícone-de-documento).-3.-Layout-principal-dividido-em-duas-colunas:---Coluna-esquerda-(~30%):-Resumo-de-valores-(Total-de-dívidas,-Parcelas-pendentes).---Coluna-direita-(~70%):-Listagem-detalhada-das-dívidas.-**Componentes-essenciais:**-1.-**Formulário-de-dívidas**:-Adicionar/editar-com-validação-de-dados-e-cálculo-automático-do-valor-por-parcela.-2.-**Cartões-de-dívida**:-Exibir-Nome-do-credor,-Valor-total,-Parcelas-restantes-e-Status-visual-(pago/em-aberto).-3.-**Listagem-de-documentos**:-Página-para-listar-e-compartilhar-documentos-gerados.-4.-**Modal-interativo**:-Para-adicionar/editar-informações-rapidamente.-**Rotas-principais:**-1.-`/`:-Dashboard-com-resumo-das-dívidas-e-status-geral.-2.-`/dividas`:-Página-de-cadastro-e-edição-de-dívidas.-3.-`/documentos`:-Listagem-e-geração-de-documentos.-**Estilo-visual:**---Azul-primário:-#0066FF.---Cinza-secundário:-#F5F5F5.---Verde-de-sucesso:-#00C853.---Vermelho-para-alerta:-#FF5252.-**Configuração-inicial:**-1.-Criar-o-projeto-com-Bolt.New:-`npx-create-next-app@latest-nome-do-projeto---use-npm---js`.-2.-Instalar-Tailwind-CSS:-`npm-install--D-tailwindcss-postcss-autoprefixer-&&-npx-tailwindcss-init`.-3.-Configurar-ShadCN-UI:-`npx-shadcn-ui-init`.-4.-Configurar-imagens-remotas-em-`next.config.js`-para-**Picsum.photos`.-Crie-uma-interface-intuitiva-e-responsiva-com-foco-na-simplicidade-e-usabilidade.-Todos-os-componentes-devem-ser-organizados-em-pastas-claras-e-reaproveitáveis.
