<template>
  <q-page padding>
    <div class="text-h6 text-weight-bold q-mb-md">Rapports</div>

    <div class="row q-col-gutter-md">
      <div class="col-12 col-md-6 col-lg-4" v-for="report in reports" :key="report.title">
        <div class="ops-card cursor-pointer" style="min-height:120px" @click="report.action">
          <div class="row items-center q-mb-sm">
            <q-icon :name="report.icon" size="28px" :color="report.color" class="q-mr-sm" />
            <div class="text-subtitle1 text-weight-bold">{{ report.title }}</div>
          </div>
          <div class="text-caption text-grey-6">{{ report.description }}</div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
const reports = [
  {
    title: 'Clients par territoire',
    description: 'Répartition des clients actifs par zone géographique.',
    icon: 'map',
    color: 'indigo-6',
    action: () => {},
  },
  {
    title: 'Revenus mensuels',
    description: 'Évolution des revenus d\'abonnement sur les 12 derniers mois.',
    icon: 'trending_up',
    color: 'green-6',
    action: () => {},
  },
  {
    title: 'Tickets par priorité',
    description: 'Analyse des tickets ouverts et temps de résolution moyen.',
    icon: 'bug_report',
    color: 'orange-6',
    action: () => {},
  },
  {
    title: 'Équipements déployés',
    description: 'Inventaire des ONT, routeurs et modems par statut.',
    icon: 'router',
    color: 'blue-6',
    action: () => {},
  },
  {
    title: 'Abonnements actifs',
    description: 'Liste des abonnements avec plan, montant et ancienneté.',
    icon: 'subscriptions',
    color: 'purple-6',
    action: () => {},
  },
  {
    title: 'Dispatch performance',
    description: 'Taux de complétion des tâches et temps moyen par technicien.',
    icon: 'speed',
    color: 'red-6',
    action: () => {},
  },
]
</script>
