Avtex/app/pages/admin/groups.vue

<template>
  <div class="min-h-screen bg-slate-950 p-6">
    <div class="max-w-7xl mx-auto">
      <div class="flex items-center justify-between mb-8">
        <div>
          <h1 class="text-3xl font-bold text-slate-100">Team Management</h1>
          <p class="text-slate-400 mt-1">Create and manage groups, members and permissions</p>
        </div>
        <button 
          @click="showCreateModal = true"
          class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition flex items-center gap-2"
        >
          <span class="text-xl">+</span> New Group
        </button>
      </div>

      <!-- Groups Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div 
          v-for="group in groups" 
          :key="group.id"
          class="bg-slate-900 border border-slate-800 rounded-2xl p-6 hover:border-slate-700 transition group"
        >
          <div class="flex items-start justify-between mb-4">
            <div class="w-12 h-12 bg-blue-900/30 rounded-xl flex items-center justify-center text-blue-400 text-xl font-bold">
              {{ group.name.charAt(0) }}
            </div>
            <div class="flex gap-2">
              <span v-if="!group.isPublic" class="px-2 py-1 bg-amber-900/30 text-amber-400 text-xs rounded-md border border-amber-900/50">Private</span>
              <span class="px-2 py-1 bg-slate-800 text-slate-400 text-xs rounded-md">{{ group.memberCount }} members</span>
            </div>
          </div>
          
          <h3 class="text-xl font-semibold text-slate-100 mb-2">{{ group.name }}</h3>
          <p class="text-slate-400 text-sm mb-6 line-clamp-2">{{ group.description || 'No description provided' }}</p>
          
          <div class="flex items-center justify-between pt-4 border-t border-slate-800">
            <div class="flex -space-x-2">
              <div v-for="i in Math.min(group.memberCount, 3)" :key="i" class="w-8 h-8 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-[10px] text-slate-400 font-bold">
                U{{ i }}
              </div>
              <div v-if="group.memberCount > 3" class="w-8 h-8 rounded-full border-2 border-slate-900 bg-slate-700 flex items-center justify-center text-[10px] text-slate-300 font-bold">
                +{{ group.memberCount - 3 }}
              </div>
            </div>
            <button @click="openGroupSettings(group)" class="text-blue-400 hover:text-blue-300 text-sm font-medium">Manage</button>
          </div>
        </div>
      </div>

      <!-- Create Group Modal -->
      <div v-if="showCreateModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md p-6 shadow-2xl">
          <h2 class="text-2xl font-bold text-slate-100 mb-4">Create New Group</h2>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-slate-400 mb-1">Group Name</label>
              <input 
                v-model="newGroup.name"
                type="text" 
                class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none"
                placeholder="e.g. Development Team"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-slate-400 mb-1">Description</label>
              <textarea 
                v-model="newGroup.description"
                rows="3"
                class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-100 focus:ring-2 focus:ring-blue-500 outline-none"
                placeholder="What is this group for?"
              ></textarea>
            </div>
            <div class="flex items-center gap-3 py-2">
              <input type="checkbox" v-model="newGroup.isPublic" id="isPublic" class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-blue-600 focus:ring-blue-500">
              <label for="isPublic" class="text-slate-300 select-none">Make group public</label>
            </div>
          </div>

          <div class="flex gap-3 mt-8">
            <button 
              @click="showCreateModal = false"
              class="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg font-medium transition"
            >
              Cancel
            </button>
            <button 
              @click="createGroup"
              class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition"
              :disabled="loading"
            >
              {{ loading ? 'Creating...' : 'Create Group' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: ['auth', 'admin']
})

const groups = ref([])
const showCreateModal = ref(false)
const loading = ref(false)
const newGroup = reactive({
  name: '',
  description: '',
  isPublic: true
})

const fetchGroups = async () => {
  try {
    const data = await $fetch('/api/groups')
    groups.value = data.groups
  } catch (e) {
    console.error('Failed to fetch groups', e)
  }
}

const createGroup = async () => {
  if (!newGroup.name.trim()) return
  loading.value = true
  try {
    await $fetch('/api/groups', {
      method: 'POST',
      body: newGroup
    })
    showCreateModal.value = false
    newGroup.name = ''
    newGroup.description = ''
    await fetchGroups()
  } catch (e) {
    alert('Failed to create group')
  } finally {
    loading.value = false
  }
}

const openGroupSettings = (group) => {
  // To be implemented: detailed group management
  navigateTo(`/admin/groups/${group.id}`)
}

onMounted(fetchGroups)
</script>