feat: adiciona header de dashboard

src/components/layout/DefaultHeaderPage.vue

@@ -43,7 +43,10 @@
           style="border-radius: 8px; padding: 2px"
         />
       </div>
-      <div>
+      <div
+        class="flex items-center q-pr-sm"
+        :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
+      >
         <slot name="after" />
       </div>
     </div>

src/pages/dashboard/DashboardPage.vue

@@ -2,15 +2,14 @@
   <div>
     <DefaultHeaderPage show-filter-icon>
       <template #after>
-        <div class="flex items-center q-gutter-sm no-wrap">
-          <!-- Oculta em xs -->
+        <div class="flex items-center no-wrap" style="gap: 12px">
           <q-select
+            v-if="$q.screen.gt.xs"
             v-model="selectedUnit"
-            outlined
             dense
             :options="[]"
             label="Unidade"
-            :style="$q.screen.gt.xs ? 'width: 210px; flex-shrink: 0' : 'display: none'"
+            style="width: 250px; flex-shrink: 0"
             color="secondary"
             label-color="secondary"
             hide-dropdown-icon
@@ -21,42 +20,54 @@
           </q-select>
 
           <div
-            class="flex items-center q-gutter-sm no-wrap"
+            class="flex items-center no-wrap q-gutter-x-md q-px-sm q-ml-md"
             style="flex-shrink: 0"
           >
-            <div class="avatar-circle bg-primary" />
-            <!-- Nome/cargo: oculta em xs -->
+            <q-img src="icons/user-icon.jpg" class="avatar-circle" />
+
             <div
               v-if="$q.screen.gt.xs"
-              class="column"
-              style="line-height: 1.2; white-space: nowrap"
+              class="column q-gutter-y-none"
+              style="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>
+              <span class="text-body2 text-center">Ana Laura</span>
+              <span
+                v-if="$q.screen.gt.sm"
+                class="text-overline text-center"
+                style="line-height: 1rem; font-weight: 400"
+                >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"
+              style="height: 36px; width: 2px; flex-shrink: 0"
+              color="dark"
             />
 
             <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>
+              <span class="text-caption text-grey-6 text-primary text-center"
+                >Ultimo acesso</span
+              >
+              <span class="text-caption text-primary text-center"
+                >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
+            class="flex items-center no-wrap"
+            style="gap: 2px; flex-shrink: 0"
+          >
+            <q-btn flat round dense icon="mdi-bell-badge" color="secondary" />
+            <q-btn flat round dense icon="mdi-account" color="secondary" />
+            <q-btn flat round dense icon="mdi-cog-outline" color="secondary" />
+          </div>
         </div>
       </template>
     </DefaultHeaderPage>