initial project setup
Fastify + Prisma backend, React + Vite frontend, Docker deployment. Multi-board feedback platform with anonymous cookie auth, passkey upgrade path, ALTCHA spam protection, plugin system, and full privacy-first architecture.
This commit is contained in:
260
packages/web/src/pages/admin/AdminBoards.tsx
Normal file
260
packages/web/src/pages/admin/AdminBoards.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { api } from '../../lib/api'
|
||||
|
||||
interface Board {
|
||||
id: string
|
||||
slug: string
|
||||
name: string
|
||||
description: string
|
||||
postCount: number
|
||||
archived: boolean
|
||||
voteBudget: number
|
||||
voteResetSchedule: string
|
||||
}
|
||||
|
||||
export default function AdminBoards() {
|
||||
const [boards, setBoards] = useState<Board[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [editBoard, setEditBoard] = useState<Board | null>(null)
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
const [form, setForm] = useState({
|
||||
name: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
voteBudget: 10,
|
||||
voteResetSchedule: 'monthly',
|
||||
})
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const fetchBoards = async () => {
|
||||
try {
|
||||
const b = await api.get<Board[]>('/admin/boards')
|
||||
setBoards(b)
|
||||
} catch {} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { fetchBoards() }, [])
|
||||
|
||||
const resetForm = () => {
|
||||
setForm({ name: '', slug: '', description: '', voteBudget: 10, voteResetSchedule: 'monthly' })
|
||||
setEditBoard(null)
|
||||
setShowCreate(false)
|
||||
}
|
||||
|
||||
const openEdit = (b: Board) => {
|
||||
setEditBoard(b)
|
||||
setForm({
|
||||
name: b.name,
|
||||
slug: b.slug,
|
||||
description: b.description,
|
||||
voteBudget: b.voteBudget,
|
||||
voteResetSchedule: b.voteResetSchedule,
|
||||
})
|
||||
setShowCreate(true)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true)
|
||||
try {
|
||||
if (editBoard) {
|
||||
await api.put(`/admin/boards/${editBoard.id}`, form)
|
||||
} else {
|
||||
await api.post('/admin/boards', form)
|
||||
}
|
||||
resetForm()
|
||||
fetchBoards()
|
||||
} catch {} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async (id: string, archived: boolean) => {
|
||||
try {
|
||||
await api.patch(`/admin/boards/${id}`, { archived: !archived })
|
||||
fetchBoards()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const slugify = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1
|
||||
className="text-2xl font-bold"
|
||||
style={{ fontFamily: 'var(--font-heading)', color: 'var(--admin-accent)' }}
|
||||
>
|
||||
Boards
|
||||
</h1>
|
||||
<div className="flex gap-2">
|
||||
<Link to="/admin" className="btn btn-ghost text-sm">Back</Link>
|
||||
<button onClick={() => { resetForm(); setShowCreate(true) }} className="btn btn-admin text-sm">
|
||||
New Board
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div
|
||||
className="w-6 h-6 border-2 rounded-full"
|
||||
style={{ borderColor: 'var(--border)', borderTopColor: 'var(--admin-accent)', animation: 'spin 0.6s linear infinite' }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-3">
|
||||
{boards.map((board) => (
|
||||
<div
|
||||
key={board.id}
|
||||
className="card p-4 flex items-center gap-4"
|
||||
style={{ opacity: board.archived ? 0.5 : 1 }}
|
||||
>
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center text-sm font-bold shrink-0"
|
||||
style={{
|
||||
fontFamily: 'var(--font-heading)',
|
||||
background: 'var(--admin-subtle)',
|
||||
color: 'var(--admin-accent)',
|
||||
}}
|
||||
>
|
||||
{board.name.charAt(0)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-medium" style={{ fontFamily: 'var(--font-heading)', color: 'var(--text)' }}>
|
||||
{board.name}
|
||||
</h3>
|
||||
{board.archived && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded" style={{ background: 'var(--border)', color: 'var(--text-tertiary)' }}>
|
||||
archived
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs truncate" style={{ color: 'var(--text-tertiary)' }}>
|
||||
/{board.slug} - {board.postCount} posts - Budget: {board.voteBudget}/{board.voteResetSchedule}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button onClick={() => openEdit(board)} className="btn btn-ghost text-xs px-2 py-1" style={{ color: 'var(--admin-accent)' }}>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleArchive(board.id, board.archived)}
|
||||
className="btn btn-ghost text-xs px-2 py-1"
|
||||
style={{ color: board.archived ? 'var(--success)' : 'var(--warning)' }}
|
||||
>
|
||||
{board.archived ? 'Restore' : 'Archive'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{boards.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-sm mb-4" style={{ color: 'var(--text-tertiary)' }}>No boards yet</p>
|
||||
<button onClick={() => setShowCreate(true)} className="btn btn-admin">Create first board</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create/Edit modal */}
|
||||
{showCreate && (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center"
|
||||
onClick={resetForm}
|
||||
>
|
||||
<div className="absolute inset-0 fade-in" style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }} />
|
||||
<div
|
||||
className="relative w-full max-w-md mx-4 p-6 rounded-xl shadow-2xl slide-up"
|
||||
style={{ background: 'var(--surface)', border: '1px solid var(--border)' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="text-base font-bold mb-4" style={{ fontFamily: 'var(--font-heading)', color: 'var(--admin-accent)' }}>
|
||||
{editBoard ? 'Edit Board' : 'New Board'}
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium block mb-1" style={{ color: 'var(--text-tertiary)' }}>Name</label>
|
||||
<input
|
||||
className="input"
|
||||
value={form.name}
|
||||
onChange={(e) => {
|
||||
setForm((f) => ({
|
||||
...f,
|
||||
name: e.target.value,
|
||||
slug: editBoard ? f.slug : slugify(e.target.value),
|
||||
}))
|
||||
}}
|
||||
placeholder="Feature Requests"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium block mb-1" style={{ color: 'var(--text-tertiary)' }}>Slug</label>
|
||||
<input
|
||||
className="input"
|
||||
value={form.slug}
|
||||
onChange={(e) => setForm((f) => ({ ...f, slug: e.target.value }))}
|
||||
placeholder="feature-requests"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium block mb-1" style={{ color: 'var(--text-tertiary)' }}>Description</label>
|
||||
<textarea
|
||||
className="input"
|
||||
rows={2}
|
||||
value={form.description}
|
||||
onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
|
||||
placeholder="What is this board for?"
|
||||
style={{ resize: 'vertical' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium block mb-1" style={{ color: 'var(--text-tertiary)' }}>Vote Budget</label>
|
||||
<input
|
||||
className="input"
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
value={form.voteBudget}
|
||||
onChange={(e) => setForm((f) => ({ ...f, voteBudget: parseInt(e.target.value) || 10 }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium block mb-1" style={{ color: 'var(--text-tertiary)' }}>Reset Schedule</label>
|
||||
<select
|
||||
className="input"
|
||||
value={form.voteResetSchedule}
|
||||
onChange={(e) => setForm((f) => ({ ...f, voteResetSchedule: e.target.value }))}
|
||||
>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="never">Never</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button onClick={resetForm} className="btn btn-secondary flex-1">Cancel</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || !form.name.trim() || !form.slug.trim()}
|
||||
className="btn btn-admin flex-1"
|
||||
style={{ opacity: saving ? 0.6 : 1 }}
|
||||
>
|
||||
{saving ? 'Saving...' : editBoard ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user