Розробка кастомних компонентів адміністрування Payload CMS

Кастомні компоненти admin panel Payload CMS

Payload дозволяє переопроцювати й розширювати admin panel за допомогою React компонентів. Це не патчинг — Payload надає офіційні слоти для підстановки кастомних компонентів в заголовок, навігацію, dashboard та окремі поля.

Dashboard компоненти

// payload.config.ts
export default buildConfig({
  admin: {
    components: {
      // Головна сторінка дашборда
      views: {
        Dashboard: '/components/admin/Dashboard#CustomDashboard',
      },
      // Додаткові елементи в навігації
      afterNavLinks: ['/components/admin/NavExtras#NavExtras'],
      // Елементи в заголовку
      afterDashboard: ['/components/admin/DashboardStats#DashboardStats'],
      // Логотип
      graphics: {
        Logo: '/components/admin/Logo#Logo',
        Icon: '/components/admin/Icon#Icon',
      },
    },
  },
})

// components/admin/DashboardStats.tsx
'use client'
import { useEffect, useState } from 'react'

interface Stats {
  totalOrders: number
  totalRevenue: number
  newUsers: number
}

export const DashboardStats = () => {
  const [stats, setStats] = useState<Stats | null>(null)

  useEffect(() => {
    fetch('/api/admin/stats')
      .then(r => r.json())
      .then(setStats)
  }, [])

  if (!stats) return <div>Завантаження...</div>

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: '16px 0' }}>
      <StatCard label="Замовлень сьогодні" value={stats.totalOrders} />
      <StatCard label="Виручка" value={`₴${stats.totalRevenue.toLocaleString()}`} />
      <StatCard label="Нових користувачів" value={stats.newUsers} />
    </div>
  )
}

const StatCard = ({ label, value }: { label: string; value: any }) => (
  <div style={{ background: '#fff', border: '1px solid #e0e0e0', borderRadius: 8, padding: 16 }}>
    <div style={{ fontSize: 12, color: '#666' }}>{label}</div>
    <div style={{ fontSize: 24, fontWeight: 700 }}>{value}</div>
  </div>
)

Кастомний просмотр колекції (custom view)

// collections/Orders.ts
const Orders: CollectionConfig = {
  slug: 'orders',
  admin: {
    components: {
      views: {
        // Додати вкладку "Аналітика" до колекції
        Edit: {
          Analytics: {
            Component: '/components/admin/OrderAnalytics#OrderAnalytics',
            path: '/analytics',
            Tab: {
              label: 'Аналітика',
              href: '/analytics',
            },
          },
        },
      },
    },
  },
}

// components/admin/OrderAnalytics.tsx
'use client'
import { useDocumentInfo } from 'payload/components/utilities'

export const OrderAnalytics = () => {
  const { id } = useDocumentInfo()

  // Відображення аналітики для конкретного замовлення
  return (
    <div>
      <h2>Аналітика замовлення {id}</h2>
      {/* Кастомні графіки, таймлайн */}
    </div>
  )
}

Кастомний компонент поля

// components/admin/fields/SlugField.tsx
'use client'
import { useField, useFormFields } from 'payload/components/forms'
import { useEffect } from 'react'

export const SlugField = ({ path }: { path: string }) => {
  const { value, setValue } = useField<string>({ path })
  const title = useFormFields(([fields]) => fields.title?.value as string)

  const generateSlug = (str: string) =>
    str.toLowerCase()
      .replace(/\s+/g, '-')
      .replace(/[^\w-]/g, '')

  return (
    <div>
      <label>URL Slug</label>
      <div style={{ display: 'flex', gap: 8 }}>
        <input
          type="text"
          value={value || ''}
          onChange={e => setValue(e.target.value)}
        />
        <button
          type="button"
          onClick={() => title && setValue(generateSlug(title))}
        >
          З заголовку
        </button>
      </div>
    </div>
  )
}

Кнопки дій у формі редагування

// collections/Products.ts
{
  admin: {
    components: {
      edit: {
        // Додаткові кнопки в header форми
        SaveButton: '/components/admin/ProductActions#ProductActions',
      },
    },
  },
}

// components/admin/ProductActions.tsx
'use client'
import { useDocumentInfo, useForm } from 'payload/components/utilities'

export const ProductActions = () => {
  const { id } = useDocumentInfo()
  const { submit } = useForm()

  const handleDuplicate = async () => {
    await fetch(`/api/products/${id}/duplicate`, { method: 'POST' })
  }

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <button onClick={handleDuplicate} type="button">
        Дублювати
      </button>
      <button onClick={submit} type="button">
        Зберегти
      </button>
    </div>
  )
}

Кастомний логотип

// components/admin/Logo.tsx
export const Logo = () => (
  <img src="/logo.svg" alt="Company Name" height={40} />
)

// payload.config.ts
admin: {
  components: {
    graphics: {
      Logo: '/components/admin/Logo#Logo',
    },
  },
  css: '/styles/admin-custom.css',  // кастомні CSS стилі для admin
}

Часові рамки

Розробка кастомних admin-компонентів (dashboard зі статистикою, кастомні поля, додаткові вкладки) — 2–4 дні залежно від складності UI.