Admin CRUD Generator
Create admin dashboard pages following this project's established patterns.
Admin Page Structure
src/
├── routes/admin/
│ └── resources/
│ ├── index.tsx # List page
│ └── $resourceId.tsx # Detail/edit page
└── components/admin/
└── resources/
├── ResourcesList.tsx # List container
├── ResourceForm.tsx # Create/edit form
└── components/
├── ResourceTable.tsx # Data table
├── StatusBadge.tsx # Status indicator
├── BulkActionsBar.tsx # Bulk operations
└── ResourceActions.tsx # Row actions
List Page Template
typescript
1// src/routes/admin/resources/index.tsx
2import { createFileRoute } from '@tanstack/react-router'
3import { ResourcesList } from '@/components/admin/resources/ResourcesList'
4
5export const Route = createFileRoute('/admin/resources/')({
6 component: ResourcesPage,
7})
8
9function ResourcesPage() {
10 return <ResourcesList />
11}
List Component with Data Table
typescript
1// src/components/admin/resources/ResourcesList.tsx
2import { useQuery } from '@tanstack/react-query'
3import { useTranslation } from 'react-i18next'
4import { Plus } from 'lucide-react'
5import { Link } from '@tanstack/react-router'
6
7import { Button } from '@/components/ui/button'
8import { ResourceTable } from './components/ResourceTable'
9
10export function ResourcesList() {
11 const { t } = useTranslation()
12
13 const { data, isLoading, error } = useQuery({
14 queryKey: ['resources'],
15 queryFn: async () => {
16 const res = await fetch('/api/resources', { credentials: 'include' })
17 const json = await res.json()
18 if (!json.success) throw new Error(json.error)
19 return json
20 },
21 })
22
23 if (isLoading) {
24 return (
25 <div className="flex items-center justify-center h-64">
26 <div
27 className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-pink-500"
28 role="status"
29 aria-label="Loading"
30 />
31 </div>
32 )
33 }
34
35 if (error) {
36 return (
37 <div className="text-center py-12">
38 <p className="text-red-500">{t('Failed to load')}</p>
39 </div>
40 )
41 }
42
43 const { items, total } = data
44
45 if (items.length === 0) {
46 return (
47 <div className="text-center py-12">
48 <Package className="mx-auto h-12 w-12 text-muted-foreground" />
49 <h3 className="mt-2 text-sm font-semibold">{t('No resources')}</h3>
50 <p className="mt-1 text-sm text-muted-foreground">
51 {t('Get started by creating a new resource.')}
52 </p>
53 <div className="mt-6">
54 <Button asChild>
55 <Link to="/admin/resources/new">
56 <Plus className="mr-2 h-4 w-4" />
57 {t('Add Resource')}
58 </Link>
59 </Button>
60 </div>
61 </div>
62 )
63 }
64
65 return (
66 <div className="space-y-4">
67 <div className="flex items-center justify-between">
68 <h1 className="text-2xl font-bold">{t('Resources')}</h1>
69 <Button asChild>
70 <Link to="/admin/resources/new">
71 <Plus className="mr-2 h-4 w-4" />
72 {t('Add Resource')}
73 </Link>
74 </Button>
75 </div>
76
77 <ResourceTable resources={items} />
78
79 <div className="text-sm text-muted-foreground">
80 {t('{{count}} total', { count: total })}
81 </div>
82 </div>
83 )
84}
Data Table Component
typescript
1// src/components/admin/resources/components/ResourceTable.tsx
2import { useState } from 'react'
3import { Link } from '@tanstack/react-router'
4import { MoreHorizontal, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
5import { useTranslation } from 'react-i18next'
6
7import {
8 DropdownMenu,
9 DropdownMenuContent,
10 DropdownMenuItem,
11 DropdownMenuTrigger,
12} from '@/components/ui/dropdown-menu'
13import { Button } from '@/components/ui/button'
14import { Checkbox } from '@/components/ui/checkbox'
15import { StatusBadge } from './StatusBadge'
16
17interface Resource {
18 id: string
19 name: { en: string }
20 status: 'active' | 'draft' | 'archived'
21 createdAt: string
22}
23
24interface Props {
25 resources: Resource[]
26}
27
28export function ResourceTable({ resources }: Props) {
29 const { t } = useTranslation()
30 const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
31 const [sortKey, setSortKey] = useState<string>('createdAt')
32 const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
33
34 const toggleSelect = (id: string) => {
35 const next = new Set(selectedIds)
36 if (next.has(id)) {
37 next.delete(id)
38 } else {
39 next.add(id)
40 }
41 setSelectedIds(next)
42 }
43
44 const toggleSelectAll = () => {
45 if (selectedIds.size === resources.length) {
46 setSelectedIds(new Set())
47 } else {
48 setSelectedIds(new Set(resources.map((r) => r.id)))
49 }
50 }
51
52 const isAllSelected = selectedIds.size === resources.length
53 const isSomeSelected = selectedIds.size > 0 && selectedIds.size < resources.length
54
55 const handleSort = (key: string) => {
56 if (sortKey === key) {
57 setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
58 } else {
59 setSortKey(key)
60 setSortOrder('desc')
61 }
62 }
63
64 const SortIcon = ({ columnKey }: { columnKey: string }) => {
65 if (sortKey !== columnKey) return <ArrowUpDown className="ml-2 h-4 w-4" />
66 return sortOrder === 'asc'
67 ? <ArrowUp className="ml-2 h-4 w-4" />
68 : <ArrowDown className="ml-2 h-4 w-4" />
69 }
70
71 return (
72 <>
73 {selectedIds.size > 0 && (
74 <BulkActionsBar
75 selectedCount={selectedIds.size}
76 onClearSelection={() => setSelectedIds(new Set())}
77 />
78 )}
79
80 <div className="rounded-md border">
81 <table className="w-full">
82 <thead>
83 <tr className="border-b bg-muted/50">
84 <th className="w-12 p-4">
85 <Checkbox
86 checked={isAllSelected}
87 indeterminate={isSomeSelected}
88 onCheckedChange={toggleSelectAll}
89 />
90 </th>
91 <th className="p-4 text-left">
92 <button
93 className="flex items-center font-medium"
94 onClick={() => handleSort('name')}
95 >
96 {t('Name')}
97 <SortIcon columnKey="name" />
98 </button>
99 </th>
100 <th className="p-4 text-left">{t('Status')}</th>
101 <th className="p-4 text-left">
102 <button
103 className="flex items-center font-medium"
104 onClick={() => handleSort('createdAt')}
105 >
106 {t('Created')}
107 <SortIcon columnKey="createdAt" />
108 </button>
109 </th>
110 <th className="w-12 p-4"></th>
111 </tr>
112 </thead>
113 <tbody>
114 {resources.map((resource) => (
115 <tr
116 key={resource.id}
117 className={`border-b hover:bg-muted/50 group ${
118 selectedIds.has(resource.id) ? 'bg-pink-500/5' : ''
119 }`}
120 >
121 <td className="p-4">
122 <Checkbox
123 checked={selectedIds.has(resource.id)}
124 onCheckedChange={() => toggleSelect(resource.id)}
125 />
126 </td>
127 <td className="p-4">
128 <Link
129 to="/admin/resources/$resourceId"
130 params={{ resourceId: resource.id }}
131 className="font-medium hover:underline"
132 >
133 {resource.name.en}
134 </Link>
135 </td>
136 <td className="p-4">
137 <StatusBadge status={resource.status} />
138 </td>
139 <td className="p-4 text-muted-foreground">
140 {new Date(resource.createdAt).toLocaleDateString()}
141 </td>
142 <td className="p-4">
143 <DropdownMenu>
144 <DropdownMenuTrigger asChild>
145 <Button variant="ghost" size="icon">
146 <MoreHorizontal className="h-4 w-4" />
147 </Button>
148 </DropdownMenuTrigger>
149 <DropdownMenuContent align="end">
150 <DropdownMenuItem asChild>
151 <Link
152 to="/admin/resources/$resourceId"
153 params={{ resourceId: resource.id }}
154 >
155 {t('Edit')}
156 </Link>
157 </DropdownMenuItem>
158 <DropdownMenuItem className="text-destructive">
159 {t('Delete')}
160 </DropdownMenuItem>
161 </DropdownMenuContent>
162 </DropdownMenu>
163 </td>
164 </tr>
165 ))}
166 </tbody>
167 </table>
168 </div>
169 </>
170 )
171}
Status Badge
typescript
1// src/components/admin/resources/components/StatusBadge.tsx
2import { cn } from '@/lib/utils'
3
4const statusStyles = {
5 active: 'bg-emerald-500/10 text-emerald-500',
6 draft: 'bg-amber-500/10 text-amber-500',
7 archived: 'bg-muted text-muted-foreground',
8 pending: 'bg-blue-500/10 text-blue-500',
9 processing: 'bg-purple-500/10 text-purple-500',
10 shipped: 'bg-cyan-500/10 text-cyan-500',
11 delivered: 'bg-emerald-500/10 text-emerald-500',
12 cancelled: 'bg-red-500/10 text-red-500',
13 paid: 'bg-emerald-500/10 text-emerald-500',
14 failed: 'bg-red-500/10 text-red-500',
15 refunded: 'bg-amber-500/10 text-amber-500',
16}
17
18interface Props {
19 status: keyof typeof statusStyles
20}
21
22export function StatusBadge({ status }: Props) {
23 return (
24 <span
25 className={cn(
26 'inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium uppercase',
27 statusStyles[status] || statusStyles.draft
28 )}
29 >
30 <span className="h-1.5 w-1.5 rounded-full bg-current" />
31 {status}
32 </span>
33 )
34}
Bulk Actions Bar
typescript
1// src/components/admin/resources/components/BulkActionsBar.tsx
2import { useMutation, useQueryClient } from '@tanstack/react-query'
3import { useTranslation } from 'react-i18next'
4import { toast } from 'sonner'
5
6import { Button } from '@/components/ui/button'
7
8interface Props {
9 selectedCount: number
10 selectedIds: string[]
11 onClearSelection: () => void
12}
13
14export function BulkActionsBar({ selectedCount, selectedIds, onClearSelection }: Props) {
15 const { t } = useTranslation()
16 const queryClient = useQueryClient()
17
18 const bulkUpdate = useMutation({
19 mutationFn: async (action: 'activate' | 'archive' | 'delete') => {
20 const res = await fetch('/api/resources/bulk', {
21 method: 'POST',
22 headers: { 'Content-Type': 'application/json' },
23 credentials: 'include',
24 body: JSON.stringify({ ids: selectedIds, action }),
25 })
26 const json = await res.json()
27 if (!json.success) throw new Error(json.error)
28 return json
29 },
30 onSuccess: () => {
31 queryClient.invalidateQueries({ queryKey: ['resources'] })
32 onClearSelection()
33 toast.success(t('Updated successfully'))
34 },
35 onError: (error) => {
36 toast.error(error.message)
37 },
38 })
39
40 return (
41 <div className="flex items-center gap-4 rounded-lg border bg-muted/50 p-4">
42 <span className="text-sm font-medium">
43 {t('{{count}} selected', { count: selectedCount })}
44 </span>
45 <div className="flex gap-2">
46 <Button
47 size="sm"
48 variant="outline"
49 onClick={() => bulkUpdate.mutate('activate')}
50 disabled={bulkUpdate.isPending}
51 >
52 {t('Activate')}
53 </Button>
54 <Button
55 size="sm"
56 variant="outline"
57 onClick={() => bulkUpdate.mutate('archive')}
58 disabled={bulkUpdate.isPending}
59 >
60 {t('Archive')}
61 </Button>
62 <Button
63 size="sm"
64 variant="destructive"
65 onClick={() => bulkUpdate.mutate('delete')}
66 disabled={bulkUpdate.isPending}
67 >
68 {t('Delete')}
69 </Button>
70 </div>
71 <Button
72 size="sm"
73 variant="ghost"
74 onClick={onClearSelection}
75 className="ml-auto"
76 >
77 {t('Clear selection')}
78 </Button>
79 </div>
80 )
81}
typescript
1// Product form pattern with gradient accent cards
2<div className="grid lg:grid-cols-3 gap-6">
3 {/* Main content - 2 columns */}
4 <div className="lg:col-span-2 space-y-6">
5 {/* Details Card */}
6 <Card className="border-border/50 shadow-xl shadow-foreground/5 bg-card/50 backdrop-blur-sm overflow-hidden">
7 <div className="h-1 bg-gradient-to-r from-pink-500 to-purple-500" />
8 <CardHeader>
9 <CardTitle>{t('Details')}</CardTitle>
10 </CardHeader>
11 <CardContent>
12 {/* Form fields */}
13 </CardContent>
14 </Card>
15
16 {/* Media Card */}
17 <Card className="overflow-hidden">
18 <div className="h-1 bg-gradient-to-r from-violet-500 to-fuchsia-500" />
19 <CardHeader>
20 <CardTitle>{t('Media')}</CardTitle>
21 </CardHeader>
22 <CardContent>
23 {/* Image uploader */}
24 </CardContent>
25 </Card>
26 </div>
27
28 {/* Sidebar - 1 column, sticky */}
29 <div className="space-y-6">
30 <div className="lg:sticky lg:top-4">
31 {/* Status Card */}
32 <Card>
33 <div className="h-1 bg-gradient-to-r from-emerald-500 to-teal-500" />
34 <CardHeader>
35 <CardTitle>{t('Status')}</CardTitle>
36 </CardHeader>
37 <CardContent>
38 {/* Status select */}
39 </CardContent>
40 </Card>
41 </div>
42 </div>
43</div>
Gradient Accent Colors
| Section | Gradient |
|---|
| Details | from-pink-500 to-purple-500 |
| Media | from-violet-500 to-fuchsia-500 |
| Options | from-blue-500 to-cyan-500 |
| Variants | from-emerald-500 to-teal-500 |
| SEO | from-amber-500 to-orange-500 |
Confirmation Dialog
typescript
1import {
2 AlertDialog,
3 AlertDialogAction,
4 AlertDialogCancel,
5 AlertDialogContent,
6 AlertDialogDescription,
7 AlertDialogFooter,
8 AlertDialogHeader,
9 AlertDialogTitle,
10} from '@/components/ui/alert-dialog'
11
12function DeleteConfirmDialog({ open, onOpenChange, onConfirm, resourceName }) {
13 const { t } = useTranslation()
14
15 return (
16 <AlertDialog open={open} onOpenChange={onOpenChange}>
17 <AlertDialogContent>
18 <AlertDialogHeader>
19 <AlertDialogTitle>{t('Delete Resource')}</AlertDialogTitle>
20 <AlertDialogDescription>
21 {t('Are you sure you want to delete "{{name}}"? This action cannot be undone.', {
22 name: resourceName,
23 })}
24 </AlertDialogDescription>
25 </AlertDialogHeader>
26 <AlertDialogFooter>
27 <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
28 <AlertDialogAction
29 onClick={onConfirm}
30 className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
31 >
32 {t('Delete')}
33 </AlertDialogAction>
34 </AlertDialogFooter>
35 </AlertDialogContent>
36 </AlertDialog>
37 )
38}
See Also
src/components/admin/products/ - Full product CRUD examplesrc/components/admin/orders/ - Order managementsrc/hooks/useDataTable.ts - Table state managementforms skill - Form patterns with FNForm
