feat(admin): index.vue als quick-link-dashboard (Phase 2 done)

Phase 2-pending-Liste durch 4 NuxtLink-Cards ersetzt → tap navigiert direkt
zur jeweiligen page. Plus separater Stats-Quick-Link unten.

Pages-content unangetastet, nur dashboard refresh.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-09 15:48:26 +02:00
parent 6c1abc1ec9
commit b36d9ae7c4

View File

@ -3,43 +3,39 @@
<h1 class="text-xl font-semibold text-white mb-1">Dashboard</h1> <h1 class="text-xl font-semibold text-white mb-1">Dashboard</h1>
<p class="text-sm text-gray-500 mb-8">rebreak Admin -- internes Verwaltungspanel</p> <p class="text-sm text-gray-500 mb-8">rebreak Admin -- internes Verwaltungspanel</p>
<!-- Stat-Cards (Placeholder bis Phase 2 echte API-Calls hat) --> <!-- Quick-Links zu den 4 Phase-2-Pages -->
<div class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-8"> <div class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-8">
<div <NuxtLink
v-for="card in statCards" v-for="card in quickLinks"
:key="card.label" :key="card.label"
class="rounded-lg border border-gray-800 bg-gray-900 p-4" :to="card.to"
class="rounded-lg border border-gray-800 bg-gray-900 p-4 hover:bg-gray-800 transition-colors block"
> >
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<UIcon :name="card.icon" class="h-4 w-4 text-gray-500" /> <UIcon :name="card.icon" class="h-4 w-4 text-gray-500" />
<span class="text-xs text-gray-500">{{ card.label }}</span> <span class="text-xs text-gray-500">{{ card.label }}</span>
</div> </div>
<p class="text-2xl font-bold text-white">{{ card.value }}</p> <p class="text-2xl font-bold text-white">{{ card.value }}</p>
</div> <p class="text-xs text-gray-600 mt-1">{{ card.hint }}</p>
</NuxtLink>
</div> </div>
<!-- Phase 2 Preview --> <!-- Vollständige Stats-Page-Hinweis -->
<div class="rounded-lg border border-gray-800 bg-gray-900 p-6"> <NuxtLink
<h2 class="text-sm font-medium text-gray-400 mb-3">Phase 2 -- ausstehende Features</h2> to="/stats"
<ul class="space-y-2 text-sm text-gray-500"> class="rounded-lg border border-gray-800 bg-gray-900 p-6 block hover:bg-gray-800 transition-colors"
<li class="flex items-center gap-2"> >
<UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" /> <div class="flex items-center gap-3">
Domain-Approval-Queue (wartende Anfragen) <UIcon name="heroicons:chart-bar" class="h-6 w-6 text-blue-400" />
</li> <div class="flex-1">
<li class="flex items-center gap-2"> <h2 class="text-sm font-medium text-white">Vollständige Statistiken</h2>
<UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" /> <p class="text-xs text-gray-500 mt-1">
User-Liste mit Plan-Status + letztem Login Aggregierte User/Posts/Domain-Stats mit Auto-Refresh
</li> </p>
<li class="flex items-center gap-2"> </div>
<UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" /> <UIcon name="heroicons:arrow-right" class="h-4 w-4 text-gray-500" />
SOS-Session-Statistiken (aggregiert, anonym) </div>
</li> </NuxtLink>
<li class="flex items-center gap-2">
<UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" />
Content-Moderation-Queue (gemeldete Nachrichten)
</li>
</ul>
</div>
</div> </div>
</template> </template>
@ -49,11 +45,35 @@ definePageMeta({
middleware: "admin-auth", middleware: "admin-auth",
}) })
// Placeholder-Werte -- Phase 2 ersetzt mit echten API-Calls gegen backend /api/admin/* // Quick-Links als statische Cards echte Stats-page übernimmt Live-Werte
const statCards = [ const quickLinks = [
{ label: "Aktive User (30d)", value: "—", icon: "heroicons:users" }, {
{ label: "SOS-Sessions heute", value: "—", icon: "heroicons:chat-bubble-left-ellipsis" }, label: "Domain-Approval",
{ label: "Domains pending", value: "—", icon: "heroicons:globe-alt" }, value: "→",
{ label: "Free / Pro / Legend", value: "—", icon: "heroicons:star" }, hint: "Pending submissions prüfen",
icon: "heroicons:globe-alt",
to: "/domains",
},
{
label: "User-Verwaltung",
value: "→",
hint: "Plan/Ban/Soft-Delete",
icon: "heroicons:users",
to: "/users",
},
{
label: "Statistiken",
value: "→",
hint: "Aktive User, Posts, Domains",
icon: "heroicons:chart-bar",
to: "/stats",
},
{
label: "Moderation",
value: "→",
hint: "Reported content queue",
icon: "heroicons:flag",
to: "/moderation",
},
] ]
</script> </script>