sfp_vue_franchisor_ginastica_cerebro/src/pages/dashboard/DashboardPage.vue

<template>
  <div>
    <DefaultHeaderPage
      title="Dashboard"
      :filter-open="showFilter"
      @show-filter="showFilter = !showFilter"
    />

    <div class="q-pa-sm">
      <div class="filter-row">
        <template v-if="showFilter">
          <!-- Unidade: ao selecionar, limpa o grupo -->
          <UnitSelect
            v-model="selectedUnit"
            dense
            label="Unidade"
            class="filter-item"
            color="secondary"
            @update:model-value="onUnitSelected"
          />

          <!-- Grupo: ao selecionar, limpa a unidade -->
          <GroupSelect
            v-model="selectedGroup"
            dense
            label="Grupo"
            class="filter-item"
            color="secondary"
            @update:model-value="onGroupSelected"
          />

          <DefaultSelect
            v-model="selectedPeriod"
            :options="periodOptions"
            option-value="value"
            option-label="label"
            emit-value
            map-options
            dense
            label="Selecione o Período"
            color="secondary"
            class="filter-item"
          />

          <template v-if="selectedPeriod === 'custom'">
            <DefaultInputDatePicker
              v-model="startDate"
              dense
              label="Data Inicial"
              color="secondary"
              class="filter-item"
            />

            <DefaultInputDatePicker
              v-model="endDate"
              dense
              label="Data Final"
              color="secondary"
              class="filter-item"
            />
          </template>
        </template>
      </div>

      <!-- Chip de contexto ativo -->
      <div v-if="showFilter && filterLabel" class="q-mt-xs q-ml-xs">
        <q-chip
          dense
          color="secondary"
          text-color="white"
          icon="mdi-filter"
          :label="filterLabel"
          removable
          @remove="clearFilters"
        />
      </div>
    </div>

    <div v-if="!isLoading" class="column gap q-pa-sm">
      <div class="stat-cards-row">
        <DashboardStatCard
          title="Total alunos (contratos ativos)"
          icon="mdi-account-multiple-outline"
          :value="totalStudents"
          :badge="`${activeContracts} ativos`"
          clickable
          @click="openActiveStudentsDialog"
        />
        <DashboardStatCard
          title="Contratos Congelados"
          icon="mdi-snowflake"
          :value="frozenContracts"
          subtitle="É hora de incentivar nossos alunos"
          clickable
          @click="openFrozenContractsDialog"
        />
        <DashboardStatCard
          title="Contratos Cancelados"
          icon="mdi-cancel"
          :value="cancelledContracts"
          subtitle="É hora de incentivar nossos alunos"
          clickable
          @click="openCancelledContractsDialog"
        />
        <DashboardStatCard
          title="Receita Geral"
          icon="mdi-currency-usd"
          value="R$ 0,00"
          subtitle="0 pagamentos pendentes"
        />
      </div>

      <div class="stat-cards-row">
        <DashboardStatCard
          title="Frequência Média"
          icon="mdi-account-multiple-outline"
          value="0%"
          clickable
          @click="openAverageAttendanceDialog"
        />
        <DashboardStatCard
          title="Estoque Geral de Produtos"
          icon="mdi-currency-usd"
          value="0"
          clickable
          @click="openProductStockDialog"
        />
        <DashboardStatCard
          title="Tarefas Pendentes"
          icon="mdi-draw"
          value="0"
          subtitle="Não deixe para amanhã"
        />
        <DashboardStatCard
          title="Tickets Abertos"
          icon="mdi-calendar-outline"
          value="0"
          subtitle="Estável"
          clickable
          @click="openTicketsDialog"
        />
      </div>

      <div class="charts-row">
        <DashboardChartCard title="Faturamento Serviço / Materiais">
          <GroupedBarChart
            :labels="faturamentoChart.labels"
            :datasets="faturamentoChart.datasets"
            label-y="R$"
            :tick-formatter="formatCurrencyTick"
            :tooltip-formatter="formatCurrencyTooltip"
            class="full-width full-height"
          />
        </DashboardChartCard>

        <DashboardChartCard title="Matrículas por Período">
          <GroupedBarChart
            :labels="matriculasChart.labels"
            :datasets="matriculasChart.datasets"
            :bar-radius="50"
            :show-datalabels="true"
            :max-bar-thickness="44"
            :category-percentage="0.6"
            :bar-percentage="0.85"
            class="full-width full-height"
          />
        </DashboardChartCard>

        <HolidaysCard />
        <BirthdaysCard :people="birthdays" />
      </div>
    </div>

    <div v-else class="flex flex-center full-width q-pa-xl">
      <q-spinner color="primary" size="50px" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
import DefaultInputDatePicker from "src/components/defaults/DefaultInputDatePicker.vue";
import UnitSelect from "src/components/selects/UnitSelect.vue";
import GroupSelect from "src/components/selects/GroupSelect.vue";
import DashboardStatCard from "src/components/charts/DashboardStatCard.vue";
import DashboardChartCard from "src/components/charts/DashboardChartCard.vue";
import GroupedBarChart from "src/components/charts/normal/GroupedBarChart.vue";
import BirthdaysCard from "src/components/charts/BirthdaysCard.vue";
import HolidaysCard from "src/components/charts/HolidaysCard.vue";
import ActiveStudentsDialog from "src/pages/dashboard/components/ActiveStudentsDialog.vue";
import FrozenContractsDialog from "src/pages/dashboard/components/FrozenContractsDialog.vue";
import CancelledContractsDialog from "src/pages/dashboard/components/CancelledContractsDialog.vue";
import AverageAttendanceDialog from "src/pages/dashboard/components/AverageAttendanceDialog.vue";
import ProductStockDialog from "src/pages/dashboard/components/ProductStockDialog.vue";
import OpenTicketsDialog from "src/pages/dashboard/components/OpenTicketsDialog.vue";
import { getStudentSummaryFranchisor } from "src/api/student";
import { getFranchisorContractSummary } from "src/api/student_contract";

useI18n(); // i18n instance kept for future use
const $q = useQuasar();

// ─── Loading state ───────────────────────────────────────────
const isLoading = ref(true);

// ─── Metric counters ─────────────────────────────────────────
const totalStudents    = ref(0);
const activeContracts  = ref(0);
const frozenContracts  = ref(0);
const cancelledContracts = ref(0);

// ─── Filter state ────────────────────────────────────────────
const showFilter    = ref(false);
const selectedUnit  = ref(null);   // { label, value } | null
const selectedGroup = ref(null);   // { label, value, unit_ids } | null
const selectedPeriod = ref("custom");
const startDate     = ref("");
const endDate       = ref("");

const periodOptions = [
  { label: "Hoje",         value: "today"  },
  { label: "Esta semana",  value: "week"   },
  { label: "Este mês",     value: "month"  },
  { label: "Este ano",     value: "year"   },
  { label: "Personalizado", value: "custom" },
];

/**
 * Array of unit IDs to use as filter.
 * - Group selected  → all unit IDs in that group
 * - Unit selected   → just that unit ID
 * - Nothing selected → [] (no filter = all units)
 */
const activeUnitIds = computed(() => {
  if (selectedGroup.value?.unit_ids?.length) {
    return selectedGroup.value.unit_ids;
  }
  if (selectedUnit.value?.value) {
    return [selectedUnit.value.value];
  }
  return [];
});

/** Human-readable label shown in the active-filter chip */
const filterLabel = computed(() => {
  if (selectedGroup.value) return `Grupo: ${selectedGroup.value.label}`;
  if (selectedUnit.value)  return `Unidade: ${selectedUnit.value.label}`;
  return "";
});

// Mutual exclusion handlers
const onUnitSelected = (val) => {
  if (val) selectedGroup.value = null;
};

const onGroupSelected = (val) => {
  if (val) selectedUnit.value = null;
};

const clearFilters = () => {
  selectedUnit.value  = null;
  selectedGroup.value = null;
};

// ─── Dialog openers ──────────────────────────────────────────
const openActiveStudentsDialog = () => {
  $q.dialog({ component: ActiveStudentsDialog, componentProps: { unitIds: activeUnitIds.value } });
};

const openFrozenContractsDialog = () => {
  $q.dialog({ component: FrozenContractsDialog, componentProps: { unitIds: activeUnitIds.value } });
};

const openCancelledContractsDialog = () => {
  $q.dialog({ component: CancelledContractsDialog, componentProps: { unitIds: activeUnitIds.value } });
};

const openAverageAttendanceDialog = () => {
  $q.dialog({ component: AverageAttendanceDialog });
};

const openProductStockDialog = () => {
  $q.dialog({ component: ProductStockDialog });
};

const openTicketsDialog = () => {
  $q.dialog({ component: OpenTicketsDialog });
};

// ─── Data fetching ───────────────────────────────────────────
const fetchMetrics = async () => {
  const ids = activeUnitIds.value;
  const [studentSummary, contractSummary] = await Promise.all([
    getStudentSummaryFranchisor(ids),
    getFranchisorContractSummary(ids),
  ]);

  totalStudents.value    = studentSummary.total;
  activeContracts.value  = studentSummary.active;
  frozenContracts.value   = contractSummary.frozen;
  cancelledContracts.value = contractSummary.cancelled;
};

// Re-fetch whenever unit/group filter changes
watch(activeUnitIds, async () => {
  isLoading.value = true;
  try {
    await Promise.all([fetchMetrics(), updateDashboardData()]);
  } finally {
    isLoading.value = false;
  }
});

// ─── Mock data (charts still mocked) ─────────────────────────
const birthdays = [
  { day: 10, name: "Heloisa Faria" },
  { day: 11, name: "Juliana Costa" },
  { day: 16, name: "Juliana Costa" },
  { day: 23, name: "Fernando Almeida" },
  { day: 29, name: "Lucas Pereira" },
  { day: 34, name: "Sofia Martins" },
];

const matriculasChart = {
  labels: ["JAN", "FEV", "MAR", "ABR", "MAI", "JUN"],
  datasets: [
    {
      label: "Matrículas",
      data: [120, 200, 150, 80, 70, 110],
      color: ["#3B82F6", "#EF4444", "#A855F7", "#374151", "#EAB308", "#06B6D4"],
    },
  ],
};

const faturamentoChart = {
  labels: ["17/02","18/02","19/02","20/02","21/02","22/02","23/02","24/02","25/02","26/02"],
  datasets: [
    {
      label: "Serviço",
      data: [18500,21000,16400,22300,19800,17200,15800,24100,20500,27600],
      color: "#a274f1",
    },
    {
      label: "Materiais",
      data: [9200,10500,8100,11400,9800,8400,8700,12200,10100,13100],
      color: "#ff9999",
    },
  ],
};

const formatCurrencyTick = (value) => {
  if (value >= 1000) return `R$ ${(value / 1000).toFixed(0)}k`;
  return `R$ ${value}`;
};

const formatCurrencyTooltip = (context) => {
  const value = context.parsed.y;
  return ` ${context.dataset.label}: R$ ${value.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`;
};

// Legacy mock refs (kept so chart bindings don't break)
const ordersChart = ref({});
const participantsChart = ref({});
const paymentsChart = ref({});
const ticketsSoldChart = ref({});

const generateMockData = () => {
  const createMiniChartData = (currentTotal, percentage) => ({
    current_total: currentTotal,
    percentage_change: percentage,
    trend_data: Array.from({ length: 10 }, () => Math.floor(Math.random() * 100)),
  });

  return {
    payments: createMiniChartData((Math.random() * 20000 + 5000).toFixed(2), (Math.random() * 20 - 5).toFixed(2)),
    orders:   createMiniChartData(Math.floor(Math.random() * 500 + 50), (Math.random() * 15 - 5).toFixed(2)),
    tickets_sold: createMiniChartData(Math.floor(Math.random() * 1500 + 200), (Math.random() * 25 - 5).toFixed(2)),
    participants: createMiniChartData(Math.floor(Math.random() * 1000 + 100), (Math.random() * 10 - 5).toFixed(2)),
  };
};

const updateDashboardData = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const mockData = generateMockData();
      ordersChart.value       = mockData.orders;
      participantsChart.value = mockData.participants;
      paymentsChart.value     = mockData.payments;
      ticketsSoldChart.value  = mockData.tickets_sold;
      resolve();
    }, 300);
  });
};

// ─── Init ─────────────────────────────────────────────────────
onMounted(async () => {
  isLoading.value = true;
  try {
    await Promise.all([fetchMetrics(), updateDashboardData()]);
  } finally {
    isLoading.value = false;
  }
});
</script>

<style scoped>
.gap {
  gap: 16px;
}

.stat-cards-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
}

.stat-cards-row > * {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 599px) {
  .stat-cards-row {
    flex-wrap: wrap;
  }
  .stat-cards-row > * {
    flex: 1 1 calc(50% - 8px);
  }
}

.charts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.charts-row > *:nth-child(1) {
  flex: 0 0 calc(50% - 8px);
  min-width: 0;
}

.charts-row > *:nth-child(2) {
  flex: 0 0 calc(50% - 8px);
  min-width: 0;
}

.charts-row > *:nth-child(3),
.charts-row > *:nth-child(4) {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
}

@media (max-width: 599px) {
  .charts-row > * {
    flex: 1 1 100%;
  }
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.filter-item {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 300px;
}

@media (max-width: 599px) {
  .filter-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
</style>