style: adiciona flex no wrap

src/components/layout/DefaultHeaderPage.vue

@@ -21,13 +21,27 @@
     </div>
 
     <div class="flex items-center justify-between">
-      <div class="column q-pl-xs" :class="$q.screen.lt.sm ? '' : 'q-pt-md'">
-        <span v-if="displayTitle" class="text-h4 text-primary q-mb-xs">
+      <div
+        class="flex items-center q-pl-xs"
+        :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
+      >
+        <span
+          v-if="displayTitle"
+          class="text-h6 text-primary text-weight-regular"
+        >
           {{ displayTitle }}
         </span>
         <div v-else style="width: 280px">
           <q-skeleton type="text" height="40px" />
         </div>
+        <q-icon
+          v-if="showFilterIcon"
+          name="mdi-filter-outline"
+          color="background"
+          size="sm"
+          class="q-ml-sm bg-primary"
+          style="border-radius: 8px; padding: 2px"
+        />
       </div>
       <div>
         <slot name="after" />
@@ -47,14 +61,14 @@ const { title, breadcrumbs } = defineProps({
     type: Object,
     default: null,
   },
-  description: {
-    type: Object,
-    default: null,
-  },
   breadcrumbs: {
     type: Object,
     default: null,
   },
+  showFilterIcon: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const route = useRoute();
@@ -77,23 +91,6 @@ const displayTitle = computed(() => {
   return null;
 });
 
-// const displayDescription = computed(() => {
-//   if (description) {
-//     if (description.translate) {
-//       return t(description.value);
-//     } else {
-//       return description.value;
-//     }
-//   } else if (route.meta?.description) {
-//     if (route.meta?.description.translate) {
-//       return t(route.meta?.description.value);
-//     } else {
-//       return route.meta?.description.value;
-//     }
-//   }
-//   return null;
-// });
-
 const displayBreadcrumbs = computed(() => {
   if (!breadcrumbs && breadcrumbs?.length <= 0) {
     return null;

src/pages/dashboard/DashboardPage.vue

@@ -1,13 +1,63 @@
 <template>
   <div>
-    <DefaultHeaderPage>
+    <DefaultHeaderPage show-filter-icon>
       <template #after>
-        <q-btn
-          outline
-          icon="mdi-calendar"
-          color="primary"
-          @click="showFilter"
-        />
+        <div class="flex items-center q-gutter-sm no-wrap">
+          <!-- Oculta em xs -->
+          <q-select
+            v-model="selectedUnit"
+            outlined
+            dense
+            :options="[]"
+            label="Unidade"
+            :style="$q.screen.gt.xs ? 'width: 210px; flex-shrink: 0' : 'display: none'"
+            color="secondary"
+            label-color="secondary"
+            hide-dropdown-icon
+          >
+            <template #append>
+              <q-icon name="mdi-map-marker-outline" color="secondary" />
+            </template>
+          </q-select>
+
+          <div
+            class="flex items-center q-gutter-sm no-wrap"
+            style="flex-shrink: 0"
+          >
+            <div class="avatar-circle bg-primary" />
+            <!-- Nome/cargo: oculta em xs -->
+            <div
+              v-if="$q.screen.gt.xs"
+              class="column"
+              style="line-height: 1.2; white-space: nowrap"
+            >
+              <span class="text-weight-bold text-body2">Ana Laura</span>
+              <!-- Cargo: oculta em sm também -->
+              <span v-if="$q.screen.gt.sm" class="text-caption text-grey-6">Gerente</span>
+            </div>
+          </div>
+
+          <!-- Separador e último acesso: oculta em sm e xs -->
+          <template v-if="$q.screen.gt.sm">
+            <q-separator
+              vertical
+              class="q-mx-xs"
+              style="height: 36px; flex-shrink: 0"
+            />
+
+            <div
+              class="column"
+              style="line-height: 1.2; white-space: nowrap; flex-shrink: 0"
+            >
+              <span class="text-caption text-grey-6">Ultimo acesso</span>
+              <span class="text-caption">16/02/2026, 14:16</span>
+            </div>
+          </template>
+
+          <q-btn flat round dense icon="mdi-bell-outline" />
+          <q-btn flat round dense icon="mdi-account-outline" />
+          <q-btn flat round dense icon="mdi-cog-outline" color="secondary" />
+        </div>
       </template>
     </DefaultHeaderPage>
     <q-expansion-item
@@ -206,6 +256,7 @@ const { t } = useI18n();
 
 const isLoading = ref(true);
 const filter = ref(false);
+const selectedUnit = ref(null);
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);
 
@@ -218,10 +269,6 @@ const eventParticipantsByCNPJAndCPF = ref({});
 const salesOverTimeLineChart = ref({});
 const eventSourcePieChart = ref({});
 
-const showFilter = () => {
-  filter.value = !filter.value;
-};
-
 const generateMockData = () => {
   const createMiniChartData = (currentTotal, percentage) => ({
     current_total: currentTotal,
@@ -378,4 +425,11 @@ onMounted(async () => {
 .gap {
   gap: 16px;
 }
+
+.avatar-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
 </style>