From adb10e7ef40cfbf2dc7aa5a437116a3a30913918 Mon Sep 17 00:00:00 2001
From: BrunoShioheiFlip <bruno.nascimento@flipfloplab.com.br>
Date: Sat, 11 Oct 2025 01:14:51 -0300
Subject: [PATCH 1/4] feat: [Issue 145] Add register admin page

---
 pages/admin/forms/cadastro.vue | 156 +++++++++++++++++++++++++++++++++
 pages/admin/forms/login.vue    |  72 +++++++++++++++
 pages/admin/index.vue          |  66 ++------------
 3 files changed, 236 insertions(+), 58 deletions(-)
 create mode 100644 pages/admin/forms/cadastro.vue
 create mode 100644 pages/admin/forms/login.vue

diff --git a/pages/admin/forms/cadastro.vue b/pages/admin/forms/cadastro.vue
new file mode 100644
index 0000000..8b65b62
--- /dev/null
+++ b/pages/admin/forms/cadastro.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="auth-form">
+    <v-icon class="mb-6" color="primary" x-large>mdi-account-plus</v-icon>
+    <div class="text-center text-h6 mb-7">Cadastro de Usuário Administrador</div>
+
+    <v-text-field
+      v-model="name"
+      label="Nome completo"
+      solo
+      :error-messages="errors.name"
+    />
+
+    <v-text-field
+      v-model="email"
+      label="E-mail"
+      solo
+      :error-messages="errors.email"
+    />
+
+    <v-text-field
+      v-model="password"
+      label="Senha"
+      type="password"
+      solo
+      :error-messages="errors.password"
+    />
+
+    <v-text-field
+      v-model="passwordConfirmation"
+      label="Confirmar senha"
+      type="password"
+      solo
+      :error-messages="errors.passwordConfirmation"
+    />
+
+    <v-btn
+      class="mt-4"
+      block
+      color="primary"
+      elevation="2"
+      large
+      :loading="isSubmitting"
+      :disabled="isSubmitting"
+      @click="registerUser"
+    >
+      Cadastrar
+    </v-btn>
+
+    <div class="text-center mt-4 text-caption">
+      Já possui uma conta?
+      <span class="link" @click="$emit('go-login')">Fazer login</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import axiosClient from '~/assets/services/emtu-api'
+
+export default {
+  name: 'RegisterForm',
+  data () {
+    return {
+      name: '',
+      email: '',
+      password: '',
+      passwordConfirmation: '',
+      isSubmitting: false,
+      errors: {
+        name: '',
+        email: '',
+        password: '',
+        passwordConfirmation: ''
+      }
+    }
+  },
+  destroyed () {
+    this.hideAlert()
+  },
+  methods: {
+    ...mapActions('alert', ['showAlert', 'hideAlert']),
+
+    validateForm () {
+      this.errors = { name: '', email: '', password: '', passwordConfirmation: '' }
+      let valid = true
+
+      if (!this.name) {
+        this.errors.name = 'Nome é obrigatório'
+        valid = false
+      }
+
+      if (!this.email) {
+        this.errors.email = 'E-mail é obrigatório'
+        valid = false
+      } else if (!/\S+@\S+\.\S+/.test(this.email)) {
+        this.errors.email = 'E-mail inválido'
+        valid = false
+      }
+
+      if (!this.password) {
+        this.errors.password = 'Senha é obrigatória'
+        valid = false
+      } else if (this.password.length < 6) {
+        this.errors.password = 'Senha deve ter no mínimo 6 caracteres'
+        valid = false
+      }
+
+      if (this.password !== this.passwordConfirmation) {
+        this.errors.passwordConfirmation = 'As senhas não são iguais'
+        valid = false
+      }
+
+      return valid
+    },
+
+    async registerUser () {
+      this.hideAlert()
+      if (!this.validateForm()) { return }
+
+      this.isSubmitting = true
+
+      await axiosClient.post('/user/register', {
+        name: this.name,
+        email: this.email,
+        password: this.password
+      }).then((response) => {
+        this.showAlert({
+          alertMessage: 'Cadastro realizado com sucesso! Faça login para continuar.',
+          alertType: 'success'
+        })
+      }).catch((err) => {
+        if (err.response && err.response.status === 409) {
+          this.showAlert({
+            alertMessage: 'Este e-mail já está cadastrado. Tente fazer login.',
+            alertType: 'warning'
+          })
+        } else {
+          this.showAlert({
+            alertMessage: 'Erro ao cadastrar usuário. Tente novamente mais tarde.',
+            alertType: 'error'
+          })
+        }
+      })
+
+      this.isSubmitting = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link {
+  color: #1976d2;
+  cursor: pointer;
+}
+</style>
diff --git a/pages/admin/forms/login.vue b/pages/admin/forms/login.vue
new file mode 100644
index 0000000..5d34d75
--- /dev/null
+++ b/pages/admin/forms/login.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="auth-form">
+    <v-icon class="mb-6" color="primary" x-large>mdi-bus</v-icon>
+    <div class="text-center text-h6 mb-7">Login usuário Administrador</div>
+
+    <v-text-field v-model="email" label="E-mail" solo />
+    <v-text-field v-model="password" label="Senha" type="password" solo />
+    <div class="text-left text-caption color-gray mb-3">Esqueceu sua senha?</div>
+
+    <v-btn block color="primary" elevation="2" large @click="userLogin">
+      Entrar
+    </v-btn>
+
+    <div class="text-center mt-4 text-caption">
+      Não possui uma conta?
+      <span class="link" @click="$emit('go-register')">Cadastre-se</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'LoginForm',
+  data () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+  destroyed () {
+    this.hideAlert()
+  },
+  methods: {
+    ...mapActions('alert', ['showAlert', 'hideAlert']),
+    async userLogin () {
+      this.hideAlert()
+
+      if (!this.email || !this.password) {
+        this.showAlert({ alertMessage: 'Preencha todos os campos.', alertType: 'error' })
+        return
+      }
+
+      try {
+        const logged = await this.$auth.loginWith('local', {
+          data: {
+            email: this.email,
+            password: this.password
+          }
+        })
+        if (logged) {
+          this.$auth.setUser({ email: this.email })
+          this.$router.push('/admin/home')
+        }
+      } catch (err) {
+        this.showAlert({
+          alertMessage: 'Não foi possível realizar o Login, tente novamente mais tarde.',
+          alertType: 'error'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link {
+  color: #1976d2;
+  cursor: pointer;
+}
+</style>
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 39d50b9..f4209d1 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -1,74 +1,28 @@
 <template>
   <div class="admin-page">
     <div class="admin-page__form">
-      <v-icon class="mb-6" color="primary" x-large>
-        mdi-bus
-      </v-icon>
-
-      <div class="admin-page__text text-center text-h6 mb-7" v-text="'Login usuário Administrador'" />
-
-      <v-text-field v-model="email" label="E-mail" solo />
-      <v-text-field v-model="password" label="Senha" type="password" solo />
-
-      <v-btn
-        class="mb-6"
-        block
-        color="primary"
-        elevation="2"
-        large
-        @click="userLogin"
-      >
-        enviar
-      </v-btn>
-
-      <div class="admin-page__text text-center text-caption color-gray" v-text="'Esqueceu sua senha?'" />
+      <LoginForm v-if="showLogin" @go-register="toggleForm(false)" />
+      <RegisterForm v-else @go-login="toggleForm(true)" />
     </div>
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import LoginForm from './forms/login.vue'
+import RegisterForm from './forms/cadastro.vue'
 
 export default {
   name: 'AdminPage',
+  components: { LoginForm, RegisterForm },
   layout: 'login',
   data () {
     return {
-      error: false,
-      email: null,
-      password: null
+      showLogin: true
     }
   },
-
-  destroyed () {
-    this.hideAlert()
-  },
-
   methods: {
-    ...mapActions('alert', ['showAlert', 'hideAlert']),
-
-    async userLogin () {
-      this.hideAlert()
-
-      try {
-        const logged = await this.$auth.loginWith('local', {
-          data: {
-            email: this.email,
-            password: this.password
-          }
-        })
-        if (logged) {
-          this.$auth.setUser({
-            email: this.email
-          })
-          this.$router.push('/admin/home')
-        }
-      } catch (err) {
-        this.showAlert({
-          alertMessage: 'Não foi possível realizar o Login, tente novamente mais tarde.',
-          alertType: 'error'
-        })
-      }
+    toggleForm (isLogin) {
+      this.showLogin = isLogin
     }
   }
 }
@@ -96,8 +50,4 @@ export default {
     width: 600px;
   }
 }
-
-.admin-page__text {
-  z-index: 1;
-}
 </style>

From f9a19c8613325a99aaf438d3e6196445177e34db Mon Sep 17 00:00:00 2001
From: shioheii <bruno.shiohei@gmail.com>
Date: Sun, 19 Oct 2025 16:57:19 -0300
Subject: [PATCH 2/4] refactor: [Issue 145] Redirecting to login after
 registering and updating snapshot for testing

---
 .../__snapshots__/index.test.js.snap          | 177 ++++++++++--------
 pages/admin/forms/cadastro.vue                |  14 +-
 2 files changed, 106 insertions(+), 85 deletions(-)

diff --git a/pages/admin/__tests__/__snapshots__/index.test.js.snap b/pages/admin/__tests__/__snapshots__/index.test.js.snap
index 5208066..ffc0783 100644
--- a/pages/admin/__tests__/__snapshots__/index.test.js.snap
+++ b/pages/admin/__tests__/__snapshots__/index.test.js.snap
@@ -7,117 +7,134 @@ exports[`Pages / AdminPage should render the page 1`] = `
   <div
     class="admin-page__form"
   >
-    <i
-      aria-hidden="true"
-      class="v-icon notranslate mb-6 mdi mdi-bus theme--light primary--text"
-      style="font-size: 40px;"
-    />
-     
     <div
-      class="admin-page__text text-center text-h6 mb-7"
-    >
-      Login usuário Administrador
-    </div>
-     
-    <div
-      class="v-input theme--light v-text-field v-text-field--single-line v-text-field--solo v-text-field--enclosed"
+      class="auth-form"
     >
+      <i
+        aria-hidden="true"
+        class="v-icon notranslate mb-6 mdi mdi-bus theme--light primary--text"
+        style="font-size: 40px;"
+      />
+       
+      <div
+        class="text-center text-h6 mb-7"
+      >
+        Login usuário Administrador
+      </div>
+       
       <div
-        class="v-input__control"
+        class="v-input theme--light v-text-field v-text-field--single-line v-text-field--solo v-text-field--enclosed"
       >
         <div
-          class="v-input__slot"
+          class="v-input__control"
         >
           <div
-            class="v-text-field__slot"
+            class="v-input__slot"
           >
-            <label
-              class="v-label theme--light"
-              for="input-3"
-              style="left: 0px; position: absolute;"
+            <div
+              class="v-text-field__slot"
             >
-              E-mail
-            </label>
-            <input
-              id="input-3"
-              type="text"
-            />
+              <label
+                class="v-label theme--light"
+                for="input-4"
+                style="left: 0px; position: absolute;"
+              >
+                E-mail
+              </label>
+              <input
+                id="input-4"
+                type="text"
+              />
+            </div>
           </div>
-        </div>
-        <div
-          class="v-text-field__details"
-        >
           <div
-            class="v-messages theme--light"
+            class="v-text-field__details"
           >
-            <transition-group-stub
-              class="v-messages__wrapper"
-              name="message-transition"
-              tag="div"
-            />
+            <div
+              class="v-messages theme--light"
+            >
+              <transition-group-stub
+                class="v-messages__wrapper"
+                name="message-transition"
+                tag="div"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-     
-    <div
-      class="v-input theme--light v-text-field v-text-field--single-line v-text-field--solo v-text-field--enclosed"
-    >
+       
       <div
-        class="v-input__control"
+        class="v-input theme--light v-text-field v-text-field--single-line v-text-field--solo v-text-field--enclosed"
       >
         <div
-          class="v-input__slot"
+          class="v-input__control"
         >
           <div
-            class="v-text-field__slot"
+            class="v-input__slot"
           >
-            <label
-              class="v-label theme--light"
-              for="input-6"
-              style="left: 0px; position: absolute;"
+            <div
+              class="v-text-field__slot"
             >
-              Senha
-            </label>
-            <input
-              id="input-6"
-              type="password"
-            />
+              <label
+                class="v-label theme--light"
+                for="input-7"
+                style="left: 0px; position: absolute;"
+              >
+                Senha
+              </label>
+              <input
+                id="input-7"
+                type="password"
+              />
+            </div>
           </div>
-        </div>
-        <div
-          class="v-text-field__details"
-        >
           <div
-            class="v-messages theme--light"
+            class="v-text-field__details"
           >
-            <transition-group-stub
-              class="v-messages__wrapper"
-              name="message-transition"
-              tag="div"
-            />
+            <div
+              class="v-messages theme--light"
+            >
+              <transition-group-stub
+                class="v-messages__wrapper"
+                name="message-transition"
+                tag="div"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-     
-    <button
-      class="mb-6 v-btn v-btn--block v-btn--is-elevated v-btn--has-bg theme--light elevation-2 v-size--large primary"
-      type="button"
-    >
-      <span
-        class="v-btn__content"
+       
+      <div
+        class="text-left text-caption color-gray mb-3"
+      >
+        Esqueceu sua senha?
+      </div>
+       
+      <button
+        class="v-btn v-btn--block v-btn--is-elevated v-btn--has-bg theme--light elevation-2 v-size--large primary"
+        type="button"
+      >
+        <span
+          class="v-btn__content"
+        >
+          
+    Entrar
+  
+        </span>
+      </button>
+       
+      <div
+        class="text-center mt-4 text-caption"
       >
         
-      enviar
+    Não possui uma conta?
     
-      </span>
-    </button>
-     
-    <div
-      class="admin-page__text text-center text-caption color-gray"
-    >
-      Esqueceu sua senha?
+        <span
+          class="link"
+        >
+          Cadastre-se
+        </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/pages/admin/forms/cadastro.vue b/pages/admin/forms/cadastro.vue
index 8b65b62..dd49e17 100644
--- a/pages/admin/forms/cadastro.vue
+++ b/pages/admin/forms/cadastro.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="auth-form">
-    <v-icon class="mb-6" color="primary" x-large>mdi-account-plus</v-icon>
-    <div class="text-center text-h6 mb-7">Cadastro de Usuário Administrador</div>
+    <v-icon class="mb-6" color="primary" x-large>
+      mdi-account-plus
+    </v-icon>
+
+    <div class="text-center text-h6 mb-7">
+      Cadastro de Usuário Administrador
+    </div>
 
     <v-text-field
       v-model="name"
@@ -74,9 +79,6 @@ export default {
       }
     }
   },
-  destroyed () {
-    this.hideAlert()
-  },
   methods: {
     ...mapActions('alert', ['showAlert', 'hideAlert']),
 
@@ -128,6 +130,8 @@ export default {
           alertMessage: 'Cadastro realizado com sucesso! Faça login para continuar.',
           alertType: 'success'
         })
+
+        this.$emit('go-login')
       }).catch((err) => {
         if (err.response && err.response.status === 409) {
           this.showAlert({

From 61edaa69a6265ca0ace158b06859929583795ddc Mon Sep 17 00:00:00 2001
From: shioheii <bruno.shiohei@gmail.com>
Date: Sun, 9 Nov 2025 09:40:26 -0300
Subject: [PATCH 3/4] refactor: [Issue 145 Moving user registration to within
 admin access

---
 assets/js/adminItems.json                     |  1 +
 .../__snapshots__/SideBar.test.js.snap        | 25 +++++
 .../__snapshots__/index.test.js.snap          | 13 ---
 pages/admin/forms/cadastro.vue                | 11 +--
 pages/admin/forms/login.vue                   |  5 -
 pages/admin/index.vue                         | 11 +--
 pages/admin/usuarios.vue                      | 93 +++++++++++++++++++
 7 files changed, 124 insertions(+), 35 deletions(-)
 create mode 100644 pages/admin/usuarios.vue

diff --git a/assets/js/adminItems.json b/assets/js/adminItems.json
index 568978a..d8add16 100644
--- a/assets/js/adminItems.json
+++ b/assets/js/adminItems.json
@@ -4,5 +4,6 @@
   { "title": "Acessos diários", "icon": "", "route": "/admin/acessos-diarios" },
   { "title": "Ranking de Linhas", "icon": "", "route": "/admin/ranking-linhas" },
   { "title": "Solicitações", "icon": "", "route": "/admin/solicitacoes" },
+  { "title": "Usuários", "icon": "", "route": "/admin/usuarios" },
   { "title": "Fazer uma busca", "icon": "", "route": "/" }
 ]
\ No newline at end of file
diff --git a/components/__tests__/__snapshots__/SideBar.test.js.snap b/components/__tests__/__snapshots__/SideBar.test.js.snap
index 65c5535..97d50ff 100644
--- a/components/__tests__/__snapshots__/SideBar.test.js.snap
+++ b/components/__tests__/__snapshots__/SideBar.test.js.snap
@@ -641,6 +641,31 @@ exports[`Components / Sidebar when user is logged should render admin items 1`]
             />
           </div>
            
+          <div
+            class="v-list-item__content"
+          >
+            <span
+              class="item-title"
+            >
+              Usuários
+            </span>
+          </div>
+        </a>
+        <a
+          class="v-list-item v-list-item--link theme--light"
+          role="listitem"
+          router=""
+          tabindex="0"
+        >
+          <div
+            class="v-list-item__icon"
+          >
+            <i
+              aria-hidden="true"
+              class="v-icon notranslate material-icons theme--light"
+            />
+          </div>
+           
           <div
             class="v-list-item__content"
           >
diff --git a/pages/admin/__tests__/__snapshots__/index.test.js.snap b/pages/admin/__tests__/__snapshots__/index.test.js.snap
index ffc0783..a2c537d 100644
--- a/pages/admin/__tests__/__snapshots__/index.test.js.snap
+++ b/pages/admin/__tests__/__snapshots__/index.test.js.snap
@@ -122,19 +122,6 @@ exports[`Pages / AdminPage should render the page 1`] = `
   
         </span>
       </button>
-       
-      <div
-        class="text-center mt-4 text-caption"
-      >
-        
-    Não possui uma conta?
-    
-        <span
-          class="link"
-        >
-          Cadastre-se
-        </span>
-      </div>
     </div>
   </div>
 </div>
diff --git a/pages/admin/forms/cadastro.vue b/pages/admin/forms/cadastro.vue
index dd49e17..245b7ce 100644
--- a/pages/admin/forms/cadastro.vue
+++ b/pages/admin/forms/cadastro.vue
@@ -50,11 +50,6 @@
     >
       Cadastrar
     </v-btn>
-
-    <div class="text-center mt-4 text-caption">
-      Já possui uma conta?
-      <span class="link" @click="$emit('go-login')">Fazer login</span>
-    </div>
   </div>
 </template>
 
@@ -127,15 +122,15 @@ export default {
         password: this.password
       }).then((response) => {
         this.showAlert({
-          alertMessage: 'Cadastro realizado com sucesso! Faça login para continuar.',
+          alertMessage: 'Cadastro realizado com sucesso!',
           alertType: 'success'
         })
 
-        this.$emit('go-login')
+        this.$emit('go-users-table')
       }).catch((err) => {
         if (err.response && err.response.status === 409) {
           this.showAlert({
-            alertMessage: 'Este e-mail já está cadastrado. Tente fazer login.',
+            alertMessage: 'Este e-mail já está cadastrado.',
             alertType: 'warning'
           })
         } else {
diff --git a/pages/admin/forms/login.vue b/pages/admin/forms/login.vue
index 5d34d75..44994a0 100644
--- a/pages/admin/forms/login.vue
+++ b/pages/admin/forms/login.vue
@@ -10,11 +10,6 @@
     <v-btn block color="primary" elevation="2" large @click="userLogin">
       Entrar
     </v-btn>
-
-    <div class="text-center mt-4 text-caption">
-      Não possui uma conta?
-      <span class="link" @click="$emit('go-register')">Cadastre-se</span>
-    </div>
   </div>
 </template>
 
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index f4209d1..c9f8575 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -1,29 +1,22 @@
 <template>
   <div class="admin-page">
     <div class="admin-page__form">
-      <LoginForm v-if="showLogin" @go-register="toggleForm(false)" />
-      <RegisterForm v-else @go-login="toggleForm(true)" />
+      <LoginForm />
     </div>
   </div>
 </template>
 
 <script>
 import LoginForm from './forms/login.vue'
-import RegisterForm from './forms/cadastro.vue'
 
 export default {
   name: 'AdminPage',
-  components: { LoginForm, RegisterForm },
+  components: { LoginForm },
   layout: 'login',
   data () {
     return {
       showLogin: true
     }
-  },
-  methods: {
-    toggleForm (isLogin) {
-      this.showLogin = isLogin
-    }
   }
 }
 </script>
diff --git a/pages/admin/usuarios.vue b/pages/admin/usuarios.vue
new file mode 100644
index 0000000..9040f6f
--- /dev/null
+++ b/pages/admin/usuarios.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="users">
+    <div class="users__content">
+      <div class="users__header">
+        <h2>Gerenciamento de Usuários</h2>
+        <v-btn
+          v-if="!showRegister"
+          color="primary"
+          large
+          @click="toggleForm()"
+        >
+          NOVO USUÁRIO
+        </v-btn>
+        <v-btn
+          v-else
+          color="secondary"
+          large
+          @click="toggleForm()"
+        >
+          VER USUÁRIOS
+        </v-btn>
+      </div>
+
+      <RegisterForm
+        v-if="showRegister"
+        @go-users-table="toggleForm()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import RegisterForm from './forms/cadastro.vue'
+
+export default {
+  name: 'AdminUsers',
+  components: {
+    RegisterForm
+  },
+  layout: 'admin',
+  data () {
+    return {
+      showRegister: false
+    }
+  },
+  methods: {
+    toggleForm () {
+      this.showRegister = !this.showRegister
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.users {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 4px;
+
+  @media (min-width: 1000px) {
+    padding: 0 20px
+  }
+}
+
+.users__content {
+  display: flex;
+  flex-direction: column;
+  margin-top: 28px;
+  width: 100%;
+
+  @media (min-width: 800px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 800px;
+  }
+}
+
+.users__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  width: 100%;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 500;
+    margin: 0;
+  }
+}
+</style>

From 300e95ced3a381a6d0dca3883f39fb61201ca498 Mon Sep 17 00:00:00 2001
From: shioheii <bruno.shiohei@gmail.com>
Date: Mon, 24 Nov 2025 23:51:24 -0300
Subject: [PATCH 4/4] refactor: [Issue 145] increasing the z-index of the popup
 GlobalAlert

---
 components/GlobalAlert.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/GlobalAlert.vue b/components/GlobalAlert.vue
index a76bff4..7127634 100644
--- a/components/GlobalAlert.vue
+++ b/components/GlobalAlert.vue
@@ -35,6 +35,7 @@ export default {
 <style lang="scss" scoped>
 .global-alert {
   position: absolute;
+  z-index: 10000 !important;
   right: 0;
 }
 </style>