sa4cps-frontend/src/components/cards/AirQualityCard.vue

<template>
  <div class="bg-white rounded-2xl shadow-sm p-4">
    <h6 class="text-sm font-bold text-gray-500 mb-4">Air Quality Status</h6>
    
    <!-- Overall Status -->
    <div class="mb-4 p-3 rounded-lg" :class="getOverallStatusBg()">
      <div class="flex items-center justify-between">
        <div>
          <div class="font-medium" :class="getOverallStatusText()">
            {{ getOverallStatus() }}
          </div>
          <div class="text-sm" :class="getOverallStatusText()">
            Building Average: {{ overallCO2.toFixed(0) }} ppm
          </div>
        </div>
        <div class="w-12 h-12 rounded-full flex items-center justify-center" :class="getOverallStatusIconBg()">
          <svg class="w-6 h-6" :class="getOverallStatusText()" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M10,16.5L6,12.5L7.5,11L10,13.5L16.5,7L18,8.5L10,16.5Z" v-if="overallStatus === 'good'"/>
            <path d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z" v-else-if="overallStatus === 'moderate'"/>
            <path d="M12,2C6.5,2 2,6.5 2,12C2,17.5 6.5,22 12,22C17.5,22 22,17.5 22,12C22,6.5 17.5,2 12,2M12,7L17,12L12,17L7,12L12,7Z" v-else/>
          </svg>
        </div>
      </div>
    </div>

    <!-- Room Status List -->
    <div class="space-y-2 mb-4">
      <div v-if="roomsList.length === 0" class="text-center text-gray-500 py-4">
        No air quality data available
      </div>
      
      <div v-for="room in roomsList" :key="room.room" class="flex items-center justify-between p-2 rounded">
        <div class="flex items-center gap-2">
          <div 
            class="w-3 h-3 rounded-full"
            :class="getCO2StatusColor(room.co2.status)"
          ></div>
          <span class="text-sm font-medium text-gray-900">{{ room.room }}</span>
        </div>
        <div class="text-right">
          <div class="text-sm text-gray-900">{{ Math.round(room.co2.current) }} ppm</div>
          <div class="text-xs" :class="getCO2TextColor(room.co2.status)">
            {{ room.co2.status.toUpperCase() }}
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-2 gap-3 pt-3 border-t border-gray-100">
      <div class="text-center">
        <div class="text-lg font-bold text-gray-900">{{ roomsWithGoodAir }}</div>
        <div class="text-xs text-green-600">Good Air Quality</div>
      </div>
      <div class="text-center">
        <div class="text-lg font-bold text-gray-900">{{ roomsNeedingAttention }}</div>
        <div class="text-xs text-orange-600">Need Attention</div>
      </div>
    </div>

    <!-- Recommendations -->
    <div v-if="recommendations.length > 0" class="mt-4 p-2 bg-blue-50 rounded text-sm">
      <div class="font-medium text-blue-900 mb-1">Recommendations:</div>
      <ul class="text-blue-700 text-xs space-y-1">
        <li v-for="rec in recommendations" :key="rec">• {{ rec }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoomStore } from '@/stores/room'

const roomStore = useRoomStore()

const roomsList = computed(() => {
  return Array.from(roomStore.roomsData.values()).sort((a, b) =>
    b.co2.current - a.co2.current // Sort by CO2 level descending
  )
})

const overallCO2 = computed(() => {
  if (roomsList.value.length === 0) return 0
  return roomsList.value.reduce((sum, room) => sum + room.co2.current, 0) / roomsList.value.length
})

const overallStatus = computed(() => {
  return roomStore.getCO2Status(overallCO2.value)
})

const roomsWithGoodAir = computed(() => {
  return roomsList.value.filter(room => room.co2.status === 'good').length
})

const roomsNeedingAttention = computed(() => {
  return roomsList.value.filter(room => ['poor', 'critical'].includes(room.co2.status)).length
})

const recommendations = computed(() => {
  const recs = []
  const criticalRooms = roomsList.value.filter(room => room.co2.status === 'critical')
  const poorRooms = roomsList.value.filter(room => room.co2.status === 'poor')
  
  if (criticalRooms.length > 0) {
    recs.push(`Immediate ventilation needed in ${criticalRooms[0].room}`)
  }
  if (poorRooms.length > 0) {
    recs.push(`Increase air circulation in ${poorRooms.length} room${poorRooms.length > 1 ? 's' : ''}`)
  }
  if (overallCO2.value > 800) {
    recs.push('Consider adjusting HVAC settings building-wide')
  }
  
  return recs.slice(0, 3) // Max 3 recommendations
})

const getOverallStatus = () => {
  switch (overallStatus.value) {
    case 'good': return 'Excellent Air Quality'
    case 'moderate': return 'Moderate Air Quality'
    case 'poor': return 'Poor Air Quality'
    case 'critical': return 'Critical - Action Required'
    default: return 'Unknown Status'
  }
}

const getOverallStatusBg = () => {
  switch (overallStatus.value) {
    case 'good': return 'bg-green-50 border border-green-200'
    case 'moderate': return 'bg-yellow-50 border border-yellow-200'
    case 'poor': return 'bg-orange-50 border border-orange-200'
    case 'critical': return 'bg-red-50 border border-red-200'
    default: return 'bg-gray-50 border border-gray-200'
  }
}

const getOverallStatusText = () => {
  switch (overallStatus.value) {
    case 'good': return 'text-green-700'
    case 'moderate': return 'text-yellow-700'
    case 'poor': return 'text-orange-700'
    case 'critical': return 'text-red-700'
    default: return 'text-gray-700'
  }
}

const getOverallStatusIconBg = () => {
  switch (overallStatus.value) {
    case 'good': return 'bg-green-100'
    case 'moderate': return 'bg-yellow-100'
    case 'poor': return 'bg-orange-100'
    case 'critical': return 'bg-red-100'
    default: return 'bg-gray-100'
  }
}

const getCO2StatusColor = (status: string) => {
  switch (status) {
    case 'good': return 'bg-green-500'
    case 'moderate': return 'bg-yellow-500'
    case 'poor': return 'bg-orange-500'
    case 'critical': return 'bg-red-500'
    default: return 'bg-gray-500'
  }
}

const getCO2TextColor = (status: string) => {
  switch (status) {
    case 'good': return 'text-green-600'
    case 'moderate': return 'text-yellow-600'
    case 'poor': return 'text-orange-600'
    case 'critical': return 'text-red-600'
    default: return 'text-gray-600'
  }
}
</script>