ajuste login parceiro

src/components/layout/LeftMenuLayout.vue

@@ -56,7 +56,7 @@
                 v-if="item.type === 'single'"
                 v-ripple
                 clickable
-                :exact="item.name === 'HomePage'"
+                :exact="item.name === 'ParceiroHomePage'"
                 exact-active-class="menu-selected"
                 active-class="menu-selected"
                 :to="{ name: item.name }"

src/components/layout/LeftMenuLayoutAdministrador.vue

@@ -24,7 +24,7 @@
                 v-if="item.type === 'single'"
                 v-ripple
                 clickable
-                :exact="item.name === 'HomePage'"
+                :exact="item.name === 'ParceiroHomePage'"
                 exact-active-class="menu-selected"
                 active-class="menu-selected"
                 :to="{ name: item.name }"

src/components/layout/LeftMenuLayoutAssociado.vue

@@ -25,7 +25,7 @@
                 v-if="item.type === 'single'"
                 v-ripple
                 clickable
-                :exact="item.name === 'HomePage'"
+                :exact="item.name === 'ParceiroHomePage'"
                 exact-active-class="menu-selected"
                 active-class="menu-selected"
                 :to="{ name: item.name }"

src/components/layout/LeftMenuLayoutMobile.vue

@@ -29,7 +29,7 @@
                 clickable
                 exact-active-class="menu-selected"
                 active-class="menu-selected"
-                :exact="item.name == 'HomePage'"
+                :exact="item.name == 'ParceiroHomePage'"
                 :to="{ name: item.name }"
               >
                 <q-item-section avatar>

src/components/layout/LeftMenuLayoutParceiro.vue

@@ -23,7 +23,7 @@
                 v-if="item.type === 'single'"
                 v-ripple
                 clickable
-                :exact="item.name === 'HomePage'"
+                :exact="item.name === 'ParceiroHomePage'"
                 exact-active-class="menu-selected"
                 active-class="menu-selected"
                 :to="{ name: item.name }"

src/pages/login/LoginPage.vue

@@ -114,8 +114,8 @@ const userTypes = [
 const getRedirectByTipo = (tipo) => {
   if (tipo === "administrador") return { name: "DashboardPage" };
   if (tipo === "associado")     return { name: "CarteirinhaPage" };
-  if (tipo === "parceiro")      return { name: "HomePage" };
-  return { name: "HomePage" };
+  if (tipo === "parceiro")      return { name: "ParceiroHomePage" };
+  return { name: "DashboardPage" };
 };
 
 const {

src/pages/parceiros-convenios/ValidarCarteirinhaPage.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <DefaultHeaderPage />
+
+    <div class="q-pa-md flex row q-gutter-sm">
+      <q-card
+        flat
+        class="associado-card"
+        :class="isVertical ? 'card-vertical' : 'card-horizontal'"
+      >
+        <div class="card-logo-row text-center">
+          <img :src="LogoSerPratiParceiro" class="card-logo" alt="SerPrati" />
+        </div>
+
+        <div class="card-body" :class="isVertical ? 'card-body--vertical' : 'card-body--horizontal'">
+          <q-avatar
+            class="card-avatar"
+            :size="isVertical ? '100px' : '76px'"
+          >
+            <img v-if="user?.avatar" :src="user.avatar" />
+            <q-icon v-else name="mdi-account" color="white" :size="isVertical ? '64px' : '40px'" />
+          </q-avatar>
+
+          <template v-if="!isVertical">
+            <div class="card-info">
+              <div class="card-info__row">
+                <span class="card-info__label">{{ $t('common.terms.name') }}</span>
+                <span class="card-info__value">{{ user?.name ?? '—' }}</span>
+              </div>
+              <div class="card-info__row q-pt-sm">
+                <span class="card-info__label">{{ $t('common.terms.cpf') }}</span>
+                <span class="card-info__value">{{ user?.cpf ?? '—' }}</span>
+              </div>
+              <div class="card-info__row q-pt-sm">
+                <span class="card-info__label">{{ $t('associado.registration') }}</span>
+                <span class="card-info__value">{{ user?.registration ?? '—' }}</span>
+              </div>
+            </div>
+            <div class="card-qr column">
+              <canvas v-if="qrReady" ref="qrCanvas" />
+              <q-spinner v-else color="white" size="48px" />
+              <div v-if="user?.expiry_date" class="card-info__row q-pt-sm text-right">
+                <span class="card-info__label text-right">{{ $t('associado.validity') }}</span>
+                <span class="card-info__value">{{ user.expiry_date }}</span>
+              </div>
+            </div>
+          </template>
+
+          <div v-if="isVertical" class="card-body__vertical-content">
+            <div class="card-info card-info--vertical">
+              <div class="card-info__row">
+                <span class="card-info__label">{{ $t('common.terms.name') }}</span>
+                <span class="card-info__value">{{ user?.name ?? '—' }}</span>
+              </div>
+              <div class="card-info__row q-pt-xs">
+                <span class="card-info__label">{{ $t('common.terms.cpf') }}</span>
+                <span class="card-info__value">{{ user?.cpf ?? '—' }}</span>
+              </div>
+              <div class="card-info__row q-pt-xs">
+                <span class="card-info__label">{{ $t('associado.registration') }}</span>
+                <span class="card-info__value">{{ user?.registration ?? '—' }}</span>
+              </div>
+              <div class="card-info__row q-pt-xs">
+                <span class="card-info__label">{{ $t('associado.validity') }}</span>
+                <span class="card-info__value">{{ user?.expiry_date ?? '—' }}</span>
+              </div>
+            </div>
+            <canvas v-if="qrReady" ref="qrCanvas" class="card-qr__canvas" />
+            <q-spinner v-else color="white" size="48px" />
+          </div>
+        </div>
+      </q-card>
+      <div class="q-mt-auto justify-end">
+        <q-btn
+          round
+          flat
+          :icon="isVertical ? 'mdi-phone-rotate-landscape' : 'mdi-phone-rotate-portrait'"
+          color="violet-normal"
+          size="sm"
+          class="self-start"
+          :title="isVertical ? $t('associado.horizontal') : $t('associado.vertical')"
+          @click="isVertical = !isVertical"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, useTemplateRef, watch, nextTick } from "vue";
+import QRCode from "qrcode";
+import { userStore } from "src/stores/user";
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import LogoSerPratiParceiro from "src/assets/logo_serprati_parceiro.svg";
+
+const store = userStore();
+const user = ref(null);
+const isVertical = ref(false);
+const qrCanvas = useTemplateRef("qrCanvas");
+const qrReady = ref(false);
+
+const QR_SIZE_HORIZONTAL = 90;
+const QR_SIZE_VERTICAL   = 110;
+
+const generateQR = async () => {
+  if (!user.value?.cpf && !user.value?.registration) return;
+  await nextTick();
+  const canvas = qrCanvas.value instanceof Array ? qrCanvas.value[0] : qrCanvas.value;
+  if (!canvas) return;
+  const qrData = `CPF:${user.value.cpf ?? ""}|MAT:${user.value.registration ?? ""}`;
+  const size = isVertical.value ? QR_SIZE_VERTICAL : QR_SIZE_HORIZONTAL;
+  await QRCode.toCanvas(canvas, qrData, { width: size, margin: 1, color: { dark: "#ffffff", light: "#661d75" } });
+};
+
+watch(isVertical, async () => {
+  await nextTick();
+  await generateQR();
+});
+
+onMounted(async () => {
+  await store.fetchUser();
+  user.value = store.user;
+  qrReady.value = true;
+  await generateQR();
+});
+</script>
+
+<style lang="scss" scoped>
+@use "src/css/quasar.variables.scss" as vars;
+
+.associado-card {
+  border-radius: 16px;
+  background: linear-gradient(180deg, #661D75 0%, #BF36DB 100%);
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(77, 22, 88, 0.35);
+  color: vars.$neutral-light;
+
+  .card-logo-row {
+    .card-logo {
+      height: 65px;
+    }
+  }
+
+  .card-body {
+    padding: 8px 16px 16px;
+    display: flex;
+    gap: 12px;
+
+    &--horizontal {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &--vertical {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+
+  .card-avatar {
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    background: rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+  }
+
+  .card-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .card-info__label {
+      font-size: 11px;
+      opacity: 0.8;
+    }
+
+    .card-info__value {
+      font-size: 15px;
+      font-weight: 600;
+    }
+    &--vertical {
+      width: 100%;
+      align-items: flex-start;
+      text-align: left;
+
+    }
+
+    &__name {
+      font-size: 14px;
+      font-weight: 600;
+      color: vars.$neutral-light;
+      margin-bottom: 4px;
+    }
+
+    &__row {
+      display: flex;
+      flex-direction: column;
+      line-height: 1.2;
+    }
+
+    &__label {
+      font-size: 9px;
+      opacity: 0.75;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+    }
+
+    &__value {
+      font-size: 11px;
+      font-weight: 500;
+      color: vars.$neutral-light;
+    }
+  }
+
+  .card-qr {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    canvas {
+      border-radius: 6px;
+    }
+  }
+
+  .card-body__vertical-content {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .card-qr__canvas {
+    border-radius: 6px;
+    flex-shrink: 0;
+  }
+
+  &.card-horizontal {
+    width: 360px;
+    max-width: calc(100vw - 32px);
+  }
+
+  &.card-vertical {
+    width: 260px;
+    max-width: calc(100vw - 32px);
+  }
+}
+</style>

src/router/routes/parceiro-admin.route.js

@@ -42,4 +42,30 @@ export default [
       ],
     },
   },
+  {
+    path: "/parceiros-convenios/home",
+    name: "ParceiroHomePage",
+    component: () => import("pages/parceiros-convenios/ParceiroHomePage.vue"),
+    meta: {
+      title: { value: "parceiro.home", translate: true },
+      requireAuth: true,
+      requiredPermission: "parceiro",
+      breadcrumbs: [
+        { name: "ParceiroHomePage", title: "parceiro.home", translate: true },
+      ],
+    },
+  },
+  {
+    path: "/parceiros-convenios/validar-carteirinha",
+    name: "ValidarCarteirinhaPage",
+    component: () => import("pages/parceiros-convenios/ValidarCarteirinhaPage.vue"),
+    meta: {
+      title: { value: "parceiro.home", translate: true },
+      requireAuth: true,
+      requiredPermission: "parceiro",
+      breadcrumbs: [
+        { name: "ValidarCarteirinhaPage", title: "parceiro.home", translate: true },
+      ],
+    },
+  },
 ];