frontend/src/views/DashboardSimple.vue

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <header class="bg-white border-b border-gray-200 px-6 py-4">
      <div class="max-w-7xl mx-auto flex justify-between items-center">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">SAAP Dashboard</h1>
          <p class="text-sm text-gray-600">Multi-Agent Platform</p>
        </div>
        <div class="flex items-center space-x-4">
          <div class="flex items-center space-x-2">
            <div class="w-2 h-2 bg-green-400 rounded-full"></div>
            <span class="text-sm text-gray-700">Connected</span>
          </div>
          <div class="text-center">
            <div class="text-xl font-bold text-blue-600">{{ activeAgents }}</div>
            <div class="text-xs text-gray-500 uppercase">Active Agents</div>
          </div>
        </div>
      </div>
    </header>

    <!-- Content -->
    <main class="max-w-7xl mx-auto px-6 py-6">
      
      <!-- Action Buttons -->
      <div class="flex space-x-3 mb-6">
        <button 
          @click="refresh"
          class="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-50"
        >
          <ArrowPathIcon class="w-4 h-4 mr-2" />
          Refresh
        </button>
        <button 
          @click="showForm = !showForm"
          class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
        >
          <PlusIcon class="w-4 h-4 mr-2" />
          Add Agent
        </button>
      </div>

      <!-- Stats Grid -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-xl border border-gray-200">
          <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <UserGroupIcon class="w-6 h-6 text-blue-600" />
            </div>
            <div>
              <div class="text-xl font-bold text-gray-900">{{ totalAgents }}</div>
              <div class="text-sm text-gray-600">Total Agents</div>
            </div>
          </div>
        </div>

        <div class="bg-white p-6 rounded-xl border border-gray-200">
          <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <ChartBarIcon class="w-6 h-6 text-green-600" />
            </div>
            <div>
              <div class="text-xl font-bold text-gray-900">{{ activeAgents }}</div>
              <div class="text-sm text-gray-600">Active</div>
            </div>
          </div>
        </div>

        <div class="bg-white p-6 rounded-xl border border-gray-200">
          <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <ChatBubbleLeftIcon class="w-6 h-6 text-orange-600" />
            </div>
            <div>
              <div class="text-xl font-bold text-gray-900">{{ messages }}</div>
              <div class="text-sm text-gray-600">Messages</div>
            </div>
          </div>
        </div>

        <div class="bg-white p-6 rounded-xl border border-gray-200">
          <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <ClockIcon class="w-6 h-6 text-purple-600" />
            </div>
            <div>
              <div class="text-xl font-bold text-gray-900">1.8s</div>
              <div class="text-sm text-gray-600">Response Time</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Add Agent Form (Toggle) -->
      <div v-if="showForm" class="bg-white p-6 rounded-xl border border-gray-200 mb-6">
        <h3 class="text-lg font-semibold mb-4">Add New Agent</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input 
            v-model="newAgent.name"
            type="text" 
            placeholder="Agent Name"
            class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
          <select 
            v-model="newAgent.type"
            class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option>Coordinator</option>
            <option>Developer</option>
            <option>Analyst</option>
          </select>
        </div>
        <div class="mt-4">
          <button 
            @click="addAgent"
            class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Create Agent
          </button>
        </div>
      </div>

      <!-- Agents Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div
          v-for="agent in agents"
          :key="agent.id"
          class="bg-white p-6 rounded-xl border border-gray-200 hover:shadow-md transition-shadow"
        >
          <div class="flex items-start justify-between mb-4">
            <div class="flex items-center space-x-3">
              <div 
                class="w-10 h-10 rounded-full flex items-center justify-center text-white font-medium"
                :style="{ backgroundColor: agent.color }"
              >
                {{ agent.name.charAt(0) }}
              </div>
              <div>
                <h4 class="font-semibold text-gray-900">{{ agent.name }}</h4>
                <p class="text-sm text-gray-600">{{ agent.type }}</p>
              </div>
            </div>
            <span 
              class="px-2 py-1 text-xs font-medium rounded-full"
              :class="agent.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
            >
              {{ agent.status }}
            </span>
          </div>

          <div class="flex space-x-2">
            <button 
              v-if="agent.status !== 'active'"
              @click="toggleAgent(agent, 'active')"
              class="flex items-center px-3 py-1.5 bg-green-50 text-green-700 rounded-lg text-sm hover:bg-green-100"
            >
              <PlayIcon class="w-4 h-4 mr-1" />
              Start
            </button>
            <button 
              v-if="agent.status === 'active'"
              @click="toggleAgent(agent, 'inactive')"
              class="flex items-center px-3 py-1.5 bg-red-50 text-red-700 rounded-lg text-sm hover:bg-red-100"
            >
              <StopIcon class="w-4 h-4 mr-1" />
              Stop
            </button>
            <button class="flex items-center px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-sm hover:bg-blue-100">
              <ChatBubbleLeftIcon class="w-4 h-4 mr-1" />
              Chat
            </button>
          </div>
        </div>

        <!-- Empty State -->
        <div v-if="agents.length === 0" class="col-span-full text-center py-12">
          <CpuChipIcon class="w-16 h-16 mx-auto text-gray-400 mb-4" />
          <h3 class="text-lg font-medium text-gray-900 mb-2">No Agents Yet</h3>
          <p class="text-gray-600 mb-6">Create your first AI agent to get started.</p>
          <button 
            @click="showForm = true"
            class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            <PlusIcon class="w-4 h-4 mr-2 inline" />
            Add First Agent
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import {
  ArrowPathIcon,
  PlusIcon,
  UserGroupIcon,
  ChartBarIcon,
  ChatBubbleLeftIcon,
  ClockIcon,
  PlayIcon,
  StopIcon,
  CpuChipIcon
} from '@heroicons/vue/24/outline'

export default {
  name: 'DashboardSimple',
  components: {
    ArrowPathIcon,
    PlusIcon,
    UserGroupIcon,
    ChartBarIcon,
    ChatBubbleLeftIcon,
    ClockIcon,
    PlayIcon,
    StopIcon,
    CpuChipIcon
  },
  setup() {
    const showForm = ref(false)
    const newAgent = ref({
      name: '',
      type: 'Coordinator'
    })

    const agents = ref([
      {
        id: '1',
        name: 'Jane Alesi',
        type: 'Lead Coordinator',
        status: 'active',
        color: '#8B5CF6'
      },
      {
        id: '2', 
        name: 'John Alesi',
        type: 'Developer',
        status: 'inactive',
        color: '#14B8A6'
      },
      {
        id: '3',
        name: 'Lara Alesi', 
        type: 'Medical Expert',
        status: 'active',
        color: '#EC4899'
      }
    ])

    const totalAgents = computed(() => agents.value.length)
    const activeAgents = computed(() => 
      agents.value.filter(a => a.status === 'active').length
    )
    const messages = computed(() => totalAgents.value * 15)

    const refresh = () => {
      console.log('🔄 Refreshing data...')
    }

    const addAgent = () => {
      if (newAgent.value.name.trim()) {
        agents.value.push({
          id: Date.now().toString(),
          name: newAgent.value.name,
          type: newAgent.value.type,
          status: 'inactive',
          color: '#6B7280'
        })
        newAgent.value = { name: '', type: 'Coordinator' }
        showForm.value = false
      }
    }

    const toggleAgent = (agent, newStatus) => {
      agent.status = newStatus
      console.log(`${agent.name} is now ${newStatus}`)
    }

    return {
      showForm,
      newAgent,
      agents,
      totalAgents,
      activeAgents,
      messages,
      refresh,
      addAgent,
      toggleAgent
    }
  }
}
</script>