React + Vite + Tailwind dashboard with: - Login (JWT via snakkimo auth) - Dashboard with Datenbankverwaltung + Contentverwaltung tiles - Table overview with record counts (total, published, blocked) - Table record viewer with text/status filters and linked field navigation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
import { useNavigate } from 'react-router-dom';
|
|
import Layout from '../components/Layout';
|
|
|
|
const TILES = [
|
|
{
|
|
title: 'Datenbankverwaltung',
|
|
icon: '🗄️',
|
|
description: 'Alle Tabellen, Datensätze, Filter und verknüpfte Felder.',
|
|
path: '/db',
|
|
color: 'border-indigo-200 hover:border-indigo-400 hover:bg-indigo-50',
|
|
},
|
|
{
|
|
title: 'Contentverwaltung',
|
|
icon: '✏️',
|
|
description: 'Inhalte erstellen, bearbeiten und veröffentlichen.',
|
|
path: null,
|
|
color: 'border-slate-200 hover:border-slate-300 bg-slate-50 opacity-60 cursor-not-allowed',
|
|
soon: true,
|
|
},
|
|
];
|
|
|
|
export default function Dashboard() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Layout>
|
|
<h2 className="text-xl font-semibold text-slate-700 mb-6">Dashboard</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-3xl">
|
|
{TILES.map(tile => (
|
|
<div
|
|
key={tile.title}
|
|
onClick={() => tile.path && navigate(tile.path)}
|
|
className={`bg-white rounded-2xl border-2 p-6 transition-all ${tile.color} ${tile.path ? 'cursor-pointer' : ''}`}
|
|
>
|
|
<div className="text-4xl mb-3">{tile.icon}</div>
|
|
<h3 className="font-semibold text-slate-800 text-lg mb-1">{tile.title}</h3>
|
|
<p className="text-slate-500 text-sm">{tile.description}</p>
|
|
{tile.soon && (
|
|
<span className="mt-3 inline-block text-xs bg-slate-200 text-slate-500 rounded-full px-2 py-0.5">
|
|
Demnächst
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|