Neuaufbau des Repositories
This commit is contained in:
@@ -0,0 +1,229 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { Gift, Eye, MousePointerClick, TrendingUp, Activity, Zap, Server } from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps<{
|
||||
bonuses: any[];
|
||||
totalViews: number;
|
||||
totalClicks: number;
|
||||
todayViews: number;
|
||||
todayClicks: number;
|
||||
socialClicks: {
|
||||
twitch: number;
|
||||
instagram: number;
|
||||
kick: number;
|
||||
};
|
||||
uptimeMonitors: {
|
||||
id: number;
|
||||
name: string;
|
||||
status: string;
|
||||
}[];
|
||||
}>();
|
||||
|
||||
// Calculate Conversion Rate
|
||||
const conversionRate = props.totalViews > 0
|
||||
? ((props.totalClicks / props.totalViews) * 100).toFixed(1)
|
||||
: '0.0';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Dashboard">
|
||||
<!-- We use FontAwesome for social icons because lucide deprecated theirs -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</Head>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
<h1 class="text-2xl font-bold">Dashboard Statistiken</h1>
|
||||
|
||||
<!-- Top Level Stats -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Views</p>
|
||||
<h3 class="text-3xl font-bold mt-1">{{ totalViews }}</h3>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-50 dark:bg-blue-900/20 text-blue-500 rounded-xl">
|
||||
<Eye :size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-green-500 flex items-center font-medium">
|
||||
<TrendingUp :size="16" class="mr-1" /> +{{ todayViews }}
|
||||
</span>
|
||||
<span class="text-gray-400 ml-2">heute</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Clicks</p>
|
||||
<h3 class="text-3xl font-bold mt-1">{{ totalClicks }}</h3>
|
||||
</div>
|
||||
<div class="p-3 bg-purple-50 dark:bg-purple-900/20 text-purple-500 rounded-xl">
|
||||
<MousePointerClick :size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-green-500 flex items-center font-medium">
|
||||
<TrendingUp :size="16" class="mr-1" /> +{{ todayClicks }}
|
||||
</span>
|
||||
<span class="text-gray-400 ml-2">heute</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Conversion Rate</p>
|
||||
<h3 class="text-3xl font-bold mt-1">{{ conversionRate }}%</h3>
|
||||
</div>
|
||||
<div class="p-3 bg-green-50 dark:bg-green-900/20 text-green-500 rounded-xl">
|
||||
<Activity :size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="text-gray-400">Clicks / Views</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Aktive Deals</p>
|
||||
<h3 class="text-3xl font-bold mt-1">{{ bonuses.filter(b => b.is_active).length }}</h3>
|
||||
</div>
|
||||
<div class="p-3 bg-orange-50 dark:bg-orange-900/20 text-orange-500 rounded-xl">
|
||||
<Gift :size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<Link href="/admin/bonuses" class="text-blue-500 hover:text-blue-600 font-medium">Alle verwalten →</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Media Stats -->
|
||||
<h2 class="text-xl font-bold mt-8 mb-4">Social Media Klicks</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-4 bg-purple-100 dark:bg-purple-900/30 text-[#9146FF] rounded-xl">
|
||||
<i class="fab fa-twitch text-2xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Twitch</p>
|
||||
<h3 class="text-2xl font-bold">{{ socialClicks.twitch }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-4 bg-pink-100 dark:bg-pink-900/30 text-pink-600 rounded-xl">
|
||||
<i class="fab fa-instagram text-2xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Instagram</p>
|
||||
<h3 class="text-2xl font-bold">{{ socialClicks.instagram }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-4 bg-green-100 dark:bg-green-900/30 text-[#53FC18] rounded-xl">
|
||||
<Zap :size="24" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Kick</p>
|
||||
<h3 class="text-2xl font-bold">{{ socialClicks.kick }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Deals Stats Table -->
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="text-xl font-bold mt-8 mb-4">Deal Performance</h2>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
<th class="p-4">Casino</th>
|
||||
<th class="p-4 text-center">Views</th>
|
||||
<th class="p-4 text-center">Clicks</th>
|
||||
<th class="p-4 text-center">Conv. Rate</th>
|
||||
<th class="p-4 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
<tr v-for="bonus in bonuses" :key="bonus.id" class="hover:bg-gray-50 dark:hover:bg-gray-900/50 transition">
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg overflow-hidden flex items-center justify-center" :style="{ backgroundColor: bonus.hover_color ? bonus.hover_color + '20' : '#e5e7eb' }">
|
||||
<img v-if="bonus.image_path" :src="bonus.image_path" class="w-full h-full object-cover" alt="Bonus" />
|
||||
<Gift v-else :size="20" :color="bonus.brand_color || '#9ca3af'" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-bold">{{ bonus.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4 text-center font-medium">{{ bonus.views_count }}</td>
|
||||
<td class="p-4 text-center font-medium">{{ bonus.clicks_count }}</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
|
||||
{{ bonus.views_count > 0 ? ((bonus.clicks_count / bonus.views_count) * 100).toFixed(1) : '0.0' }}%
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<span v-if="bonus.is_active" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
|
||||
Aktiv
|
||||
</span>
|
||||
<span v-else class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
|
||||
Inaktiv
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="bonuses.length === 0">
|
||||
<td colspan="5" class="p-8 text-center text-gray-500">
|
||||
Keine Deals gefunden.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uptime Monitors -->
|
||||
<div class="lg:col-span-1">
|
||||
<h2 class="text-xl font-bold mt-8 mb-4">Uptime Kuma Status</h2>
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
|
||||
<ul class="divide-y divide-gray-100 dark:divide-gray-700">
|
||||
<li v-for="monitor in uptimeMonitors" :key="monitor.id" class="p-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<Server :size="20" class="text-gray-400" />
|
||||
<span class="font-medium">{{ monitor.name }}</span>
|
||||
<span class="text-xs text-gray-500">#{{ monitor.id }}</span>
|
||||
</div>
|
||||
<span v-if="monitor.status === 'up'" class="flex items-center gap-1.5 text-sm font-medium text-green-600 dark:text-green-400">
|
||||
<span class="w-2 h-2 rounded-full bg-green-500"></span> UP
|
||||
</span>
|
||||
<span v-else class="flex items-center gap-1.5 text-sm font-medium text-red-600 dark:text-red-400">
|
||||
<span class="w-2 h-2 rounded-full bg-red-500"></span> DOWN
|
||||
</span>
|
||||
</li>
|
||||
<li v-if="!uptimeMonitors || uptimeMonitors.length === 0" class="p-8 text-center text-gray-500">
|
||||
Keine Statusdaten verfügbar oder API nicht erreichbar.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user