feat(header): mantem header com as informacoes fixas

src/components/layout/DefaultHeaderPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="q-pa-sm">
     <q-breadcrumbs
       v-if="displayBreadcrumbs != null"
       class="q-mb-xs text-secondary flex items-center"
@@ -45,6 +45,66 @@
         class="flex items-center q-pr-sm"
         :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
       >
+        <div class="flex items-center no-wrap" style="gap: 12px">
+          <q-select
+            v-if="$q.screen.gt.xs"
+            v-model="selectedUnit"
+            dense
+            :options="[]"
+            label="Unidade"
+            style="width: 250px; flex-shrink: 0"
+            color="secondary"
+            hide-dropdown-icon
+          >
+            <template #append>
+              <q-icon name="mdi-map-marker-outline" color="secondary" />
+            </template>
+          </q-select>
+
+          <div
+            class="flex items-center no-wrap q-gutter-x-md q-px-sm q-ml-md"
+            style="flex-shrink: 0"
+          >
+            <q-img src="icons/user-icon.jpg" class="avatar-circle" />
+
+            <div
+              v-if="$q.screen.gt.xs"
+              class="column q-gutter-y-none"
+              style="white-space: nowrap"
+            >
+              <span class="text-body2 text-center">{{ user?.name }}</span>
+            </div>
+          </div>
+
+          <template v-if="$q.screen.gt.sm && lastLoginFormatted">
+            <q-separator
+              vertical
+              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 text-primary text-center"
+                >Ultimo acesso</span
+              >
+              <span class="text-caption text-primary text-center">{{
+                lastLoginFormatted
+              }}</span>
+            </div>
+          </template>
+
+          <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>
         <slot name="after" />
       </div>
     </div>
@@ -53,9 +113,10 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { userStore } from "src/stores/user";
 
 const { title, breadcrumbs } = defineProps({
   title: {
@@ -72,6 +133,24 @@ const { title, breadcrumbs } = defineProps({
   },
 });
 
+const store = userStore();
+const user = computed(() => store.user);
+const selectedUnit = ref(null);
+
+const lastLoginFormatted = computed(() => {
+  const raw = store.user?.last_login_at;
+  if (!raw) return null;
+  const d = new Date(raw.replace(" ", "T") + "Z");
+  return new Intl.DateTimeFormat("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "America/Sao_Paulo",
+  }).format(d);
+});
+
 const route = useRoute();
 const { t } = useI18n();
 
@@ -107,3 +186,12 @@ const displayBreadcrumbs = computed(() => {
   return null;
 });
 </script>
+
+<style scoped>
+.avatar-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+</style>

src/pages/dashboard/DashboardPage.vue

@@ -1,69 +1,6 @@
 <template>
   <div>
-    <DefaultHeaderPage show-filter-icon class="q-pa-sm" title="Dashboard">
-      <template #after>
-        <div class="flex items-center no-wrap" style="gap: 12px">
-          <q-select
-            v-if="$q.screen.gt.xs"
-            v-model="selectedUnit"
-            dense
-            :options="[]"
-            label="Unidade"
-            style="width: 250px; flex-shrink: 0"
-            color="secondary"
-            hide-dropdown-icon
-          >
-            <template #append>
-              <q-icon name="mdi-map-marker-outline" color="secondary" />
-            </template>
-          </q-select>
-
-          <div
-            class="flex items-center no-wrap q-gutter-x-md q-px-sm q-ml-md"
-            style="flex-shrink: 0"
-          >
-            <q-img src="icons/user-icon.jpg" class="avatar-circle" />
-
-            <div
-              v-if="$q.screen.gt.xs"
-              class="column q-gutter-y-none"
-              style="white-space: nowrap"
-            >
-              <span class="text-body2 text-center">{{ user?.name }}</span>
-            </div>
-          </div>
-
-          <template v-if="$q.screen.gt.sm && lastLoginFormatted">
-            <q-separator
-              vertical
-              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 text-primary text-center"
-                >Ultimo acesso</span
-              >
-              <span class="text-caption text-primary text-center">{{
-                lastLoginFormatted
-              }}</span>
-            </div>
-          </template>
-
-          <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>
+    <DefaultHeaderPage show-filter-icon title="Dashboard" />
 
     <div class="q-pa-sm">
       <div class="filter-row">
@@ -257,10 +194,9 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
-import { userStore } from "src/stores/user";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DashboardStatCard from "src/components/charts/DashboardStatCard.vue";
 import DashboardChartCard from "src/components/charts/DashboardChartCard.vue";
@@ -276,23 +212,7 @@ import TicketsAbertoDialog from "src/pages/dashboard/components/TicketsAbertoDia
 const { t } = useI18n();
 
 const $q = useQuasar();
-const store = userStore();
-
-const user = computed(() => store.user);
-
-const lastLoginFormatted = computed(() => {
-  const raw = store.user?.last_login_at;
-  if (!raw) return null;
-  const d = new Date(raw.replace(" ", "T") + "Z");
-  return new Intl.DateTimeFormat("pt-BR", {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    timeZone: "America/Sao_Paulo",
-  }).format(d);
-});
+
 const isLoading = ref(true);
 
 const openAlunosDialog = () => {
@@ -318,7 +238,6 @@ const openEstoqueProdutosDialog = () => {
 const openTicketsAbertoDialog = () => {
   $q.dialog({ component: TicketsAbertoDialog });
 };
-const selectedUnit = ref(null);
 const defaultPeriod = ref("month");
 const defaultEventId = ref(1);
 
@@ -559,13 +478,6 @@ onMounted(async () => {
   gap: 16px;
 }
 
-.avatar-circle {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
 .stat-cards-row {
   display: flex;
   flex-wrap: nowrap;

src/router/routes/franchisee.route.js

@@ -15,6 +15,10 @@ export default [
           name: "DashboardPage",
           title: "Dashboard",
         },
+        {
+          name: "FranchiseePage",
+          title: "Franqueados"
+        }
       ],
     },
   },