|
|
@@ -1,6 +1,33 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <DefaultHeaderPage />
|
|
|
+ <DefaultHeaderPage class="q-pa-sm">
|
|
|
+ <template #after>
|
|
|
+ <div class="flex items-center no-wrap" style="gap: 12px">
|
|
|
+ <template v-if="$q.screen.gt.sm">
|
|
|
+ <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"
|
|
|
+ >16/02/2026, 14:16</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>
|
|
|
|
|
|
<div class="q-pa-md">
|
|
|
<!-- Row 1: Stats -->
|
|
|
@@ -8,12 +35,18 @@
|
|
|
<div class="col-12 col-sm-6 col-lg-3">
|
|
|
<q-card flat bordered>
|
|
|
<q-card-section class="row justify-between items-start q-pb-none">
|
|
|
- <span class="text-caption text-grey-6">Total alunos (contratos ativos)</span>
|
|
|
+ <span class="text-caption text-grey-6"
|
|
|
+ >Total alunos (contratos ativos)</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-account-multiple" color="grey-4" size="sm" />
|
|
|
</q-card-section>
|
|
|
<q-card-section class="q-pt-sm">
|
|
|
<div class="text-h5 text-bold">0</div>
|
|
|
- <q-badge color="orange" class="q-mt-sm q-pa-xs" style="font-size: 11px">
|
|
|
+ <q-badge
|
|
|
+ color="orange"
|
|
|
+ class="q-mt-sm q-pa-xs"
|
|
|
+ style="font-size: 11px"
|
|
|
+ >
|
|
|
0 ativos
|
|
|
</q-badge>
|
|
|
</q-card-section>
|
|
|
@@ -28,7 +61,9 @@
|
|
|
</q-card-section>
|
|
|
<q-card-section class="q-pt-sm">
|
|
|
<div class="text-h5 text-bold">R$ 0,00</div>
|
|
|
- <div class="text-caption text-grey-5 q-mt-sm">0 pagamentos pendentes</div>
|
|
|
+ <div class="text-caption text-grey-5 q-mt-sm">
|
|
|
+ 0 pagamentos pendentes
|
|
|
+ </div>
|
|
|
</q-card-section>
|
|
|
</q-card>
|
|
|
</div>
|
|
|
@@ -54,7 +89,9 @@
|
|
|
</q-card-section>
|
|
|
<q-card-section class="q-pt-sm">
|
|
|
<div class="text-h5 text-bold">0</div>
|
|
|
- <div class="text-caption text-grey-5 q-mt-sm">Fortaleça seus relacionamentos</div>
|
|
|
+ <div class="text-caption text-grey-5 q-mt-sm">
|
|
|
+ Fortaleça seus relacionamentos
|
|
|
+ </div>
|
|
|
</q-card-section>
|
|
|
</q-card>
|
|
|
</div>
|
|
|
@@ -66,11 +103,16 @@
|
|
|
<div class="col-12 col-md-5">
|
|
|
<q-card flat bordered style="height: 280px">
|
|
|
<q-card-section class="row justify-between items-center q-pb-xs">
|
|
|
- <span class="text-subtitle2 text-weight-medium">Faturamento Serviço / Materiais</span>
|
|
|
+ <span class="text-subtitle2 text-weight-medium"
|
|
|
+ >Faturamento Serviço / Materiais</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-book-open-outline" color="grey-5" />
|
|
|
</q-card-section>
|
|
|
<q-separator />
|
|
|
- <q-card-section style="height: calc(100% - 57px)" class="q-pt-sm q-px-sm">
|
|
|
+ <q-card-section
|
|
|
+ style="height: calc(100% - 57px)"
|
|
|
+ class="q-pt-sm q-px-sm"
|
|
|
+ >
|
|
|
<Bar :data="faturamentoData" :options="faturamentoOptions" />
|
|
|
</q-card-section>
|
|
|
</q-card>
|
|
|
@@ -80,7 +122,9 @@
|
|
|
<div class="col-12 col-md-4">
|
|
|
<q-card flat bordered style="height: 280px">
|
|
|
<q-card-section class="row justify-between items-center q-pb-xs">
|
|
|
- <span class="text-subtitle2 text-weight-medium">Contratos Ativos</span>
|
|
|
+ <span class="text-subtitle2 text-weight-medium"
|
|
|
+ >Contratos Ativos</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-trending-up" color="grey-5" />
|
|
|
</q-card-section>
|
|
|
<q-separator />
|
|
|
@@ -107,7 +151,9 @@
|
|
|
<div class="col-12 col-md-3">
|
|
|
<q-card flat bordered style="height: 280px">
|
|
|
<q-card-section class="row justify-between items-center q-pb-xs">
|
|
|
- <span class="text-subtitle2 text-weight-medium">Atalhos rápidos</span>
|
|
|
+ <span class="text-subtitle2 text-weight-medium"
|
|
|
+ >Atalhos rápidos</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-apps" color="grey-5" />
|
|
|
</q-card-section>
|
|
|
<q-separator />
|
|
|
@@ -144,11 +190,16 @@
|
|
|
<div class="col-12 col-md-4">
|
|
|
<q-card flat bordered style="height: 320px">
|
|
|
<q-card-section class="row justify-between items-center q-pb-xs">
|
|
|
- <span class="text-subtitle2 text-weight-medium">Matrículas por Período</span>
|
|
|
+ <span class="text-subtitle2 text-weight-medium"
|
|
|
+ >Matrículas por Período</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-book-open-outline" color="grey-5" />
|
|
|
</q-card-section>
|
|
|
<q-separator />
|
|
|
- <q-card-section style="height: calc(100% - 57px)" class="q-pt-sm q-px-sm">
|
|
|
+ <q-card-section
|
|
|
+ style="height: calc(100% - 57px)"
|
|
|
+ class="q-pt-sm q-px-sm"
|
|
|
+ >
|
|
|
<Bar
|
|
|
:data="matriculasData"
|
|
|
:options="matriculasOptions"
|
|
|
@@ -162,7 +213,9 @@
|
|
|
<div class="col-12 col-md-4">
|
|
|
<q-card flat bordered style="height: 320px">
|
|
|
<q-card-section class="row justify-between items-center q-pb-xs">
|
|
|
- <span class="text-subtitle2 text-weight-medium">Aniversariantes do Mês</span>
|
|
|
+ <span class="text-subtitle2 text-weight-medium"
|
|
|
+ >Aniversariantes do Mês</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-gift-outline" color="grey-5" />
|
|
|
</q-card-section>
|
|
|
<q-separator />
|
|
|
@@ -173,9 +226,19 @@
|
|
|
<q-separator />
|
|
|
<div style="height: calc(100% - 105px); overflow-y: auto">
|
|
|
<q-list separator>
|
|
|
- <q-item v-for="(pessoa, i) in aniversariantes" :key="i" dense class="q-py-sm">
|
|
|
+ <q-item
|
|
|
+ v-for="(pessoa, i) in aniversariantes"
|
|
|
+ :key="i"
|
|
|
+ dense
|
|
|
+ class="q-py-sm"
|
|
|
+ >
|
|
|
<q-item-section avatar>
|
|
|
- <q-avatar :color="pessoa.color" text-color="white" size="34px" class="text-caption text-bold">
|
|
|
+ <q-avatar
|
|
|
+ :color="pessoa.color"
|
|
|
+ text-color="white"
|
|
|
+ size="34px"
|
|
|
+ class="text-caption text-bold"
|
|
|
+ >
|
|
|
{{ pessoa.nome[0] }}
|
|
|
</q-avatar>
|
|
|
</q-item-section>
|
|
|
@@ -184,8 +247,22 @@
|
|
|
</q-item-section>
|
|
|
<q-item-section side>
|
|
|
<div class="row">
|
|
|
- <q-btn flat dense round icon="mdi-whatsapp" color="green" size="sm" />
|
|
|
- <q-btn flat dense round icon="mdi-email-outline" color="grey-6" size="sm" />
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ dense
|
|
|
+ round
|
|
|
+ icon="mdi-whatsapp"
|
|
|
+ color="green"
|
|
|
+ size="sm"
|
|
|
+ />
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ dense
|
|
|
+ round
|
|
|
+ icon="mdi-email-outline"
|
|
|
+ color="grey-6"
|
|
|
+ size="sm"
|
|
|
+ />
|
|
|
</div>
|
|
|
</q-item-section>
|
|
|
</q-item>
|
|
|
@@ -198,7 +275,9 @@
|
|
|
<div class="col-12 col-md-4">
|
|
|
<q-card flat bordered style="height: 320px">
|
|
|
<q-card-section class="row justify-between items-center q-pb-xs">
|
|
|
- <span class="text-subtitle2 text-weight-medium">Feriados do mês</span>
|
|
|
+ <span class="text-subtitle2 text-weight-medium"
|
|
|
+ >Feriados do mês</span
|
|
|
+ >
|
|
|
<q-icon name="mdi-calendar-outline" color="grey-5" />
|
|
|
</q-card-section>
|
|
|
<q-separator />
|
|
|
@@ -224,7 +303,9 @@
|
|
|
>
|
|
|
{{ feriado.dia }}
|
|
|
</q-badge>
|
|
|
- <div class="text-caption q-mt-xs text-center">{{ feriado.nome }}</div>
|
|
|
+ <div class="text-caption q-mt-xs text-center">
|
|
|
+ {{ feriado.nome }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</q-card-section>
|
|
|
@@ -263,7 +344,20 @@ ChartJS.register(
|
|
|
|
|
|
// ── Faturamento Serviço / Materiais ───────────────────────────────────────────
|
|
|
const faturamentoData = ref({
|
|
|
- labels: ["17/02", "18/02", "19/02", "20/02", "21/02", "22/02", "23/02", "24/02", "25/02", "26/02", "27/02", "28/02"],
|
|
|
+ labels: [
|
|
|
+ "17/02",
|
|
|
+ "18/02",
|
|
|
+ "19/02",
|
|
|
+ "20/02",
|
|
|
+ "21/02",
|
|
|
+ "22/02",
|
|
|
+ "23/02",
|
|
|
+ "24/02",
|
|
|
+ "25/02",
|
|
|
+ "26/02",
|
|
|
+ "27/02",
|
|
|
+ "28/02",
|
|
|
+ ],
|
|
|
datasets: [
|
|
|
{
|
|
|
label: "Serviços",
|
|
|
@@ -301,8 +395,16 @@ const gaugeData = ref({
|
|
|
datasets: [
|
|
|
{
|
|
|
backgroundColor: [
|
|
|
- "#00a550", "#4dbb7e", "#9ad2ad", "#cce156",
|
|
|
- "#fff100", "#ffbe00", "#ff8c00", "#FC3D23", "#D01616", "#8A0000",
|
|
|
+ "#00a550",
|
|
|
+ "#4dbb7e",
|
|
|
+ "#9ad2ad",
|
|
|
+ "#cce156",
|
|
|
+ "#fff100",
|
|
|
+ "#ffbe00",
|
|
|
+ "#ff8c00",
|
|
|
+ "#FC3D23",
|
|
|
+ "#D01616",
|
|
|
+ "#8A0000",
|
|
|
],
|
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
needleValue: 7,
|
|
|
@@ -362,8 +464,22 @@ const matriculasData = ref({
|
|
|
{
|
|
|
label: "Matrículas",
|
|
|
data: [120, 200, 150, 80, 70, 110],
|
|
|
- backgroundColor: ["#2196F3", "#F44336", "#9C27B0", "#FFC107", "#212121", "#009688"],
|
|
|
- borderColor: ["#2196F3", "#F44336", "#9C27B0", "#FFC107", "#212121", "#009688"],
|
|
|
+ backgroundColor: [
|
|
|
+ "#2196F3",
|
|
|
+ "#F44336",
|
|
|
+ "#9C27B0",
|
|
|
+ "#FFC107",
|
|
|
+ "#212121",
|
|
|
+ "#009688",
|
|
|
+ ],
|
|
|
+ borderColor: [
|
|
|
+ "#2196F3",
|
|
|
+ "#F44336",
|
|
|
+ "#9C27B0",
|
|
|
+ "#FFC107",
|
|
|
+ "#212121",
|
|
|
+ "#009688",
|
|
|
+ ],
|
|
|
borderWidth: 1,
|
|
|
borderRadius: 2,
|
|
|
},
|
ebagabee
