feat: adiciona tamanho fixo de largura para padronizar

src/pages/dashboard/DashboardPage.vue

@@ -250,6 +250,8 @@
           icon="mdi-calendar-outline"
           value="2"
           subtitle="Estável"
+          clickable
+          @click="openTicketsAbertoDialog"
         />
       </div>
     </div>
@@ -275,6 +277,7 @@ import ContratosCongeladosDialog from "src/pages/dashboard/components/ContratosC
 import ContratosCanceladosDialog from "src/pages/dashboard/components/ContratosCanceladosDialog.vue";
 import FrequenciaMediaDialog from "src/pages/dashboard/components/FrequenciaMediaDialog.vue";
 import EstoqueProdutosDialog from "src/pages/dashboard/components/EstoqueProdutosDialog.vue";
+import TicketsAbertoDialog from "src/pages/dashboard/components/TicketsAbertoDialog.vue";
 
 const { t } = useI18n();
 
@@ -300,6 +303,10 @@ const openFrequenciaMediaDialog = () => {
 const openEstoqueProdutosDialog = () => {
   $q.dialog({ component: EstoqueProdutosDialog });
 };
+
+const openTicketsAbertoDialog = () => {
+  $q.dialog({ component: TicketsAbertoDialog });
+};
 const selectedUnit = ref(null);
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);

src/pages/dashboard/components/AlunosAtivosDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card style="width: 580px; max-width: 95vw; border-radius: 12px">
+    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
       <q-bar class="bg-transparent q-px-md" style="height: 55px">
         <span class="text-h6 text-dark" style="font-weight: 600"
           >Alunos Ativos</span

src/pages/dashboard/components/ContratosCanceladosDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card style="width: 580px; max-width: 95vw; border-radius: 12px">
+    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
       <q-bar class="bg-transparent q-px-md" style="height: 55px">
         <span class="text-h6 text-dark" style="font-weight: 600"
           >Contratos Cancelados</span

src/pages/dashboard/components/ContratosCongeladosDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card style="width: 580px; max-width: 95vw; border-radius: 12px">
+    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
       <q-bar class="bg-transparent q-px-md" style="height: 55px">
         <span class="text-h6 text-dark" style="font-weight: 600"
           >Contratos Congelados</span

src/pages/dashboard/components/EstoqueProdutosDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card style="width: 600px; max-width: 95vw; border-radius: 12px">
+    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
       <q-bar class="bg-transparent q-px-md" style="height: 55px">
         <span class="text-h6 text-dark" style="font-weight: 600"
           >Estoque de Produtos</span

src/pages/dashboard/components/FrequenciaMediaDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card style="width: 520px; max-width: 95vw; border-radius: 12px">
+    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
       <q-bar class="bg-transparent q-px-md" style="height: 55px">
         <span class="text-h6 text-dark" style="font-weight: 600"
           >Frequência Média</span

src/pages/dashboard/components/TicketsAbertoDialog.vue

@@ -0,0 +1,163 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
+      <q-bar class="bg-transparent q-px-md" style="height: 55px">
+        <span class="text-h6 text-dark" style="font-weight: 600"
+          >Tickets em Aberto</span
+        >
+        <q-space />
+        <q-btn dense flat icon="mdi-close" @click="onDialogCancel" />
+      </q-bar>
+
+      <q-card-section class="q-pt-none q-pb-md q-px-md">
+        <q-card flat bordered style="border-radius: 8px">
+          <q-card-section class="q-pb-sm">
+            <q-input
+              v-model="search"
+              dense
+              borderless
+              placeholder="Busque por ticket, nome, data , setor"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" color="grey-6" />
+              </template>
+            </q-input>
+          </q-card-section>
+
+          <q-separator />
+
+          <div class="list-header q-px-md q-py-xs">
+            <span class="text-caption text-grey-7">Ticket</span>
+            <span class="text-caption text-grey-7">Prioridade</span>
+            <span class="text-caption text-grey-7">Data</span>
+            <span class="text-caption text-grey-7">Setor</span>
+            <span class="text-caption text-grey-7">Status</span>
+            <span class="text-caption text-grey-7">Ações</span>
+          </div>
+
+          <q-separator />
+
+          <div style="max-height: 320px; overflow-y: auto">
+            <template v-for="(ticket, index) in filteredTickets" :key="ticket.id">
+              <div
+                class="list-row q-px-md q-py-sm"
+                :class="{ 'row-selected': index === selectedIndex }"
+                @click="selectedIndex = index"
+              >
+                <span class="text-body2 text-dark">{{ ticket.numero }}</span>
+                <q-badge
+                  :label="ticket.prioridade"
+                  :color="prioridadeColor(ticket.prioridade)"
+                  style="border-radius: 8px; font-size: 11px; padding: 4px 8px; width: max-content"
+                />
+                <span class="text-caption text-dark">{{ ticket.data }}</span>
+                <span class="text-caption text-dark">{{ ticket.setor }}</span>
+                <q-badge
+                  :label="ticket.status"
+                  :color="statusColor(ticket.status)"
+                  style="border-radius: 8px; font-size: 11px; padding: 4px 8px; width: max-content"
+                />
+                <div class="row" style="gap: 6px">
+                  <q-btn
+                    flat
+                    dense
+                    icon="mdi-clipboard-outline"
+                    color="dark"
+                    style="border: 1px solid #ccc; border-radius: 6px; width: 30px; height: 30px"
+                  />
+                  <q-btn
+                    flat
+                    dense
+                    icon="mdi-delete-outline"
+                    color="dark"
+                    style="border: 1px solid #ccc; border-radius: 6px; width: 30px; height: 30px"
+                  />
+                </div>
+              </div>
+              <q-separator v-if="index < filteredTickets.length - 1" />
+            </template>
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useDialogPluginComponent } from "quasar";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
+
+const search = ref("");
+const selectedIndex = ref(0);
+
+const tickets = [
+  {
+    id: 1,
+    numero: "#12577",
+    prioridade: "Baixa",
+    data: "15/02/2026",
+    setor: "Financeiro",
+    status: "Não Resolvido",
+  },
+  {
+    id: 2,
+    numero: "#12578",
+    prioridade: "Alta",
+    data: "16/02/2026",
+    setor: "Comercial",
+    status: "Em Análise",
+  },
+];
+
+const prioridadeColor = (p) => {
+  if (p === "Alta") return "negative";
+  if (p === "Média") return "warning";
+  return "orange";
+};
+
+const statusColor = (s) => {
+  if (s === "Resolvido") return "positive";
+  if (s === "Em Análise") return "warning";
+  return "negative";
+};
+
+const filteredTickets = computed(() => {
+  if (!search.value) return tickets;
+  const q = search.value.toLowerCase();
+  return tickets.filter(
+    (t) =>
+      t.numero.toLowerCase().includes(q) ||
+      t.data.includes(q) ||
+      t.setor.toLowerCase().includes(q) ||
+      t.status.toLowerCase().includes(q),
+  );
+});
+</script>
+
+<style scoped>
+.list-header {
+  display: grid;
+  grid-template-columns: 90px 100px 110px 1fr 140px 90px;
+  align-items: center;
+}
+
+.list-row {
+  display: grid;
+  grid-template-columns: 90px 100px 110px 1fr 140px 90px;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.list-row:hover {
+  background-color: #f5f5f5;
+}
+
+.row-selected {
+  background-color: #b2dfdb !important;
+}
+</style>