add contribute info

README.md

@@ -1,6 +1,7 @@
 # Evolution Manager - README
 
 ## Introduction
+
 Evolution Manager is an open-source management tool for the Evolution API, designed to streamline the administration and monitoring of instances. It can be accessed online at [Evolution Manager](https://github.com/gabrielpastori1/evolution-manager).
 
 ---
@@ -9,57 +10,72 @@ Evolution Manager is an open-source management tool for the Evolution API, desig
 
 Se você é um desenvolvedor ou usuário brasileiro interessado no Evolution Manager, temos boas notícias! Agora você pode acessar a documentação completa do projeto em português. Isso facilitará seu entendimento e uso desta ferramenta incrível. Clique no link abaixo para ler o README em português:
 
-🔗 [Leia o README em Português](README.pt_BR.md)
+🔗 [Leia o README em Português](https://github.com/gabrielpastori1/evolution-manager/blob/main/README.pt_BR.md)
 
 ---
 
-
 ## Features
+
 - **Instance Management**: Create, manage, and delete instances.
 - **Instance Settings**: Customize behavior settings (e.g., disabling calls, always-online mode), webhook integration, RabbitMQ, WebSocket, Chatwoot, and Typebot configurations.
 - **User Utilities**: Check user numbers, search for conversations, and find groups.
 
 ## Limitations
+
 - The version hosted on Vercel requires the server to have an SSL certificate.
 
 ## Technology
+
 - The project is built using Vue.js v3 and Vuetify.
 
 ## Development Setup
+
 1. **Prerequisites**: Ensure you have `yarn` installed on your system.
 2. **Clone the Repository**:
+
    ```bash
    git clone https://github.com/gabrielpastori1/evolution-manager.git
    cd evolution-manager
    ```
+
 3. **Install Dependencies**:
+
    ```bash
    yarn install
    ```
+
 4. **Run Development Server**:
+
    ```bash
    yarn dev
    ```
+
    This will start a local development server. You can access the app at `localhost:8080`.
 
 ## Building the Project
+
 To build the project for production, run:
+
 ```bash
 yarn build
 ```
+
 This will create a `dist` folder with the compiled assets.
 
 ## Self-Hosted - Evolution Manager CLI and PM2
+
 ### Straight to the Point: Quick Setup with PM2
 
 To quickly install Evolution Manager globally and set it up with PM2, follow these commands:
 
 1. **Install Evolution Manager Globally**:
+
    ```bash
    npm install -g evolution-manager
    ```
 
 2. **Set Up PM2 for Evolution Manager**:
+
    ```bash
    evolution-manager pm2 setup
    ```
@@ -70,10 +86,10 @@ These two steps will install the Evolution Manager CLI globally on your system a
 
 These two steps will install the Evolution Manager CLI globally on your system and configure it to run with PM2, a powerful process manager.
 
-
 1. **Install Evolution Manager Globally**:
    - Ensure Node.js and NPM are installed on your system.
    - Install Evolution Manager globally using NPM to access the CLI (Command Line Interface):
+
      ```bash
      npm install -g evolution-manager
      ```
@@ -94,14 +110,31 @@ These two steps will install the Evolution Manager CLI globally on your system a
 
 3. **Running the Project with PM2**:
    - To set up and manage the service with PM2, start with the setup command:
+
      ```bash
      evolution-manager pm2 setup
      ```
+
    - Then, you can start, stop, restart, or delete the service using the respective `pm2` commands in the CLI.
 
 These instructions provide a streamlined method for managing Evolution Manager across various systems, utilizing PM2 for efficient service start-up, maintenance, and control.
+
 ## Contributing
-Contributions are welcome! Please read our contributing guidelines to get started.
+
+Contributions are an essential part of the Evolution Manager project. Whether you're contributing code, suggestions, or feedback, your input is invaluable. To facilitate contributions, we have included a direct means for donations:
+
+### Making a Donation
+
+If you wish to support the project financially, we have provided a QR code for Pix donations. Simply scan the QR code below with your Pix app to make a contribution. Your generosity helps in maintaining and evolving this open-source tool.
+
+![Pix Donation QR Code](https://github.com/gabrielpastori1/evolution-manager/blob/main/src/assets/pix.svg)
+
+### Contributing Code or Ideas
+
+We also welcome code contributions and innovative ideas. If you're interested in contributing in this way, please read our contributing guidelines for more information on how to get started.
+
+Your support, in any form, makes a significant difference and is greatly appreciated. Thank you for being a part of the Evolution Manager community!
 
 ## License
+
 This project is open-source and available under the [MIT License](LICENSE.md).

README.pt_BR.md

@@ -1,54 +1,71 @@
 # Evolution Manager - README
 
 ## Introdução
+
 O Evolution Manager é uma ferramenta de gerenciamento open-source para a Evolution API, projetada para facilitar a administração e monitoramento de instâncias. Pode ser acessada online em [Evolution Manager](https://github.com/gabrielpastori1/evolution-manager).
 
 ## Funcionalidades
+
 - **Gerenciamento de Instâncias**: Criação, gerenciamento e exclusão de instâncias.
 - **Configurações de Instância**: Personalização das configurações de comportamento (por exemplo, desativar chamadas, modo sempre online), integração com webhook, RabbitMQ, WebSocket, Chatwoot e configurações do Typebot.
 - **Utilitários para Usuários**: Verificação de números de usuários, busca por conversas e grupos.
 
 ## Limitações
+
 - A versão hospedada na Vercel requer que o servidor tenha um certificado SSL.
 
 ## Tecnologia
+
 - O projeto é desenvolvido usando Vue.js v3 e Vuetify.
 
 ## Configuração para Desenvolvimento
+
 1. **Pré-requisitos**: Certifique-se de ter o `yarn` instalado no seu sistema.
 2. **Clonar o Repositório**:
+
    ```bash
    git clone https://github.com/gabrielpastori1/evolution-manager.git
    cd evolution-manager
    ```
+
 3. **Instalar Dependências**:
+
    ```bash
    yarn install
    ```
+
 4. **Executar o Servidor de Desenvolvimento**:
+
    ```bash
    yarn dev
    ```
+
    Isso iniciará um servidor de desenvolvimento local. Você pode acessar o aplicativo em `localhost:8080`.
 
 ## Construção do Projeto
+
 Para construir o projeto para produção, execute:
+
 ```bash
 yarn build
 ```
+
 Isso criará uma pasta `dist` com os ativos compilados.
 
 ## Auto-Hospedagem - CLI e PM2 do Evolution Manager
+
 ### Direto ao Ponto: Configuração Rápida com PM2
 
 Para instalar rapidamente o Evolution Manager globalmente e configurá-lo com o PM2, siga estes comandos:
 
 1. **Instalar o Evolution Manager Globalmente**:
+
    ```bash
    npm install -g evolution-manager
    ```
 
 2. **Configurar PM2 para o Evolution Manager**:
+
    ```bash
    evolution-manager pm2 setup
    ```
@@ -59,10 +76,10 @@ Estes dois passos instalarão o CLI do Evolution Manager globalmente em seu sist
 
 Esses dois passos instalarão o CLI do Evolution Manager globalmente em seu sistema e o configurarão para funcionar com o PM2, um gerenciador de processos poderoso.
 
-
 1. **Instalar o Evolution Manager Globalmente**:
    - Certifique-se de ter o Node.js e o NPM instalados em seu sistema.
    - Instale o Evolution Manager globalmente usando o NPM para acessar o CLI (Interface de Linha de Comando):
+
      ```bash
      npm install -g evolution-manager
      ```
@@ -83,9 +100,31 @@ Esses dois passos instalarão o CLI do Evolution Manager globalmente em seu sist
 
 3. **Executando o Projeto com o PM2**:
    - Para configurar e gerenciar o serviço com o PM2, comece com o comando de configuração:
+
      ```bash
      evolution-manager pm2 setup
      ```
+
    - Em seguida, você pode iniciar, parar, reiniciar ou excluir o serviço usando os respectivos comandos `pm2` no CLI.
 
 Estas instruções fornecem um método simplificado para gerenciar o Evolution Manager em vários sistemas, utilizando o PM2 para um eficiente início de serviço
+
+## Contribuindo
+
+As contribuições são uma parte essencial do projeto Evolution Manager. Seja contribuindo com código, sugestões ou feedback, sua participação é inestimável. Para facilitar as contribuições, incluímos um meio direto para doações:
+
+### Fazendo uma Doação
+
+Se desejar apoiar o projeto financeiramente, disponibilizamos um QR code para doações via Pix. Basta escanear o QR code abaixo com seu aplicativo Pix para fazer uma contribuição. Sua generosidade ajuda na manutenção e evolução desta ferramenta de código aberto.
+
+![QR Code para Doação Pix](https://github.com/gabrielpastori1/evolution-manager/blob/main/src/assets/pix.svg)
+
+### Contribuindo com Código ou Ideias
+
+Também recebemos contribuições de código e ideias inovadoras. Se você tem interesse em contribuir dessa forma, por favor, leia nossas diretrizes de contribuição para mais informações sobre como começar.
+
+Seu apoio, de qualquer forma, faz uma grande diferença e é muito apreciado. Obrigado por fazer parte da comunidade Evolution Manager!
+
+## Licença
+
+Este projeto é de código aberto e está disponível sob a [Licença MIT](LICENSE.md).

src/components/modal/About.vue

@@ -15,21 +15,26 @@
             <a
               href="https://github.com/EvolutionAPI/evolution-api/"
               target="_blank"
-              >Evolution API</a
+            >
+              Evolution API </a
             >, facilita a gestão de suas APIs com uma interface intuitiva. Ele
             foi criado por desenvolvedores independentes, focando em melhorar a
             experiência do usuário e a administração das funcionalidades da API.
           </p>
-
+          <div class="d-flex gap-x-2 gap-y-1 align-center justify-center mt-5">
             <v-btn
               href="https://github.com/gabrielpastori1/evolution-manager"
               target="_blank"
-            class="mt-5"
               color="grey darken-3"
             >
               <v-icon start>mdi-github</v-icon>
               Repositório no GitHub
             </v-btn>
+            <v-btn @click="contribute" color="grey darken-3">
+              <v-icon start>mdi-hand-coin</v-icon>
+              Contribua com o projeto
+            </v-btn>
+          </div>
 
           <h3 class="mt-5 mb-2">Processamento de Dados</h3>
           <p>
@@ -60,9 +65,12 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+  <contribute ref="contribute" />
 </template>
 
 <script>
+import Contribute from "./Contribute.vue";
+
 export default {
   name: "SettingsModal",
   data: () => ({
@@ -70,9 +78,13 @@ export default {
     isHttps: window.location.protocol === "https:",
   }),
   methods: {
+    contribute() {
+      this.$refs.contribute.open();
+    },
     open() {
       this.dialog = true;
     },
   },
+  components: { Contribute },
 };
 </script>

src/components/modal/Contribute.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-dialog v-model="dialog" max-width="350px" scrollable>
+    <v-card>
+      <v-card-text>
+        <div class="d-flex flex-column align-center">
+          <h4>Contribua via PIX</h4>
+          <v-img
+            src="@/assets/pix.svg"
+            height="300px"
+            width="300px"
+            class="mb-2"
+          />
+
+          <v-chip @click="copy" size="small">
+            {{ key }}
+            <v-icon end size="small" v-if="!copied">mdi-content-copy</v-icon>
+            <v-icon end size="small" v-else>mdi-check</v-icon>
+          </v-chip>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false" :disabled="loading"> Fechar </v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "SettingsModal",
+  data: () => ({
+    key: "14d43649-13dd-48f8-8b98-feb9b0f11892",
+    dialog: false,
+    copied: false,
+    isHttps: window.location.protocol === "https:",
+  }),
+  methods: {
+    copy() {
+      if (this.copied) return;
+      if (!navigator.clipboard)
+        return alert("Seu navegador não suporta a função de copiar texto.");
+      navigator.clipboard.writeText(this.key);
+      this.copied = true;
+      setTimeout(() => {
+        this.copied = false;
+      }, 2000);
+    },
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>

src/layouts/default/AppFooter.vue

@@ -1,11 +1,22 @@
 <template>
   <v-footer absolute app class="pt-10">
-    <div class="d-flex flex-grow-1 flex-wrap gap-y-1">
+    <div class="d-flex flex-grow-1 flex-wrap gap-y-1 align-end">
       <div class="flex-shrink-0">
+        <p style="font-size: 12px;">
           Criado por
           <a href="https://github.com/gabrielpastori1" target="_blank">
             Gabriel Pastori
           </a>
+        </p>
+        <v-btn
+          @click="contribute"
+          variant="tonal"
+          size="small"
+          color="light-blue-lighten-2"
+        >
+          <v-icon start>mdi-hand-coin</v-icon>
+          Contribua com o projeto
+        </v-btn>
       </div>
       <v-spacer />
       <div class="d-flex gap-x-1">
@@ -25,9 +36,12 @@
       </div>
     </div>
   </v-footer>
+  <Contribute ref="contribute" />
 </template>
 
 <script>
+import Contribute from "@/components/modal/Contribute.vue";
+
 export default {
   name: "AppFooter",
   data: () => ({
@@ -40,7 +54,6 @@ export default {
         title: "Postman",
         url: "https://www.postman.com/agenciadgcode/workspace/evolution-api/overview",
       },
-
       {
         title: "Evolution-Api",
         icon: "mdi-github",
@@ -52,6 +65,12 @@ export default {
       },
     ],
   }),
+  methods: {
+    contribute() {
+      this.$refs.contribute.open();
+    },
+  },
+  components: { Contribute },
 };
 </script>