Initial commit: snakkimo CMT
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>
This commit is contained in:
48
src/pages/Dashboard.jsx
Normal file
48
src/pages/Dashboard.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
89
src/pages/DatabaseAdmin.jsx
Normal file
89
src/pages/DatabaseAdmin.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Layout from '../components/Layout';
|
||||
import { fetchAll } from '../lib/api';
|
||||
import { TABLES } from '../lib/tables';
|
||||
|
||||
function TableTile({ tableKey, meta, onClick }) {
|
||||
const [counts, setCounts] = useState(null);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchAll(meta.endpoint)
|
||||
.then(rows => {
|
||||
const arr = Array.isArray(rows) ? rows : [];
|
||||
setCounts({
|
||||
total: arr.length,
|
||||
published: arr.filter(r => r.status === 'published').length,
|
||||
blocked: arr.filter(r => r.status === 'blocked').length,
|
||||
capped: arr.length === 500,
|
||||
});
|
||||
})
|
||||
.catch(() => setError(true));
|
||||
}, [meta.endpoint]);
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="bg-white rounded-2xl border-2 border-slate-200 hover:border-indigo-400 hover:shadow-md p-5 cursor-pointer transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="text-2xl">{meta.icon}</span>
|
||||
<h3 className="font-semibold text-slate-800 text-base">{meta.label}</h3>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 text-xs">Fehler beim Laden</p>}
|
||||
|
||||
{!counts && !error && (
|
||||
<div className="space-y-2">
|
||||
{[1,2,3].map(i => (
|
||||
<div key={i} className="h-4 bg-slate-100 rounded animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{counts && (
|
||||
<div className="space-y-1.5 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-500">Gesamt</span>
|
||||
<span className="font-medium text-slate-800">
|
||||
{counts.capped ? '500+' : counts.total}
|
||||
</span>
|
||||
</div>
|
||||
{meta.statusField && (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-green-600">Published</span>
|
||||
<span className="font-medium text-green-700">{counts.published}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-red-500">Blocked</span>
|
||||
<span className="font-medium text-red-600">{counts.blocked}</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DatabaseAdmin() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout back="/">
|
||||
<h2 className="text-xl font-semibold text-slate-700 mb-6">Datenbankverwaltung</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{Object.entries(TABLES).map(([key, meta]) => (
|
||||
<TableTile
|
||||
key={key}
|
||||
tableKey={key}
|
||||
meta={meta}
|
||||
onClick={() => navigate(`/db/${key}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
72
src/pages/Login.jsx
Normal file
72
src/pages/Login.jsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { login } from '../lib/api';
|
||||
|
||||
export default function Login() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
try {
|
||||
await login(email, password);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-100">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-10 w-full max-w-sm">
|
||||
<div className="text-center mb-8">
|
||||
<div className="text-4xl mb-2">🐟</div>
|
||||
<h1 className="text-2xl font-bold text-slate-800">snakkimo CMT</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">Content Management Tool</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
autoFocus
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
placeholder="admin@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="bg-red-50 text-red-700 text-sm rounded-lg px-3 py-2">{error}</div>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white font-medium rounded-lg py-2 text-sm transition-colors"
|
||||
>
|
||||
{loading ? 'Anmelden…' : 'Anmelden'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
215
src/pages/TableView.jsx
Normal file
215
src/pages/TableView.jsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import Layout from '../components/Layout';
|
||||
import { fetchAll } from '../lib/api';
|
||||
import { TABLES, STATUS_COLORS } from '../lib/tables';
|
||||
|
||||
function truncate(str, n = 60) {
|
||||
if (str == null) return '—';
|
||||
const s = String(str);
|
||||
return s.length > n ? s.slice(0, n) + '…' : s;
|
||||
}
|
||||
|
||||
function CellValue({ col, value, linkedFields, navigate }) {
|
||||
if (value == null || value === '') return <span className="text-slate-300">—</span>;
|
||||
|
||||
// Array of IDs (e.g. picture_ids, word_ids)
|
||||
if (Array.isArray(value)) {
|
||||
if (value.length === 0) return <span className="text-slate-300">[]</span>;
|
||||
const targetTable = linkedFields[col];
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{value.slice(0, 3).map(id => (
|
||||
<button
|
||||
key={id}
|
||||
onClick={() => targetTable && navigate(`/db/${targetTable}?id=${id}`)}
|
||||
className="text-xs bg-indigo-50 text-indigo-600 rounded px-1.5 py-0.5 hover:bg-indigo-100 font-mono"
|
||||
title={String(id)}
|
||||
>
|
||||
{String(id).slice(0, 8)}
|
||||
</button>
|
||||
))}
|
||||
{value.length > 3 && (
|
||||
<span className="text-xs text-slate-400">+{value.length - 3}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Single UUID FK (e.g. question_id)
|
||||
if (typeof value === 'string' && linkedFields[col]) {
|
||||
const targetTable = linkedFields[col];
|
||||
return (
|
||||
<button
|
||||
onClick={() => navigate(`/db/${targetTable}?id=${value}`)}
|
||||
className="text-xs bg-indigo-50 text-indigo-600 rounded px-1.5 py-0.5 hover:bg-indigo-100 font-mono"
|
||||
title={value}
|
||||
>
|
||||
{value.slice(0, 8)}…
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Status badge
|
||||
if (col === 'status') {
|
||||
const cls = STATUS_COLORS[value] || 'bg-slate-100 text-slate-600';
|
||||
return <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${cls}`}>{value}</span>;
|
||||
}
|
||||
|
||||
// Timestamp
|
||||
if (col.endsWith('_at') || col.endsWith('_timestamp')) {
|
||||
return <span className="text-xs text-slate-500">{new Date(value).toLocaleDateString('de-DE')}</span>;
|
||||
}
|
||||
|
||||
// Picture link — show as thumbnail + link
|
||||
if (col === 'picture_link') {
|
||||
return (
|
||||
<a href={value} target="_blank" rel="noreferrer" className="text-xs text-indigo-600 underline">
|
||||
Bild öffnen
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className="text-sm text-slate-700">{truncate(value)}</span>;
|
||||
}
|
||||
|
||||
export default function TableView() {
|
||||
const { tableKey } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const meta = TABLES[tableKey];
|
||||
|
||||
const [rows, setRows] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('');
|
||||
const [textFilter, setTextFilter] = useState('');
|
||||
const [highlightId, setHighlightId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const id = params.get('id');
|
||||
if (id) setHighlightId(id);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!meta) return;
|
||||
setLoading(true);
|
||||
fetchAll(meta.endpoint)
|
||||
.then(data => setRows(Array.isArray(data) ? data : []))
|
||||
.catch(err => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [meta]);
|
||||
|
||||
const statuses = useMemo(() => {
|
||||
const set = new Set(rows.map(r => r.status).filter(Boolean));
|
||||
return [...set].sort();
|
||||
}, [rows]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
return rows.filter(row => {
|
||||
if (statusFilter && row.status !== statusFilter) return false;
|
||||
if (textFilter) {
|
||||
const q = textFilter.toLowerCase();
|
||||
return Object.values(row).some(v =>
|
||||
v != null && String(v).toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [rows, statusFilter, textFilter]);
|
||||
|
||||
if (!meta) return <Layout back="/db"><p className="text-red-500">Unbekannte Tabelle: {tableKey}</p></Layout>;
|
||||
|
||||
return (
|
||||
<Layout back="/db">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold text-slate-700">
|
||||
{meta.icon} {meta.label}
|
||||
<span className="ml-2 text-base font-normal text-slate-400">
|
||||
({filtered.length}{rows.length === 500 ? '+' : ''} von {rows.length}{rows.length === 500 ? '+' : ''})
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-3 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suche (contains)…"
|
||||
value={textFilter}
|
||||
onChange={e => setTextFilter(e.target.value)}
|
||||
className="border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white w-56"
|
||||
/>
|
||||
{meta.statusField && statuses.length > 0 && (
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={e => setStatusFilter(e.target.value)}
|
||||
className="border border-slate-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white"
|
||||
>
|
||||
<option value="">Alle Status</option>
|
||||
{statuses.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
)}
|
||||
{(statusFilter || textFilter) && (
|
||||
<button
|
||||
onClick={() => { setStatusFilter(''); setTextFilter(''); }}
|
||||
className="text-sm text-slate-500 hover:text-slate-700 underline"
|
||||
>
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && <div className="text-red-500 text-sm mb-4">{error}</div>}
|
||||
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<div key={i} className="h-10 bg-white rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white rounded-2xl shadow-sm overflow-auto border border-slate-200">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 border-b border-slate-200">
|
||||
{meta.columns.map(col => (
|
||||
<th key={col} className="text-left px-4 py-2.5 text-xs font-semibold text-slate-500 uppercase tracking-wide whitespace-nowrap">
|
||||
{col}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={meta.columns.length} className="text-center py-10 text-slate-400">
|
||||
Keine Einträge gefunden
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{filtered.map((row, i) => (
|
||||
<tr
|
||||
key={row.id || i}
|
||||
className={`border-b border-slate-100 hover:bg-slate-50 transition-colors
|
||||
${highlightId && row.id === highlightId ? 'bg-indigo-50 ring-1 ring-indigo-300' : ''}`}
|
||||
>
|
||||
{meta.columns.map(col => (
|
||||
<td key={col} className="px-4 py-2.5 align-top max-w-[280px]">
|
||||
<CellValue
|
||||
col={col}
|
||||
value={row[col]}
|
||||
linkedFields={meta.linkedFields}
|
||||
navigate={navigate}
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user