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}

Card-Based Form Layout

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

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 example
• src/components/admin/orders/ - Order management
• src/hooks/useDataTable.ts - Table state management
• forms skill - Form patterns with FNForm