test
4d60a876af
Connect AdSense over OAuth, sync entities and daily reports locally, and show placement performance in the admin panel without calling the Management API from public pages.
79 lines
4.4 KiB
React
79 lines
4.4 KiB
React
import React from 'react'
|
|
import AdminLayout from '../../Layouts/AdminLayout'
|
|
import { Head, usePage } from '@inertiajs/react'
|
|
|
|
function StatCard({ icon, label, value, color = 'sky' }) {
|
|
const colors = {
|
|
sky: 'from-sky-500/20 to-sky-500/5 border-sky-500/20 text-sky-400',
|
|
rose: 'from-rose-500/20 to-rose-500/5 border-rose-500/20 text-rose-400',
|
|
amber: 'from-amber-500/20 to-amber-500/5 border-amber-500/20 text-amber-400',
|
|
violet: 'from-violet-500/20 to-violet-500/5 border-violet-500/20 text-violet-400',
|
|
}
|
|
|
|
return (
|
|
<div className={`rounded-2xl border bg-gradient-to-br p-6 ${colors[color]}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-slate-400">{label}</p>
|
|
<p className="mt-2 text-3xl font-bold text-white">{value.toLocaleString()}</p>
|
|
</div>
|
|
<div className={`flex h-12 w-12 items-center justify-center rounded-xl bg-white/5`}>
|
|
<i className={`${icon} text-xl ${colors[color].split(' ').at(-1)}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Dashboard({ stats }) {
|
|
const isAdmin = Boolean(usePage().props.auth?.user?.is_admin)
|
|
const quickActions = [
|
|
{ label: 'Daily Activity', href: '/moderation/activity', icon: 'fa-solid fa-calendar-day', desc: 'Review everything created or moderated on a selected day' },
|
|
{ label: 'Manage Users', href: '/moderation/users', icon: 'fa-solid fa-users', desc: 'Search, promote or demote users' },
|
|
{ label: 'Staff Roles', href: '/moderation/users?role=admin', icon: 'fa-solid fa-shield-halved', desc: 'View all admins, managers and editorial staff' },
|
|
{ label: 'Username Queue', href: '/moderation/usernames/moderation', icon: 'fa-solid fa-id-badge', desc: 'Review pending username requests' },
|
|
{ label: 'Upload Queue', href: '/moderation/uploads', icon: 'fa-solid fa-cloud-arrow-up', desc: 'Moderate pending artwork submissions' },
|
|
{ label: 'Stories', href: '/moderation/stories', icon: 'fa-solid fa-feather-pointed', desc: 'Browse all creator stories' },
|
|
{ label: 'Artworks', href: '/moderation/artworks', icon: 'fa-solid fa-images', desc: 'Browse all uploaded artworks' },
|
|
{ label: 'Enhance Jobs', href: '/moderation/enhance', icon: 'fa-solid fa-up-right-and-down-left-from-center', desc: 'Inspect queued, failed, and completed image enhance jobs' },
|
|
{ label: 'Featured Artworks', href: '/moderation/artworks/featured', icon: 'fa-solid fa-star', desc: 'Curate the homepage featured artwork lineup' },
|
|
...(isAdmin ? [{ label: 'AdSense Analytics', href: '/admin/adsense', icon: 'fa-solid fa-chart-column', desc: 'Review Google AdSense revenue and placement performance' }] : []),
|
|
]
|
|
|
|
return (
|
|
<AdminLayout title="Dashboard" subtitle="Overview of your Skinbase platform">
|
|
<Head title="Admin Dashboard" />
|
|
|
|
{/* Stats grid */}
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<StatCard icon="fa-solid fa-users" label="Total Users" value={stats.total_users} color="sky" />
|
|
<StatCard icon="fa-solid fa-user-plus" label="New Today" value={stats.new_users_today} color="violet" />
|
|
<StatCard icon="fa-solid fa-shield-halved" label="Staff Members" value={stats.staff_count} color="rose" />
|
|
<StatCard icon="fa-solid fa-user-shield" label="Moderators" value={stats.moderator_count} color="amber" />
|
|
</div>
|
|
|
|
{/* Quick links */}
|
|
<div className="mt-10">
|
|
<h2 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500">Quick Actions</h2>
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{quickActions.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
className="group flex items-start gap-4 rounded-2xl border border-white/[0.07] bg-white/[0.03] p-5 transition hover:border-white/15 hover:bg-white/[0.06]"
|
|
>
|
|
<div className="mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-rose-500/10">
|
|
<i className={`${item.icon} text-rose-400`} />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-white group-hover:text-rose-300 transition">{item.label}</p>
|
|
<p className="mt-0.5 text-xs text-slate-500">{item.desc}</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
}
|