klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Wire admin studio SSR and search infrastructure

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-01 11:46:06 +02:00
parent 257b0dbef6
commit 18cea8b0f0
329 changed files with 197465 additions and 2741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/js/Pages/Admin/Dashboard.jsx Normal file
View File

@@ -0,0 +1,73 @@
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>
)
}