notytex/frontend/src/views/ClassDashboardView.vue

<template>
  <div class="px-4 sm:px-6 lg:px-8 py-8">
    <LoadingSpinner v-if="loading" text="Chargement..." fullPage />

    <template v-else-if="classData">
      <PageHeader
        :title="classData.name"
        :subtitle="`${classData.year} \u00b7 ${classData.students_count} élèves`"
        :breadcrumbs="[{ label: 'Classes', to: '/classes' }, { label: classData.name }]"
      >
        <template #actions>
          <router-link :to="`/classes/${classData.id}/students`" class="btn btn-secondary">
            Élèves
          </router-link>
          <router-link :to="`/classes/${classData.id}/council`" class="btn btn-secondary">
            Conseil
          </router-link>
        </template>
      </PageHeader>

      <!-- Trimester selector -->
      <div class="mb-6">
        <TrimesterSelector v-model="trimester" showAll allLabel="Annuel" size="md" @update:modelValue="selectTrimester" />
      </div>

      <!-- Stats principales - Grid 4 colonnes -->
      <div v-if="stats" class="relative">
        <div v-if="statsLoading" class="absolute inset-0 bg-white/60 z-10 flex items-center justify-center rounded-xl">
          <LoadingSpinner />
        </div>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Moyenne classe -->
        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
          <p class="text-sm text-gray-500 mb-1">Moyenne classe</p>
          <p class="text-3xl font-bold text-orange-600">{{ stats.mean?.toFixed(2) || '-' }}</p>
          <div class="mt-2 flex justify-between text-xs text-gray-400">
            <span>Min: {{ stats.min_score?.toFixed(1) || '-' }}</span>
            <span>Max: {{ stats.max_score?.toFixed(1) || '-' }}</span>
          </div>
        </div>
        
        <!-- Médiane -->
        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
          <p class="text-sm text-gray-500 mb-1">Médiane</p>
          <p class="text-3xl font-bold text-blue-600">{{ stats.median?.toFixed(2) || '-' }}</p>
          <div class="mt-2 text-xs text-gray-400">
            Écart-type: {{ stats.std_dev?.toFixed(2) || '-' }}
          </div>
        </div>
        
        <!-- Évaluations -->
        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
          <p class="text-sm text-gray-500 mb-1">Évaluations</p>
          <p class="text-3xl font-bold text-gray-900">{{ stats.assessments_total || 0 }}</p>
          <div class="mt-2 flex space-x-2 text-xs">
            <span class="text-green-600">{{ stats.assessments_completed || 0 }} terminées</span>
            <span class="text-orange-600">{{ stats.assessments_in_progress || 0 }} en cours</span>
          </div>
        </div>
        
        <!-- Élèves -->
        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-all duration-300">
          <p class="text-sm text-gray-500 mb-1">Élèves</p>
          <p class="text-3xl font-bold text-gray-900">{{ stats.students_count || 0 }}</p>
          <div class="mt-2 text-xs text-gray-400">
            {{ stats.student_averages?.length || 0 }} avec moyenne
          </div>
        </div>
      </div>
      </div>

      <!-- Domaines et Compétences en 2 colonnes -->
      <div v-if="stats" class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Domaines -->
        <div v-if="sortedDomainsStats.length" class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">Évaluations par domaine</h2>
          <p class="text-xs text-gray-500 mb-4">Perspective enseignant : ce qui a été évalué</p>
          <div class="space-y-4">
            <div v-for="domain in sortedDomainsStats" :key="domain.id" class="space-y-1">
              <div class="flex justify-between text-sm">
                <span class="font-medium text-gray-700 truncate" :title="domain.name">{{ domain.name }}</span>
                <span class="font-bold" :style="{ color: domain.color || '#6B7280' }">
                  {{ domain.total_points_possible?.toFixed(1) || '0' }} points
                </span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div 
                  class="h-2 rounded-full transition-all duration-1000 ease-out"
                  :style="{ 
                    width: `${getRelativeWidth(domain, sortedDomainsStats)}%`,
                    backgroundColor: domain.color || '#6B7280'
                  }"
                ></div>
              </div>
              <p class="text-xs text-gray-400">
                {{ domain.evaluation_count }} élément(s) de notation
              </p>
            </div>
          </div>
        </div>
        <div v-else class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">Évaluations par domaine</h2>
          <p class="text-sm text-gray-500 italic">Aucune donnée de domaine disponible</p>
        </div>

        <!-- Compétences -->
        <div v-if="sortedCompetencesStats.length" class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">Évaluations par compétence</h2>
          <p class="text-xs text-gray-500 mb-4">Perspective enseignant : ce qui a été évalué</p>
          <div class="space-y-4">
            <div v-for="competence in sortedCompetencesStats" :key="competence.id" class="space-y-1">
              <div class="flex justify-between text-sm">
                <span class="font-medium text-gray-700 truncate" :title="competence.name">{{ competence.name }}</span>
                <span class="font-bold" :style="{ color: competence.color || '#6B7280' }">
                  {{ competence.total_points_possible?.toFixed(1) || '0' }} points
                </span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div 
                  class="h-2 rounded-full transition-all duration-1000 ease-out"
                  :style="{ 
                    width: `${getRelativeWidth(competence, sortedCompetencesStats)}%`,
                    backgroundColor: competence.color || '#6B7280'
                  }"
                ></div>
              </div>
              <p class="text-xs text-gray-400">
                {{ competence.evaluation_count }} élément(s) de notation
              </p>
            </div>
          </div>
        </div>
        <div v-else class="bg-white rounded-xl shadow-md p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">Évaluations par compétence</h2>
          <p class="text-sm text-gray-500 italic">Aucune donnée de compétence disponible</p>
        </div>
      </div>

      <!-- Students averages -->
      <div v-if="stats?.student_averages?.length" class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
          <h2 class="text-lg font-semibold text-gray-800">Notes par élève</h2>
          <p class="text-xs text-gray-500 mt-1">Cliquez sur les en-têtes pour trier</p>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-gray-50">
              <tr>
                <th 
                  @click="sortBy('name')" 
                  class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                >
                  Élève {{ getSortIcon('name') }}
                </th>
                <th 
                  @click="sortBy('average')" 
                  class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                >
                  Moyenne {{ getSortIcon('average') }}
                </th>
                <th 
                  v-for="assessment in assessments" 
                  :key="assessment.assessment_id"
                  @click="sortBy(`assessment_${assessment.assessment_id}`)"
                  class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                  :title="assessment.assessment_title"
                >
                  <div class="flex flex-col items-center">
                    <span class="truncate max-w-[120px]">{{ assessment.assessment_title }}</span>
                    <span class="text-[10px] font-normal">{{ getSortIcon(`assessment_${assessment.assessment_id}`) }}</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr v-for="student in sortedStudents" :key="student.student_id" class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  {{ student.last_name }} {{ student.first_name }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-bold text-blue-600">
                  {{ student.average?.toFixed(2) || '-' }}
                </td>
                <td 
                  v-for="assessment in assessments" 
                  :key="assessment.assessment_id"
                  class="px-4 py-4 whitespace-nowrap text-sm text-center text-gray-700"
                >
                  {{ getAssessmentScore(student, assessment.assessment_id) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div v-else-if="stats" class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">Notes par élève</h2>
        <p class="text-sm text-gray-500 italic text-center py-4">Aucune note disponible pour ce trimestre</p>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useClassesStore } from '@/stores/classes'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
import PageHeader from '@/components/common/PageHeader.vue'
import TrimesterSelector from '@/components/common/TrimesterSelector.vue'

const route = useRoute()
const classesStore = useClassesStore()

const loading = ref(true)
const classData = ref(null)
const stats = ref(null)
const trimester = ref(null)  // null = vision annuelle par défaut
const sortColumn = ref('name')
const sortDirection = ref('asc')
const statsLoading = ref(false)

async function fetchData() {
  loading.value = true
  try {
    const id = route.params.id
    classData.value = await classesStore.fetchClass(id)
    stats.value = await classesStore.fetchClassStats(id, trimester.value)
  } finally {
    loading.value = false
  }
}

async function selectTrimester(t) {
  trimester.value = t
  statsLoading.value = true
  try {
    stats.value = await classesStore.fetchClassStats(route.params.id, t)
  } finally {
    statsLoading.value = false
  }
}

// Récupérer la liste des évaluations triée par date
const assessments = computed(() => {
  if (!stats.value?.student_averages?.length) return []
  
  // Extraire les évaluations depuis le premier élève
  const firstStudent = stats.value.student_averages[0]
  if (!firstStudent?.assessment_scores) return []
  
  return Object.values(firstStudent.assessment_scores).sort((a, b) => a.assessment_id - b.assessment_id)
})

// Fonction de tri des élèves
const sortedStudents = computed(() => {
  if (!stats.value?.student_averages) return []
  
  const students = [...stats.value.student_averages]
  
  students.sort((a, b) => {
    let valA, valB
    
    if (sortColumn.value === 'name') {
      valA = `${a.last_name} ${a.first_name}`.toLowerCase()
      valB = `${b.last_name} ${b.first_name}`.toLowerCase()
    } else if (sortColumn.value === 'average') {
      valA = a.average ?? -1
      valB = b.average ?? -1
    } else if (sortColumn.value.startsWith('assessment_')) {
      const assessmentId = parseInt(sortColumn.value.split('_')[1])
      valA = a.assessment_scores?.[assessmentId]?.score ?? -1
      valB = b.assessment_scores?.[assessmentId]?.score ?? -1
    } else {
      return 0
    }
    
    const comparison = valA > valB ? 1 : valA < valB ? -1 : 0
    return sortDirection.value === 'asc' ? comparison : -comparison
  })
  
  return students
})

function sortBy(column) {
  if (sortColumn.value === column) {
    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortColumn.value = column
    sortDirection.value = 'asc'
  }
}

function getAssessmentScore(student, assessmentId) {
  const score = student.assessment_scores?.[assessmentId]
  if (!score || score.score === null) return '-'
  return `${score.score.toFixed(1)}/${score.max_points.toFixed(0)}`
}

function getSortIcon(column) {
  if (sortColumn.value !== column) return ''
  return sortDirection.value === 'asc' ? '▲' : '▼'
}

function getRelativeWidth(item, allItems) {
  const maxPoints = Math.max(...allItems.map(d => d.total_points_possible || 0))
  if (maxPoints === 0) return 0
  return ((item.total_points_possible || 0) / maxPoints) * 100
}

// Tri des domaines et compétences
const sortedDomainsStats = computed(() => {
  if (!stats.value?.domains_stats) return []
  // Trier par nom alphabétiquement
  return [...stats.value.domains_stats].sort((a, b) => 
    a.name.localeCompare(b.name, 'fr', { sensitivity: 'base' })
  )
})

const sortedCompetencesStats = computed(() => {
  if (!stats.value?.competences_stats) return []
  // Les compétences sont déjà triées par order_index côté backend
  // On retourne une copie pour être cohérent
  return [...stats.value.competences_stats]
})

onMounted(fetchData)
</script>