Add click-to-edit pattern across all admin tables

Replace Actions columns with clickable rows that open edit modals
directly. Delete is now an inline two-step confirm button in the
edit modal footer. Games modal links to routes/bosses detail,
route modal links to encounters, and boss modal has an Edit Team button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-08 13:44:38 +01:00
parent 76d69dfaf1
commit f09b8213fd
14 changed files with 145 additions and 228 deletions

View File

@@ -1,7 +1,6 @@
import { useState } from 'react'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { EvolutionFormModal } from '../../components/admin/EvolutionFormModal'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import {
useEvolutionList,
useCreateEvolution,
@@ -29,7 +28,6 @@ export function AdminEvolutions() {
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<EvolutionAdmin | null>(null)
const [deleting, setDeleting] = useState<EvolutionAdmin | null>(null)
const columns: Column<EvolutionAdmin>[] = [
{
@@ -57,25 +55,6 @@ export function AdminEvolutions() {
{ header: 'Trigger', accessor: (e) => e.trigger },
{ header: 'Level', accessor: (e) => e.minLevel ?? '-' },
{ header: 'Item', accessor: (e) => e.item ?? '-' },
{
header: 'Actions',
accessor: (e) => (
<div className="flex gap-2">
<button
onClick={() => setEditing(e)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => setDeleting(e)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
),
},
]
return (
@@ -123,6 +102,7 @@ export function AdminEvolutions() {
isLoading={isLoading}
emptyMessage="No evolutions found."
keyFn={(e) => e.id}
onRowClick={(e) => setEditing(e)}
/>
{totalPages > 1 && (
@@ -189,19 +169,11 @@ export function AdminEvolutions() {
}
onClose={() => setEditing(null)}
isSubmitting={updateEvolution.isPending}
/>
)}
{deleting && (
<DeleteConfirmModal
title={`Delete evolution?`}
message={`This will permanently delete the evolution from ${deleting.fromPokemon.name} to ${deleting.toPokemon.name}.`}
onConfirm={() =>
deleteEvolution.mutate(deleting.id, {
onSuccess: () => setDeleting(null),
onDelete={() =>
deleteEvolution.mutate(editing.id, {
onSuccess: () => setEditing(null),
})
}
onCancel={() => setDeleting(null)}
isDeleting={deleteEvolution.isPending}
/>
)}