74 lines
4.3 KiB
JavaScript
74 lines
4.3 KiB
JavaScript
import React from 'react'
|
|
import AdminLayout from '../../Layouts/AdminLayout'
|
|
import { Head } 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 }) {
|
|
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">
|
|
{[
|
|
{ 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: 'Featured Artworks', href: '/moderation/artworks/featured', icon: 'fa-solid fa-star', desc: 'Curate the homepage featured artwork lineup' },
|
|
{ label: 'AI Biography', href: '/moderation/ai-biography', icon: 'fa-solid fa-wand-magic-sparkles', desc: 'Review generated creator biographies and moderation flags' },
|
|
].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>
|
|
)
|
|
}
|