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

Studio: make grid checkbox rectangular and commit table changes

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-01 08:43:48 +01:00
parent 211dc58884
commit e3ca845a6d
89 changed files with 7323 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
resources/js/Pages/Studio/StudioArtworkAnalytics.jsx Normal file
View File

@@ -0,0 +1,128 @@
import React from 'react'
import { usePage, Link } from '@inertiajs/react'
import StudioLayout from '../../Layouts/StudioLayout'
const kpiItems = [
{ key: 'views', label: 'Views', icon: 'fa-eye', color: 'text-emerald-400' },
{ key: 'favourites', label: 'Favourites', icon: 'fa-heart', color: 'text-pink-400' },
{ key: 'shares', label: 'Shares', icon: 'fa-share-nodes', color: 'text-amber-400' },
{ key: 'comments', label: 'Comments', icon: 'fa-comment', color: 'text-blue-400' },
{ key: 'downloads', label: 'Downloads', icon: 'fa-download', color: 'text-purple-400' },
]
const metricCards = [
{ key: 'ranking_score', label: 'Ranking Score', icon: 'fa-trophy', color: 'text-yellow-400' },
{ key: 'heat_score', label: 'Heat Score', icon: 'fa-fire', color: 'text-orange-400' },
{ key: 'engagement_velocity', label: 'Engagement Velocity', icon: 'fa-bolt', color: 'text-cyan-400' },
]
export default function StudioArtworkAnalytics() {
const { props } = usePage()
const { artwork, analytics } = props
return (
<StudioLayout title={`Analytics: ${artwork?.title || 'Artwork'}`}>
{/* Back link */}
<Link
href="/studio/artworks"
className="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-white mb-6 transition-colors"
>
<i className="fa-solid fa-arrow-left" />
Back to Artworks
</Link>
{/* Artwork header */}
<div className="flex items-center gap-4 mb-8 bg-nova-900/60 border border-white/10 rounded-2xl p-4">
{artwork?.thumb_url && (
<img
src={artwork.thumb_url}
alt={artwork.title}
className="w-20 h-20 rounded-xl object-cover bg-nova-800"
/>
)}
<div>
<h2 className="text-lg font-bold text-white">{artwork?.title}</h2>
<p className="text-xs text-slate-500 mt-1">/{artwork?.slug}</p>
</div>
</div>
{/* KPI row */}
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
{kpiItems.map((item) => (
<div key={item.key} className="bg-nova-900/60 border border-white/10 rounded-2xl p-5">
<div className="flex items-center gap-2 mb-2">
<i className={`fa-solid ${item.icon} ${item.color}`} />
<span className="text-xs font-medium text-slate-400 uppercase tracking-wider">{item.label}</span>
</div>
<p className="text-2xl font-bold text-white tabular-nums">
{(analytics?.[item.key] ?? 0).toLocaleString()}
</p>
</div>
))}
</div>
{/* Performance metrics */}
<h3 className="text-base font-bold text-white mb-4">Performance Metrics</h3>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
{metricCards.map((item) => (
<div key={item.key} className="bg-nova-900/60 border border-white/10 rounded-2xl p-5">
<div className="flex items-center gap-2 mb-3">
<div className={`w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center ${item.color}`}>
<i className={`fa-solid ${item.icon} text-lg`} />
</div>
<span className="text-sm font-medium text-slate-300">{item.label}</span>
</div>
<p className="text-3xl font-bold text-white tabular-nums">
{(analytics?.[item.key] ?? 0).toFixed(1)}
</p>
</div>
))}
</div>
{/* Placeholder sections for future features */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div className="bg-nova-900/40 border border-white/10 rounded-2xl p-6">
<h4 className="text-sm font-semibold text-white mb-3">
<i className="fa-solid fa-chart-line mr-2 text-slate-500" />
Traffic Sources
</h4>
<div className="flex items-center justify-center py-8">
<div className="text-center">
<i className="fa-solid fa-chart-pie text-3xl text-slate-700 mb-3" />
<p className="text-xs text-slate-500">Coming soon</p>
<p className="text-[10px] text-slate-600 mt-1">Traffic source tracking is on the roadmap</p>
</div>
</div>
</div>
<div className="bg-nova-900/40 border border-white/10 rounded-2xl p-6">
<h4 className="text-sm font-semibold text-white mb-3">
<i className="fa-solid fa-share-from-square mr-2 text-slate-500" />
Shares by Platform
</h4>
<div className="flex items-center justify-center py-8">
<div className="text-center">
<i className="fa-solid fa-share-nodes text-3xl text-slate-700 mb-3" />
<p className="text-xs text-slate-500">Coming soon</p>
<p className="text-[10px] text-slate-600 mt-1">Platform-level share tracking coming in v2</p>
</div>
</div>
</div>
<div className="bg-nova-900/40 border border-white/10 rounded-2xl p-6 lg:col-span-2">
<h4 className="text-sm font-semibold text-white mb-3">
<i className="fa-solid fa-trophy mr-2 text-slate-500" />
Ranking History
</h4>
<div className="flex items-center justify-center py-8">
<div className="text-center">
<i className="fa-solid fa-chart-area text-3xl text-slate-700 mb-3" />
<p className="text-xs text-slate-500">Coming soon</p>
<p className="text-[10px] text-slate-600 mt-1">Historical ranking data will be tracked in a future update</p>
</div>
</div>
</div>
</div>
</StudioLayout>
)
}