feat: :sparkles: feat (dashboard-associado) Foi criado o frontend da pagina patnersdashboard

Foi desenvolvido o template completo da dashboard do parceiro seguindo o layout definido no Figma, incluindo estrutura visual dos cards, organização dos indicadores, responsividade, estilização personalizada e integração com o sistema de traduções da aplicação.

fase:dev | origin:escopo

src/api/dashboard.js

@@ -4,3 +4,8 @@ export const getDashboardStats = async () => {
   const { data } = await api.get("/dashboard/stats");
   return data.payload;
 };
+
+export const getPartnerDashboard = async () => {
+  const { data } = await api.get("/dashboard/partner");
+  return data.payload;
+};

src/i18n/locales/en.json

@@ -621,7 +621,16 @@
     "tab_contato": "Contact",
     "tab_endereco": "Address",
     "tab_horario": "Schedule & Contract",
-    "tab_servicos": "My Services"
+    "tab_servicos": "My Services",
+    "parceiro": {
+      "dashboard": {
+        "title": "Partner Portal",
+        "authorization": "Consultations for Authorization",
+        "scheduling": "Consultations for Scheduling",
+        "completed": "Completed Consultations",
+        "not_authorized": "Unauthorized Consultations"
+      }
+    }
   },
   "notification": {
     "new": "New notification",

src/i18n/locales/es.json

@@ -620,7 +620,16 @@
     "tab_contato": "Contacto",
     "tab_endereco": "Dirección",
     "tab_horario": "Horario y Contrato",
-    "tab_servicos": "Mis Servicios"
+    "tab_servicos": "Mis Servicios",
+    "parceiro": {
+      "dashboard": {
+        " title": "Portal del Socio",
+        "authorization": "Consultas para Autorización",
+        "scheduling": "Consultas para Agendamiento",
+        "completed": "Consultas Realizadas",
+        "not_authorized": "Consultas No Autorizadas"
+      }
+    }
   },
   "notification": {
     "new": "Nueva notificación",

src/i18n/locales/pt.json

@@ -621,7 +621,14 @@
     "tab_contato": "Contato",
     "tab_endereco": "Endereço",
     "tab_horario": "Horário e Contrato",
-    "tab_servicos": "Meus Serviços"
+    "tab_servicos": "Meus Serviços",
+    "dashboard": {
+      "title": "Portal do Parceiro",
+      "authorization": "Consultas para Autorização",
+      "scheduling": "Consultas para Agendamento",
+      "completed": "Consultas Realizadas",
+      "not_authorized": "Consultas Não Autorizadas"
+    }
   },
   "notification": {
     "new": "Nova notificação",
@@ -676,4 +683,4 @@
       "solicitacao": "Solicitação"
     }
   }
-}
+}

src/pages/parceiros-convenios/ParceiroHomePage.vue

@@ -1,12 +1,27 @@
 <template>
-  <div class="column flex-center flex-grow">
-    <span class="text-h4 text-primary q-mb-md">
-      {{ store.userTipo + ' ' + $t("common.ui.messages.welcome") }}
-    </span>
+  <div class="column flex-grow q-pa-md">
+    <PartnerDashboardStats :stats="stats" />
   </div>
 </template>
+
 <script setup>
-import { userStore } from "src/stores/user";
+import { ref, onMounted } from "vue";
+
+import PartnerDashboardStats from "src/pages/parceiros-convenios/components/PartnerDashboardStats.vue";
+import { getPartnerDashboard } from "src/api/dashboard";
+
+const stats = ref({
+  authorization: 0,
+  scheduling: 0,
+  completed: 0,
+  not_authorized: 0,
+});
 
-const store = userStore();
-</script>
+onMounted(async () => {
+  try {
+    stats.value = await getPartnerDashboard();
+  } catch (error) {
+    console.error(error);
+  }
+});
+</script>

src/pages/parceiros-convenios/components/PartnerDashboardStats.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="partner-dashboard">
+
+    <div class="dashboard-title-page">
+      {{ $t("parceiro.dashboard.title") }}
+    </div>
+
+    <div class="row q-col-gutter-sm">
+
+      <div class="col-12 col-md-6">
+        <q-card flat class="dashboard-card">
+          <q-card-section class="dashboard-content">
+
+            <q-icon
+              name="mdi-message-text-outline"
+              size="20px"
+              color="violet-normal"
+            />
+
+            <div class="q-mt-sm dashboard-number">
+              {{ stats.authorization }}
+            </div>
+
+            <div class="dashboard-label">
+              {{ $t("parceiro.dashboard.authorization") }}
+            </div>
+
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-12 col-md-6">
+        <q-card flat class="dashboard-card">
+          <q-card-section class="dashboard-content">
+
+            <q-icon
+              name="mdi-clock-outline"
+              size="20px"
+              color="violet-normal"
+            />
+
+            <div class="q-mt-sm dashboard-number">
+              {{ stats.scheduling }}
+            </div>
+
+            <div class="dashboard-label">
+              {{ $t("parceiro.dashboard.scheduling") }}
+            </div>
+
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-12 col-md-6">
+        <q-card flat class="dashboard-card">
+          <q-card-section class="dashboard-content">
+
+            <q-icon
+              name="mdi-account-group-outline"
+              size="20px"
+              color="violet-normal"
+            />
+
+            <div class="q-mt-sm dashboard-number">
+              {{ stats.completed }}
+            </div>
+
+            <div class="dashboard-label">
+              {{ $t("parceiro.dashboard.completed") }}
+            </div>
+
+          </q-card-section>
+        </q-card>
+      </div>
+
+      <div class="col-12 col-md-6">
+        <q-card flat class="dashboard-card">
+          <q-card-section class="dashboard-content">
+
+            <q-icon
+              name="mdi-alert-circle-outline"
+              size="20px"
+              color="violet-normal"
+            />
+
+            <div class="q-mt-sm dashboard-number">
+              {{ stats.not_authorized }}
+            </div>
+
+            <div class="dashboard-label">
+              {{ $t("parceiro.dashboard.not_authorized") }}
+            </div>
+
+          </q-card-section>
+        </q-card>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  stats: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.partner-dashboard {
+  width: 100%;
+}
+
+.dashboard-title-page {
+  font-size: 20px;
+  font-weight: 700;
+  color: #702082;
+  margin-bottom: 12px;
+}
+
+.dashboard-card {
+  border-radius: 6px;
+  background: white;
+}
+
+.dashboard-content {
+  padding: 10px 14px;
+}
+
+.dashboard-number {
+  font-size: 18px;
+  font-weight: 500;
+  color: #702082;
+  line-height: 1;
+}
+
+.dashboard-label {
+  font-size: 11px;
+  color: #555;
+  margin-top: 8px;
+}
+</style>