From e95d33f172aee07a17ebfafd4b331261f150bf89 Mon Sep 17 00:00:00 2001
From: LeoMortari <leo.mortari.forinn@gmail.com>
Date: Sun, 2 Nov 2025 20:39:57 -0300
Subject: [PATCH] =?UTF-8?q?Inicio=20de=20usu=C3=A1rios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                 |   2 +-
 src/App.vue                |  17 --
 src/routes/auth/Login.vue  |  15 +-
 src/routes/users/index.vue | 517 +++++++++++++++++++------------------
 4 files changed, 266 insertions(+), 285 deletions(-)
diff --git a/index.html b/index.html
index 6d865b6..c75da54 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta description="This project is a front-end base project with Vue app" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <title>Vue Base JS</title>
+    <title>Clipper AI</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 28e06a0..7a4e66b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -176,23 +176,6 @@
           </p>
         </div>
       </q-scroll-area>
-
-      <div class="app-drawer__footer">
-        <div class="app-drawer__cta">
-          <div class="app-drawer__cta-title">Precisa de ajuda?</div>
-          <div class="app-drawer__cta-text">
-            Nossa equipe está pronta para acelerar seus cortes.
-          </div>
-          <Button
-            color="secondary"
-            text-color="primary"
-            variant="ghost"
-            icon="sym_o_help"
-            label="Abrir suporte"
-            full-width
-          />
-        </div>
-      </div>
     </q-drawer>
 
     <q-page-container>
diff --git a/src/routes/auth/Login.vue b/src/routes/auth/Login.vue
index 573fe67..a34ffb5 100644
--- a/src/routes/auth/Login.vue
+++ b/src/routes/auth/Login.vue
@@ -103,19 +103,6 @@
           </q-form>
 
           <p v-if="error" class="login-card__error">{{ error }}</p>
-
-          <div class="login-card__footer">
-            <span>Precisa de ajuda?</span>
-            <Button
-              variant="ghost"
-              color="secondary"
-              text-color="primary"
-              icon="sym_o_chat"
-              label="Falar com suporte"
-              full-width
-              @click.prevent="handleSupport"
-            />
-          </div>
         </q-card>
       </section>
     </div>
@@ -244,7 +231,7 @@ export default {
 
 <style scoped lang="scss">
 .login-page {
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   align-items: stretch;
   justify-content: center;
diff --git a/src/routes/users/index.vue b/src/routes/users/index.vue
index 0d2029c..f2a2f55 100644
--- a/src/routes/users/index.vue
+++ b/src/routes/users/index.vue
@@ -4,203 +4,246 @@
       <div>
         <h2 class="app-page__title">Gestão de usuários</h2>
         <p class="app-page__subtitle">
-          Controle quem pode acessar o Clipper IA, convide novos membros e acompanhe o status de cada conta.
+          Controle quem pode acessar o Clipper IA, convide novos membros e
+          acompanhe o status de cada conta.
         </p>
       </div>
 
       <div class="app-actions-bar">
         <Button
-          icon="sym_o_person_add"
-          label="Convidar usuário"
-          @click="handleInvite"
+          variant="ghost"
+          icon="sym_o_refresh"
+          label="Atualizar"
+          :disabled="loading"
+          @click="handleRefresh"
         />
         <Button
-          variant="ghost"
-          color="secondary"
-          text-color="primary"
-          icon="sym_o_download"
-          label="Exportar"
-          @click="handleExport"
+          icon="sym_o_person_add"
+          label="Adicionar Usuário"
+          @click="handleNewUser"
         />
       </div>
     </section>
 
-    <div class="users-page__grid">
-      <q-card flat bordered class="app-card users-page__card">
-        <header class="users-page__card-head">
-          <div>
-            <h3>Times e permissões</h3>
-            <span>Use os níveis de acesso para definir o que cada grupo pode operar.</span>
-          </div>
+    <q-card flat bordered class="users-page__filters app-card">
+      <div class="users-page__filters-head">
+        <div>
+          <h3>Filtrar usuários</h3>
+          <span
+            >Busque por nome ou e-mail para localizar rapidamente qualquer
+            membro.</span
+          >
+        </div>
+
+        <div class="users-page__filters-actions">
           <Button
             variant="ghost"
             color="secondary"
             text-color="primary"
-            icon="sym_o_settings"
-            label="Configurar permissões"
-            @click="handlePermissions"
-          />
-        </header>
-
-        <div class="users-page__roles">
-          <q-item v-for="role in roles" :key="role.name" class="users-page__role-item">
-            <q-item-section avatar>
-              <q-avatar :color="role.color" text-color="white" icon="sym_o_badge" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ role.name }}</q-item-label>
-              <q-item-label caption>{{ role.description }}</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-chip outline color="primary" :label="role.membersLabel" />
-            </q-item-section>
-          </q-item>
-        </div>
-      </q-card>
-
-      <q-card flat bordered class="app-card users-page__card">
-        <header class="users-page__card-head">
-          <div>
-            <h3>Status da equipe</h3>
-            <span>Indicadores rápidos para acompanhar convites e acessos recentes.</span>
-          </div>
-        </header>
-
-        <div class="users-page__stats">
-          <div v-for="stat in stats" :key="stat.label" class="users-page__stat">
-            <div class="users-page__stat-label">{{ stat.label }}</div>
-            <div class="users-page__stat-value">{{ stat.value }}</div>
-            <div class="users-page__stat-caption">{{ stat.caption }}</div>
-          </div>
-        </div>
-
-        <div class="users-page__cta">
-          <Button
-            variant="ghost"
-            icon="sym_o_smart_toy"
-            label="Automatizar aprovações"
-            @click="handleWorkflow"
-          />
-          <Button
-            icon="sym_o_notifications_active"
-            label="Ativar alertas"
-            @click="handleAlerts"
+            icon="sym_o_close"
+            label="Limpar filtros"
+            :disabled="!hasFilters"
+            @click="resetFilters"
           />
         </div>
-      </q-card>
-    </div>
+      </div>
 
-    <q-card flat bordered class="app-card users-page__roadmap">
-      <header class="users-page__card-head">
-        <div>
-          <h3>Próximas entregas</h3>
-          <span>Fique de olho nos recursos que estão chegando para a gestão da sua equipe.</span>
-        </div>
-      </header>
+      <div class="users-page__filters-grid">
+        <TextField
+          v-model="filters.name"
+          label="Nome"
+          placeholder="Ex.: Ana Silva"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_person" color="primary" />
+          </template>
+        </TextField>
 
-      <ul class="users-page__roadmap-list">
-        <li v-for="item in roadmap" :key="item.title">
-          <div class="users-page__roadmap-title">{{ item.title }}</div>
-          <p class="users-page__roadmap-description">{{ item.description }}</p>
-        </li>
-      </ul>
+        <TextField
+          v-model="filters.email"
+          label="E-mail"
+          placeholder="Ex.: ana@clipperia.com"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_alternate_email" color="primary" />
+          </template>
+        </TextField>
+      </div>
+
+      <div class="users-page__filters-footer">
+        <Button
+          label="Buscar usuários"
+          icon="sym_o_search"
+          :loading="loading"
+          :disabled="loading"
+          @click="handleSearch({ ...pagination, page: 1 })"
+        />
+      </div>
     </q-card>
+
+    <Table
+      key="users-table"
+      class="users-page__table"
+      title="Usuários"
+      subtitle="Visualize quem tem acesso ao Clipper IA e acompanhe o status de cada conta."
+      :columns="columns"
+      :rows="rows"
+      :pagination="pagination"
+      :loading="loading"
+      @update:pagination="updatePagination"
+    >
+      <template #empty-message>
+        Nenhum usuário encontrado para os filtros selecionados.
+      </template>
+
+      <template #body="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div class="users-page__cell">
+              <div class="users-page__cell-label">{{ col.label }}</div>
+              <div class="users-page__cell-value">{{ col.value }}</div>
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+    </Table>
   </div>
 </template>
 
 <script>
 import Button from "@components/Button";
+import Table from "@components/Table";
+import TextField from "@components/TextField";
+
+import { API } from "@config/axios";
+
+const columns = [
+  {
+    name: "id",
+    label: "ID",
+    align: "left",
+    field: "id",
+  },
+  {
+    name: "name",
+    label: "Nome",
+    align: "left",
+    field: "name",
+  },
+  {
+    name: "email",
+    label: "E-mail",
+    align: "left",
+    field: "email",
+  },
+  {
+    name: "role",
+    label: "Papel",
+    align: "center",
+    field: "role",
+  },
+  {
+    name: "status",
+    label: "Status",
+    align: "center",
+    field: "status",
+  },
+  {
+    name: "lastAccess",
+    label: "Último acesso",
+    align: "center",
+    field: "lastAccess",
+  },
+];
 
 export default {
   name: "UsersPage",
   components: {
     Button,
+    Table,
+    TextField,
   },
   data() {
     return {
-      roles: [
-        {
-          name: "Administradores",
-          description: "Acesso total às configurações, convites e billing.",
-          membersLabel: "3 membros",
-          color: "primary",
-        },
-        {
-          name: "Editores",
-          description: "Podem criar cortes, revisar sugestões e publicar.",
-          membersLabel: "8 membros",
-          color: "secondary",
-        },
-        {
-          name: "Leitores",
-          description: "Acompanham relatórios e status dos clipes gerados.",
-          membersLabel: "12 membros",
-          color: "accent",
-        },
-      ],
-      stats: [
-        {
-          label: "Convites pendentes",
-          value: "04",
-          caption: "Envie lembretes automáticos em 1 clique",
-        },
-        {
-          label: "Último acesso",
-          value: "há 2h",
-          caption: "Bruna adicionou novos cortes",
-        },
-        {
-          label: "Contas bloqueadas",
-          value: "01",
-          caption: "Revise motivos e restaure acessos",
-        },
-      ],
-      roadmap: [
-        {
-          title: "Fluxo de aprovação com múltiplos níveis",
-          description: "Defina revisores responsáveis por validar cortes antes da publicação automática.",
-        },
-        {
-          title: "Integração com Slack / Discord",
-          description: "Envie alertas de novos convites e aprovações direto para os canais do time.",
-        },
-        {
-          title: "Perfis avançados",
-          description: "Crie papéis personalizados combinando permissões de forma granular.",
-        },
-      ],
+      columns,
+      rows: [],
+      loading: false,
+      pagination: {
+        page: 1,
+        direction: "asc",
+        perPage: 10,
+        total: 0,
+        totalPages: 1,
+        hasNext: false,
+        hasPrev: false,
+      },
+      filters: {
+        name: "",
+        email: "",
+      },
     };
   },
+  computed: {
+    hasFilters() {
+      return Boolean(this.filters.name) || Boolean(this.filters.email);
+    },
+  },
+  created() {
+    this.handleSearch(this.pagination);
+  },
   methods: {
-    handleInvite() {
-      this.$q.notify({
-        type: "positive",
-        message: "Convites em lote estarão disponíveis em breve.",
-      });
+    async handleSearch(pagination = this.pagination) {
+      const basePagination = {
+        ...this.pagination,
+        page: pagination.page ?? this.pagination.page,
+        perPage: pagination.perPage ?? this.pagination.perPage,
+      };
+
+      try {
+        this.loading = true;
+
+        const {
+          data: { content, pagination: nextPagination },
+        } = await API.get("/usuarios", {
+          params: {
+            page: basePagination.page,
+            perPage: basePagination.perPage,
+            name: this.filters.name,
+            email: this.filters.email,
+          },
+        });
+
+        console.log("====================================");
+        console.log(content);
+        console.log("====================================");
+
+        this.rows = content;
+        this.pagination = {
+          ...basePagination,
+          ...nextPagination,
+        };
+      } catch (error) {
+        this.$q.notify({
+          type: "negative",
+          message: "Não foi possível carregar os usuários simulados.",
+        });
+      } finally {
+        this.loading = false;
+      }
     },
-    handlePermissions() {
-      this.$q.notify({
-        type: "info",
-        message: "Configurações avançadas de permissões ainda não foram conectadas ao backend.",
-      });
+    updatePagination(pagination) {
+      this.handleSearch(pagination);
     },
-    handleExport() {
-      this.$q.notify({
-        type: "info",
-        message: "Exportação de usuários será liberada após a integração com o Keycloak.",
-      });
+    resetFilters() {
+      this.filters = {
+        name: "",
+        email: "",
+      };
+
+      this.handleSearch({ ...this.pagination, page: 1 });
     },
-    handleWorkflow() {
-      this.$q.notify({
-        type: "info",
-        message: "Automação de aprovações está em desenvolvimento.",
-      });
-    },
-    handleAlerts() {
-      this.$q.notify({
-        type: "info",
-        message: "Em breve você poderá receber alertas no email ou no Slack.",
-      });
+    handleRefresh() {
+      this.handleSearch({ ...this.pagination });
     },
   },
 };
@@ -210,138 +253,106 @@ export default {
 .users-page {
   display: flex;
   flex-direction: column;
-  gap: clamp(32px, 6vw, 48px);
+  gap: 32px;
 }
 
-.users-page__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: clamp(24px, 4vw, 32px);
-}
-
-.users-page__card-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-.users-page__card-head h3 {
+.users-page__filters h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 700;
   color: #101828;
 }
 
-.users-page__card-head span {
+.users-page__filters span {
+  color: #475467;
   font-size: 14px;
-  color: #475467;
 }
 
-.users-page__roles {
+.users-page__filters-head {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.users-page__role-item {
-  border: 1px solid rgba(127, 86, 217, 0.1);
-  border-radius: 14px;
-  padding: 8px 12px;
-  background: rgba(127, 86, 217, 0.04);
-}
-
-.users-page__stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  justify-content: space-between;
+  align-items: flex-start;
   gap: 16px;
-  margin-top: 16px;
+  margin-bottom: 24px;
 }
 
-.users-page__stat {
-  padding: 16px;
-  border-radius: 16px;
-  border: 1px solid rgba(127, 86, 217, 0.08);
-  background: rgba(127, 86, 217, 0.05);
+.users-page__filters-actions {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  align-items: center;
 }
 
-.users-page__stat-label {
-  font-size: 13px;
-  color: #475467;
-}
-
-.users-page__stat-value {
-  font-size: 24px;
-  font-weight: 700;
-  color: #101828;
-}
-
-.users-page__stat-caption {
-  font-size: 12px;
-  color: #667085;
-}
-
-.users-page__cta {
-  margin-top: 28px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.users-page__roadmap {
-  display: flex;
-  flex-direction: column;
+.users-page__filters-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
 }
 
-.users-page__roadmap-list {
-  margin: 0;
-  padding-left: 0;
-  list-style: none;
-  display: grid;
-  gap: 18px;
+.users-page__filters-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
 }
 
-.users-page__roadmap-title {
+.users-page__table {
+  margin-bottom: 32px;
+}
+
+.users-page__cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.users-page__cell-label {
+  display: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: #98a2b3;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.users-page__cell-value {
+  font-size: 15px;
   font-weight: 600;
   color: #101828;
 }
 
-.users-page__roadmap-description {
-  margin: 4px 0 0;
-  color: #475467;
+body.body--dark .users-page__filters h3 {
+  color: rgba(255, 255, 255, 0.92);
 }
 
-body.body--dark .users-page__card-head h3,
-body.body--dark .users-page__stat-value,
-body.body--dark .users-page__roadmap-title {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-body.body--dark .users-page__card-head span,
-body.body--dark .users-page__stat-label,
-body.body--dark .users-page__stat-caption,
-body.body--dark .users-page__roadmap-description {
+body.body--dark .users-page__filters span {
   color: rgba(255, 255, 255, 0.7);
 }
 
-body.body--dark .users-page__role-item {
-  background: rgba(244, 235, 255, 0.1);
-  border-color: rgba(244, 235, 255, 0.18);
+body.body--dark .users-page__cell-value {
+  color: rgba(255, 255, 255, 0.9);
 }
 
-@media (max-width: 640px) {
-  .users-page__card-head {
+@media (max-width: 768px) {
+  .users-page__filters-head {
     flex-direction: column;
-    align-items: stretch;
+    align-items: flex-start;
   }
 
-  .users-page__cta {
-    flex-direction: column;
-    align-items: stretch;
+  .app-actions-bar {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .users-page__filters-footer {
+    justify-content: stretch;
+  }
+
+  .users-page__filters-footer > * {
+    width: 100%;
+  }
+
+  .users-page__cell-label {
+    display: block;
   }
 }
 </style>
