admin-crud-page

Admin CRUD Page Pattern

Use this skill when creating admin pages for managing entities.

When to Use

• Adding a new admin section (e.g., /admin/[feature])
• Creating admin list pages with tables and row actions
• Creating admin edit/create forms with headers

Note: For general page patterns (forms, filters, pagination, remote functions), see page-builder.

Route Structure

Admin routes live in src/routes/(admin)/admin/:

src/routes/(admin)/admin/
└── [feature]/
    ├── +page.svelte          # List page (pure renderer)
    ├── data.remote.ts        # Remote functions (all logic here)
    ├── [id]/
    │   └── +page.svelte      # Edit page
    └── new/
        └── +page.svelte      # Create page (optional)

IMPORTANT: Never use +page.server.ts

This project uses Remote Functions exclusively for server-side logic. All data loading, form handling, and mutations must go through .remote.ts files. Never create +page.server.ts, +server.ts, or use SvelteKit form actions.

Admin-Specific Components

Quick Start

List Page

<script lang="ts">
  import PageHeader from '$lib/ui/admin/PageHeader.svelte'
  import Table from '$lib/ui/admin/Table.svelte'
  import { Actions, Action } from '$lib/ui/admin/Actions'
  import FileText from 'phosphor-svelte/lib/FileText'
  import { getItems, deleteItem } from './data.remote'

  const items = await getItems()
</script>

<div class="container mx-auto space-y-8 px-2 py-6">
  <PageHeader
    title="Items"
    description="Manage all items"
    icon={FileText}
  />

  <Table action={true} data={items}>
    {#snippet header(classes)}
      <th class={classes}>Name</th>
      <th class={classes}>Status</th>
    {/snippet}
    {#snippet row(item, classes)}
      <td class={classes}>{item.name}</td>
      <td class={classes}>{item.status}</td>
    {/snippet}
    {#snippet actionCell(item)}
      <Actions id={item.id}>
        <Action.Edit href={`/admin/items/${item.id}`} />
        <Action.Delete form={deleteItem} />
      </Actions>
    {/snippet}
  </Table>
</div>

Edit Page

<script lang="ts">
  import { page } from '$app/state'
  import PageHeader from '$lib/ui/admin/PageHeader.svelte'
  import { initForm } from '$lib/utils/form.svelte'
  import { updateItem, getItem } from '../data.remote'
  import FileText from 'phosphor-svelte/lib/FileText'

  const itemId = page.params.id!
  const item = await getItem({ id: itemId })

  initForm(updateItem, () => ({
    id: itemId,
    name: item?.name ?? '',
    status: item?.status ?? 'draft'
  }))
</script>

<div class="container mx-auto space-y-8 px-2 py-6">
  <PageHeader
    title="Edit Item"
    description="Update item settings"
    icon={FileText}
  />

  <form {...updateItem} class="space-y-6">
    <input {...updateItem.fields.id.as('hidden', itemId)} />
    <!-- See page-builder/DETAIL-PAGE.md for form patterns -->
    <button type="submit">Save</button>
  </form>
</div>

Authorization

Always call checkAdminAuth() first in admin remote functions:

import { checkAdminAuth } from '../authorization.remote'

export const getItems = query('unchecked', async (searchParams) => {
	checkAdminAuth() // Throws if not admin
	// ... rest of logic
})

Reference Files

• LIST-PAGE.md - Table, Actions, Badge patterns
• EDIT-PAGE.md - PageHeader, ConfirmWithDialog patterns
• TEMPLATES.md - Copy-paste starter templates

General Patterns

For patterns that apply to both admin and public pages, see:

• page-builder/LIST-PAGE.md - Filters, search, pagination
• page-builder/DETAIL-PAGE.md - Forms, validation
• page-builder/FEED-PAGE.md - Mixed-type feeds
• using-remote-functions/REMOTE-FIRST.md - Remote-first architecture