TheFurya/nuzlocke-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add click-to-edit pattern across all admin tables

Browse Source 
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:
Julian Tabel
2026-02-08 13:44:38 +01:00
parent 76d69dfaf1
commit f09b8213fd
14 changed files with 145 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/admin/BossBattleFormModal.tsx
View File

@@ -10,6 +10,9 @@ interface BossBattleFormModalProps {
onSubmit: (data: CreateBossBattleInput | UpdateBossBattleInput) => void
onClose: () => void
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
onEditTeam?: () => void
}
const BOSS_TYPES = [
@@ -28,6 +31,9 @@ export function BossBattleFormModal({
onSubmit,
onClose,
isSubmitting,
onDelete,
isDeleting,
onEditTeam,
}: BossBattleFormModalProps) {
const [name, setName] = useState(boss?.name ?? '')
const [bossType, setBossType] = useState(boss?.bossType ?? 'gym_leader')
@@ -63,6 +69,17 @@ export function BossBattleFormModal({
onClose={onClose}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
onDelete={onDelete}
isDeleting={isDeleting}
headerExtra={onEditTeam ? (
<button
type="button"
onClick={onEditTeam}
className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
>
Edit Team ({boss?.pokemon.length ?? 0})
</button>
) : undefined}
>
<div className="grid grid-cols-2 gap-4">
<div>

6
frontend/src/components/admin/EvolutionFormModal.tsx
View File

@@ -8,6 +8,8 @@ interface EvolutionFormModalProps {
onSubmit: (data: CreateEvolutionInput | UpdateEvolutionInput) => void
onClose: () => void
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
}
const TRIGGER_OPTIONS = ['level-up', 'trade', 'use-item', 'shed', 'other']
@@ -17,6 +19,8 @@ export function EvolutionFormModal({
onSubmit,
onClose,
isSubmitting,
onDelete,
isDeleting,
}: EvolutionFormModalProps) {
const [fromPokemonId, setFromPokemonId] = useState<number | null>(
evolution?.fromPokemonId ?? null,
@@ -52,6 +56,8 @@ export function EvolutionFormModal({
onClose={onClose}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
onDelete={onDelete}
isDeleting={isDeleting}
>
<PokemonSelector
label="From Pokemon"

36
frontend/src/components/admin/FormModal.tsx
View File

@@ -1,4 +1,4 @@
import { type FormEvent, type ReactNode } from 'react'
import { type FormEvent, type ReactNode, useState, useEffect } from 'react'
interface FormModalProps {
title: string
@@ -7,6 +7,9 @@ interface FormModalProps {
children: ReactNode
submitLabel?: string
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
headerExtra?: ReactNode
}
export function FormModal({
@@ -16,17 +19,46 @@ export function FormModal({
children,
submitLabel = 'Save',
isSubmitting,
onDelete,
isDeleting,
headerExtra,
}: FormModalProps) {
const [confirmingDelete, setConfirmingDelete] = useState(false)
// Reset confirm state when modal closes/reopens
useEffect(() => {
setConfirmingDelete(false)
}, [onDelete])
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h2 className="text-lg font-semibold">{title}</h2>
{headerExtra}
</div>
<form onSubmit={onSubmit}>
<div className="px-6 py-4 space-y-4">{children}</div>
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-3">
{onDelete && (
<button
type="button"
disabled={isDeleting}
onClick={() => {
if (confirmingDelete) {
onDelete()
} else {
setConfirmingDelete(true)
}
}}
onBlur={() => setConfirmingDelete(false)}
className="px-4 py-2 text-sm font-medium rounded-md text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50"
>
{isDeleting ? 'Deleting...' : confirmingDelete ? 'Confirm?' : 'Delete'}
</button>
)}
<div className="flex-1" />
<button
type="button"
onClick={onClose}

16
frontend/src/components/admin/GameFormModal.tsx
View File

@@ -1,4 +1,5 @@
import { type FormEvent, useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { FormModal } from './FormModal'
import type { Game, CreateGameInput, UpdateGameInput } from '../../types'
@@ -7,6 +8,9 @@ interface GameFormModalProps {
onSubmit: (data: CreateGameInput | UpdateGameInput) => void
onClose: () => void
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
detailUrl?: string
}
function slugify(name: string) {
@@ -16,7 +20,7 @@ function slugify(name: string) {
.replace(/^-|-$/g, '')
}
export function GameFormModal({ game, onSubmit, onClose, isSubmitting }: GameFormModalProps) {
export function GameFormModal({ game, onSubmit, onClose, isSubmitting, onDelete, isDeleting, detailUrl }: GameFormModalProps) {
const [name, setName] = useState(game?.name ?? '')
const [slug, setSlug] = useState(game?.slug ?? '')
const [generation, setGeneration] = useState(String(game?.generation ?? ''))
@@ -47,6 +51,16 @@ export function GameFormModal({ game, onSubmit, onClose, isSubmitting }: GameFor
onClose={onClose}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
onDelete={onDelete}
isDeleting={isDeleting}
headerExtra={detailUrl ? (
<Link
to={detailUrl}
className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
>
View Routes & Bosses
</Link>
) : undefined}
>
<div>
<label className="block text-sm font-medium mb-1">Name</label>

6
frontend/src/components/admin/PokemonFormModal.tsx
View File

@@ -7,9 +7,11 @@ interface PokemonFormModalProps {
onSubmit: (data: CreatePokemonInput | UpdatePokemonInput) => void
onClose: () => void
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
}
export function PokemonFormModal({ pokemon, onSubmit, onClose, isSubmitting }: PokemonFormModalProps) {
export function PokemonFormModal({ pokemon, onSubmit, onClose, isSubmitting, onDelete, isDeleting }: PokemonFormModalProps) {
const [pokeapiId, setPokeapiId] = useState(String(pokemon?.pokeapiId ?? ''))
const [nationalDex, setNationalDex] = useState(String(pokemon?.nationalDex ?? ''))
const [name, setName] = useState(pokemon?.name ?? '')
@@ -37,6 +39,8 @@ export function PokemonFormModal({ pokemon, onSubmit, onClose, isSubmitting }: P
onClose={onClose}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
onDelete={onDelete}
isDeleting={isDeleting}
>
<div>
<label className="block text-sm font-medium mb-1">PokeAPI ID</label>

6
frontend/src/components/admin/RouteEncounterFormModal.tsx
View File

@@ -8,6 +8,8 @@ interface RouteEncounterFormModalProps {
onSubmit: (data: CreateRouteEncounterInput | UpdateRouteEncounterInput) => void
onClose: () => void
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
}
export function RouteEncounterFormModal({
@@ -15,6 +17,8 @@ export function RouteEncounterFormModal({
onSubmit,
onClose,
isSubmitting,
onDelete,
isDeleting,
}: RouteEncounterFormModalProps) {
const [search, setSearch] = useState('')
const [pokemonId, setPokemonId] = useState(encounter?.pokemonId ?? 0)
@@ -52,6 +56,8 @@ export function RouteEncounterFormModal({
onClose={onClose}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
onDelete={onDelete}
isDeleting={isDeleting}
>
{!encounter && (
<div>

16
frontend/src/components/admin/RouteFormModal.tsx
View File

@@ -1,4 +1,5 @@
import { type FormEvent, useState } from 'react'
import { Link } from 'react-router-dom'
import { FormModal } from './FormModal'
import type { Route, CreateRouteInput, UpdateRouteInput } from '../../types'
@@ -8,9 +9,12 @@ interface RouteFormModalProps {
onSubmit: (data: CreateRouteInput | UpdateRouteInput) => void
onClose: () => void
isSubmitting?: boolean
onDelete?: () => void
isDeleting?: boolean
detailUrl?: string
}
export function RouteFormModal({ route, nextOrder, onSubmit, onClose, isSubmitting }: RouteFormModalProps) {
export function RouteFormModal({ route, nextOrder, onSubmit, onClose, isSubmitting, onDelete, isDeleting, detailUrl }: RouteFormModalProps) {
const [name, setName] = useState(route?.name ?? '')
const [order, setOrder] = useState(String(route?.order ?? nextOrder ?? 0))
const [pinwheelZone, setPinwheelZone] = useState(
@@ -32,6 +36,16 @@ export function RouteFormModal({ route, nextOrder, onSubmit, onClose, isSubmitti
onClose={onClose}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
onDelete={onDelete}
isDeleting={isDeleting}
headerExtra={detailUrl ? (
<Link
to={detailUrl}
className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
>
View Encounters
</Link>
) : undefined}
>
<div>
<label className="block text-sm font-medium mb-1">Name</label>

36
frontend/src/pages/admin/AdminEvolutions.tsx
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}
/>
)}

97
frontend/src/pages/admin/AdminGameDetail.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { useParams, Link } from 'react-router-dom'
import {
DndContext,
closestCenter,
@@ -17,7 +17,6 @@ import {
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { RouteFormModal } from '../../components/admin/RouteFormModal'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import { BossBattleFormModal } from '../../components/admin/BossBattleFormModal'
import { BossTeamEditor } from '../../components/admin/BossTeamEditor'
import { useGame } from '../../hooks/useGames'
@@ -39,13 +38,9 @@ import type { CreateBossBattleInput, UpdateBossBattleInput } from '../../types/a
function SortableRouteRow({
route,
onEdit,
onDelete,
onClick,
}: {
route: GameRoute
onEdit: (r: GameRoute) => void
onDelete: (r: GameRoute) => void
onClick: (r: GameRoute) => void
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
@@ -83,29 +78,12 @@ function SortableRouteRow({
</td>
<td className="px-4 py-3 text-sm whitespace-nowrap w-16">{route.order}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{route.name}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap w-32">
<div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => onEdit(route)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => onDelete(route)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
</td>
</tr>
)
}
export function AdminGameDetail() {
const { gameId } = useParams<{ gameId: string }>()
const navigate = useNavigate()
const id = Number(gameId)
const { data: game, isLoading } = useGame(id)
@@ -121,10 +99,8 @@ export function AdminGameDetail() {
const [tab, setTab] = useState<'routes' | 'bosses'>('routes')
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<GameRoute | null>(null)
const [deleting, setDeleting] = useState<GameRoute | null>(null)
const [showCreateBoss, setShowCreateBoss] = useState(false)
const [editingBoss, setEditingBoss] = useState<BossBattle | null>(null)
const [deletingBoss, setDeletingBoss] = useState<BossBattle | null>(null)
const [editingTeam, setEditingTeam] = useState<BossBattle | null>(null)
const sensors = useSensors(
@@ -235,9 +211,6 @@ export function AdminGameDetail() {
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
Actions
</th>
</tr>
</thead>
<DndContext
@@ -254,9 +227,7 @@ export function AdminGameDetail() {
<SortableRouteRow
key={route.id}
route={route}
onEdit={setEditing}
onDelete={setDeleting}
onClick={(r) => navigate(`/admin/games/${id}/routes/${r.id}`)}
onClick={(r) => setEditing(r)}
/>
))}
</tbody>
@@ -291,20 +262,13 @@ export function AdminGameDetail() {
}
onClose={() => setEditing(null)}
isSubmitting={updateRoute.isPending}
/>
)}
{deleting && (
<DeleteConfirmModal
title={`Delete ${deleting.name}?`}
message="This will permanently delete the route. Routes with existing encounters cannot be deleted."
onConfirm={() =>
deleteRoute.mutate(deleting.id, {
onSuccess: () => setDeleting(null),
onDelete={() =>
deleteRoute.mutate(editing.id, {
onSuccess: () => setEditing(null),
})
}
onCancel={() => setDeleting(null)}
isDeleting={deleteRoute.isPending}
detailUrl={`/admin/games/${id}/routes/${editing.id}`}
/>
)}
</>
@@ -358,14 +322,15 @@ export function AdminGameDetail() {
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
Team
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-40">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
{bosses.map((boss) => (
<tr key={boss.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
<tr
key={boss.id}
className="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
onClick={() => setEditingBoss(boss)}
>
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.order}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap font-medium">{boss.name}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap capitalize">
@@ -374,28 +339,6 @@ export function AdminGameDetail() {
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.location}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.levelCap}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.pokemon.length}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">
<div className="flex gap-2">
<button
onClick={() => setEditingTeam(boss)}
className="text-green-600 hover:text-green-800 dark:text-green-400 text-sm"
>
Team
</button>
<button
onClick={() => setEditingBoss(boss)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => setDeletingBoss(boss)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
</td>
</tr>
))}
</tbody>
@@ -434,20 +377,16 @@ export function AdminGameDetail() {
}
onClose={() => setEditingBoss(null)}
isSubmitting={updateBoss.isPending}
/>
)}
{deletingBoss && (
<DeleteConfirmModal
title={`Delete ${deletingBoss.name}?`}
message="This will permanently delete this boss battle and its pokemon team."
onConfirm={() =>
deleteBoss.mutate(deletingBoss.id, {
onSuccess: () => setDeletingBoss(null),
onDelete={() =>
deleteBoss.mutate(editingBoss.id, {
onSuccess: () => setEditingBoss(null),
})
}
onCancel={() => setDeletingBoss(null)}
isDeleting={deleteBoss.isPending}
onEditTeam={() => {
setEditingTeam(editingBoss)
setEditingBoss(null)
}}
/>
)}

40
frontend/src/pages/admin/AdminGames.tsx
View File

@@ -1,8 +1,6 @@
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { GameFormModal } from '../../components/admin/GameFormModal'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import { useGames } from '../../hooks/useGames'
import { useCreateGame, useUpdateGame, useDeleteGame } from '../../hooks/useAdmin'
import { exportGames } from '../../api/admin'
@@ -10,7 +8,6 @@ import { downloadJson } from '../../utils/download'
import type { Game, CreateGameInput, UpdateGameInput } from '../../types'
export function AdminGames() {
const navigate = useNavigate()
const { data: games = [], isLoading } = useGames()
const createGame = useCreateGame()
const updateGame = useUpdateGame()
@@ -18,7 +15,6 @@ export function AdminGames() {
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<Game | null>(null)
const [deleting, setDeleting] = useState<Game | null>(null)
const columns: Column<Game>[] = [
{ header: 'Name', accessor: (g) => g.name },
@@ -26,25 +22,6 @@ export function AdminGames() {
{ header: 'Region', accessor: (g) => g.region, sortKey: (g) => g.region },
{ header: 'Gen', accessor: (g) => g.generation, sortKey: (g) => g.generation },
{ header: 'Year', accessor: (g) => g.releaseYear ?? '-', sortKey: (g) => g.releaseYear ?? 0 },
{
header: 'Actions',
accessor: (g) => (
<div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => setEditing(g)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => setDeleting(g)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
),
},
]
return (
@@ -75,7 +52,7 @@ export function AdminGames() {
data={games}
isLoading={isLoading}
emptyMessage="No games yet. Add one to get started."
onRowClick={(g) => navigate(`/admin/games/${g.id}`)}
onRowClick={(g) => setEditing(g)}
keyFn={(g) => g.id}
/>
@@ -102,20 +79,13 @@ export function AdminGames() {
}
onClose={() => setEditing(null)}
isSubmitting={updateGame.isPending}
/>
)}
{deleting && (
<DeleteConfirmModal
title={`Delete ${deleting.name}?`}
message="This will permanently delete the game and all its routes. Games with existing runs cannot be deleted."
onConfirm={() =>
deleteGame.mutate(deleting.id, {
onSuccess: () => setDeleting(null),
onDelete={() =>
deleteGame.mutate(editing.id, {
onSuccess: () => setEditing(null),
})
}
onCancel={() => setDeleting(null)}
isDeleting={deleteGame.isPending}
detailUrl={`/admin/games/${editing.id}`}
/>
)}
</div>

36
frontend/src/pages/admin/AdminPokemon.tsx
View File

@@ -2,7 +2,6 @@ import { useState } from 'react'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { PokemonFormModal } from '../../components/admin/PokemonFormModal'
import { BulkImportModal } from '../../components/admin/BulkImportModal'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import {
usePokemonList,
useCreatePokemon,
@@ -32,7 +31,6 @@ export function AdminPokemon() {
const [showCreate, setShowCreate] = useState(false)
const [showBulkImport, setShowBulkImport] = useState(false)
const [editing, setEditing] = useState<Pokemon | null>(null)
const [deleting, setDeleting] = useState<Pokemon | null>(null)
const columns: Column<Pokemon>[] = [
{ header: 'Dex #', accessor: (p) => p.nationalDex, className: 'w-16' },
@@ -48,25 +46,6 @@ export function AdminPokemon() {
},
{ header: 'Name', accessor: (p) => p.name },
{ header: 'Types', accessor: (p) => p.types.join(', ') },
{
header: 'Actions',
accessor: (p) => (
<div className="flex gap-2">
<button
onClick={() => setEditing(p)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => setDeleting(p)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
),
},
]
return (
@@ -120,6 +99,7 @@ export function AdminPokemon() {
isLoading={isLoading}
emptyMessage="No pokemon found."
keyFn={(p) => p.id}
onRowClick={(p) => setEditing(p)}
/>
{/* Pagination */}
@@ -194,19 +174,11 @@ export function AdminPokemon() {
}
onClose={() => setEditing(null)}
isSubmitting={updatePokemon.isPending}
/>
)}
{deleting && (
<DeleteConfirmModal
title={`Delete ${deleting.name}?`}
message="This will permanently delete the pokemon. Pokemon with existing encounters cannot be deleted."
onConfirm={() =>
deletePokemon.mutate(deleting.id, {
onSuccess: () => setDeleting(null),
onDelete={() =>
deletePokemon.mutate(editing.id, {
onSuccess: () => setEditing(null),
})
}
onCancel={() => setDeleting(null)}
isDeleting={deletePokemon.isPending}
/>
)}

36
frontend/src/pages/admin/AdminRouteDetail.tsx
View File

@@ -2,7 +2,6 @@ import { useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import { AdminTable, type Column } from '../../components/admin/AdminTable'
import { RouteEncounterFormModal } from '../../components/admin/RouteEncounterFormModal'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import { useGame, useRoutePokemon } from '../../hooks/useGames'
import {
useAddRouteEncounter,
@@ -29,7 +28,6 @@ export function AdminRouteDetail() {
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<RouteEncounterDetail | null>(null)
const [deleting, setDeleting] = useState<RouteEncounterDetail | null>(null)
const route = game?.routes?.find((r) => r.id === rId)
@@ -54,25 +52,6 @@ export function AdminRouteDetail() {
accessor: (e) =>
e.minLevel === e.maxLevel ? `Lv ${e.minLevel}` : `Lv ${e.minLevel}-${e.maxLevel}`,
},
{
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"
>
Remove
</button>
</div>
),
},
]
return (
@@ -109,6 +88,7 @@ export function AdminRouteDetail() {
isLoading={isLoading}
emptyMessage="No pokemon assigned to this route yet."
keyFn={(e) => e.id}
onRowClick={(e) => setEditing(e)}
/>
{showCreate && (
@@ -134,19 +114,11 @@ export function AdminRouteDetail() {
}
onClose={() => setEditing(null)}
isSubmitting={updateEncounter.isPending}
/>
)}
{deleting && (
<DeleteConfirmModal
title={`Remove ${deleting.pokemon.name}?`}
message="This will remove this pokemon from the route's encounter table."
onConfirm={() =>
removeEncounter.mutate(deleting.id, {
onSuccess: () => setDeleting(null),
onDelete={() =>
removeEncounter.mutate(editing.id, {
onSuccess: () => setEditing(null),
})
}
onCancel={() => setDeleting(null)}
isDeleting={removeEncounter.isPending}
/>
)}

14
frontend/src/pages/admin/AdminRuns.tsx
View File

@@ -46,19 +46,6 @@ export function AdminRuns() {
accessor: (r) => new Date(r.startedAt).toLocaleDateString(),
sortKey: (r) => r.startedAt,
},
{
header: 'Actions',
accessor: (r) => (
<div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => setDeleting(r)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
),
},
]
return (
@@ -73,6 +60,7 @@ export function AdminRuns() {
isLoading={runsLoading || gamesLoading}
emptyMessage="No runs yet."
keyFn={(r) => r.id}
onRowClick={(r) => setDeleting(r)}
/>
{deleting && (