🚀 [CONTRIBUIÇÃO] Recibo Moderno MK-Auth: Design Moderno com download em PDF, JPG e envio por WhatsApp.

Olá, pessoal do fórum!

Gostaria de fazer a minha primeira contribuição oficial com a comunidade do MK-Auth. Já colhi muitas informações e soluções valiosas por aqui e acho mais do que justo retribuir essa ajuda com algo que tenho certeza que vai servir para alguém.

Vou partilhar com vocês uma personalização completa que fiz para o formato de recibo do MK-Auth. O objetivo foi criar um visual limpo e moderno com informações básicas de um recibo.

Antes de mais nada, um detalhe importante, não sou desenvolvedor, não sou programador e mesmo sem saber escrever uma única linha de código, mas com ajuda da IA que dei o nome de Giovanny, desenvolvi um script para o MK-Auth para emitir comprovante de pagamento!

Sei que já existem muito por aí bem elaborado e rodando liso seja dentro do MK-Auth ou em Addon, mas tive a ideia e coloquei em pratica.

Sei também que o MK-Auth tem o seu modelo de recibo nativo e foi baseado nele, usando as variáveis dele que consegui criar um script para o MK-Auth, um modelo customizado de página (com script injetado) então não é algo novo é apenas personalizado!

O modelo padrão do MK-Auth cumpre perfeitamente o seu papel e atende muito bem o sistema há anos. A proposta aqui é apenas oferecer uma opção com uma linha de design diferente, mais voltada para um estilo mais moderno que muitos clientes e centrais de atendimento modernos utilizam hoje em dia. Nosso objetivo foi dar uma nova roupagem sem alterar os arquivos nativos do sistema.

Veja abaixo como ficou o resultado final do layout aplicado no sistema, trazendo uma roupagem diferente e limpa para o comprovante:primeira página

segunda pagina

terceira pagina

🛠️ O que esse modelo traz de novo?

Painel de Ações Compacto e Moderno: Adicionamos botões sutis alinhados no topo que otimizam o trabalho do operador e facilitam o clique rápido:
Disparo para WhatsApp: Ao clicar no botão verde, o sistema gera o texto do comprovante todo organizado (com negritos e tópicos) e abre o aplicativo para envio rápido.
Geração de PDF e JPG Nativa: Permite salvar o comprovante nos dois formatos direto pelo navegador do operador.
Nomenclatura Automatizada (Perfeccionista): O script captura automaticamente o nome do cliente e a data do pagamento direto na tela e renomeia o arquivo antes de baixar. Veja na imagem abaixo a como fica.
Parte 1: Como Instalar no seu MK-Auth (Passo a Passo)
A instalação é extremamente simples e não altera nenhuma função nativa do seu sistema. Ela é feita diretamente pela interface web do MK-Auth:
Baixe o código aqui:
🚀 CLIQUE AQUI PARA BAIXAR O CÓDIGO NO GitHub
Acesse o seu painel do MK-Auth como administrador.
No menu, OPÇÕES, navegue até documentos do sistema e na área de gerenciamento de layouts/recibos.
Localize o campo destinado ao código do Recibo de Títulos
Apague o conteúdo antigo (recomendo salvar um backup do seu código atual em um bloco de notas, por segurança).
Cole todo o código baixado.
Clique em Salvar e pronto! O novo layout já estará ativo.

⚠️ AVISO IMPORTANTE (Backup e Responsabilidade)

Faça Backup Antes de Mexer: Antes de colar qualquer código ou alterar o layout atual do seu sistema, faça um backup completo do seu código original e guarde em um Bloco de Notas. Se algo não sair como o esperado, você restaura o recibo antigo em segundos.
Isenção de Responsabilidade: Este script foi exaustivamente testado em nosso cenário e funciona perfeitamente, mas está sendo disponibilizado "como está", de forma gratuita e colaborativa. Nós não nos responsabilizamos pelo uso incorreto do script, edições malfeitas no código ou por possíveis instabilidades no seu sistema. A aplicação e a customização são de inteira responsabilidade de quem as executa.

🎨 Parte 2: Como Customizar com os Dados da sua Empresa

Para deixar o recibo com a identidade visual da sua empresa, você só precisa alterar 3 pontos bem simples dentro do código usando o comando Ctrl + F para localizar os seguintes trechos:

1. Alterar a Logomarca

Procure pela linha que contém a tag da imagem da logo:

html

O que fazer: Substitua o caminho /mkfiles/logo.jpg pelo link ou diretório onde a logomarca do seu provedor está salva no seu servidor MK-Auth para que ela apareça centralizada no topo do recibo.

2. Mudar o Nome Fixo no Arquivo Baixado

Para que o arquivo seja baixado com o nome do seu provedor antes do nome do cliente, procure pela função obterNomeArquivo() quase no final do código:

JavaScript

return `Recibo_WFS_Net_${nomeCliente}_${dataPag}`;

O que fazer: Altere o trecho Recibo_WFS_Net para o nome do seu provedor (use sublinhados _ se preferir separar as palavras).

3. Ajustar o Nome do Serviço Fixo (Se necessário)

Na tabela de detalhes, deixamos um campo estático escrito "Internet Banda Larga":

HTML

<span style="color: #9ca3af; font-size: 9px; display: block; text-transform: uppercase; font-weight: 500;">Serviço</span><span style="color: #1f2937; font-weight: 600;">Internet Banda Larga</span>

O que fazer: Se quiser deixar um termo mais genérico para abranger planos de TV ou Telefonia, basta alterar o texto para "Telecomunicações".

Espero que essa contribuição ajude a modernizar os comprovantes de pagamentos de muitos provedores por aí pequeno como o meu que ainda não tem estrutura suficiente par pagar sistemas de gerenciamento completos onde já venham todas essas opções!

Um abraço a todos!

OBS: não coloquei o código direto aqui porque não sei se é permitido, se for e alguém quiser aqui posso colocar!

Forum