@orion-studios/payload-admin-components 0.1.0 → 0.2.0-beta.0

package/dist/styles/themes/light.css

@@ -0,0 +1,68 @@
+/* Light Theme - Clean whites, subtle grays, blue accents */
+[data-theme="light"] {
+  --admin-bg: #ffffff;
+  --admin-surface: #f9fafb;
+  --admin-surface-elevated: #ffffff;
+  --admin-border: #e5e7eb;
+  --admin-border-subtle: #f3f4f6;
+
+  --admin-text: #111827;
+  --admin-text-secondary: #4b5563;
+  --admin-text-muted: #9ca3af;
+  --admin-text-inverse: #ffffff;
+
+  --admin-accent: #3b82f6;
+  --admin-accent-hover: #2563eb;
+  --admin-accent-subtle: #eff6ff;
+  --admin-accent-secondary: #8b5cf6;
+  --admin-accent-secondary-hover: #7c3aed;
+  --admin-accent-secondary-subtle: #f5f3ff;
+
+  --admin-nav-bg: #f8fafc;
+  --admin-nav-text: #374151;
+  --admin-nav-text-active: #111827;
+  --admin-nav-item-hover: #f1f5f9;
+  --admin-nav-item-active: #e0e7ff;
+  --admin-nav-group-text: #6b7280;
+  --admin-nav-border: #e2e8f0;
+
+  --admin-input-bg: #ffffff;
+  --admin-input-border: #d1d5db;
+  --admin-input-border-focus: var(--admin-accent);
+  --admin-input-placeholder: #9ca3af;
+
+  --admin-card-bg: #ffffff;
+  --admin-card-border: #e5e7eb;
+  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+
+  --admin-success: #16a34a;
+  --admin-success-bg: #f0fdf4;
+  --admin-warning: #d97706;
+  --admin-warning-bg: #fffbeb;
+  --admin-error: #dc2626;
+  --admin-error-bg: #fef2f2;
+  --admin-info: #0284c7;
+  --admin-info-bg: #f0f9ff;
+
+  --admin-badge-draft-bg: #fef3c7;
+  --admin-badge-draft-text: #92400e;
+  --admin-badge-published-bg: #dcfce7;
+  --admin-badge-published-text: #166534;
+  --admin-badge-changed-bg: #dbeafe;
+  --admin-badge-changed-text: #1e40af;
+
+  --admin-tooltip-bg: #1f2937;
+  --admin-tooltip-text: #f9fafb;
+
+  --admin-overlay: rgba(0, 0, 0, 0.3);
+  --admin-scrollbar-track: #f1f5f9;
+  --admin-scrollbar-thumb: #cbd5e1;
+  --admin-scrollbar-thumb-hover: #94a3b8;
+
+  --admin-focus-ring: 0 0 0 2px var(--admin-accent-subtle), 0 0 0 4px var(--admin-accent);
+  --admin-radius-sm: 6px;
+  --admin-radius-md: 8px;
+  --admin-radius-lg: 12px;
+  --admin-radius-xl: 16px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-admin-components",
-  "version": "0.1.0",
+  "version": "0.2.0-beta.0",
   "description": "Custom admin UI components for Payload CMS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -15,10 +15,10 @@
   },
   "files": [
     "dist",
-    "src/styles"
+    "src"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts && cp src/styles/admin.css dist/admin.css",
+    "build": "tsup src/index.ts --format cjs,esm --dts && node -e \"const fs=require('fs'),path=require('path');function copyDir(s,d){fs.mkdirSync(d,{recursive:true});for(const f of fs.readdirSync(s)){const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?copyDir(sp,dp):fs.copyFileSync(sp,dp)}}copyDir('src/styles','dist/styles');fs.copyFileSync('src/styles/admin.css','dist/admin.css')\"",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "typecheck": "tsc --noEmit"
   },

package/src/components/BlockPicker.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { useState } from 'react'
+
+interface BlockOption {
+  slug: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  imageURL?: string
+}
+
+/**
+ * Visual card-based block picker. Use as a replacement for Payload's default
+ * dropdown block selector. Shows blocks as a grid of cards with icons and descriptions.
+ */
+export function BlockPicker({
+  blocks,
+  onSelect,
+}: {
+  blocks: BlockOption[]
+  onSelect: (slug: string) => void
+}) {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filtered = blocks.filter(
+    (b) =>
+      b.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      b.slug.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (b.description && b.description.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* Search */}
+      {blocks.length > 4 && (
+        <input
+          type="text"
+          placeholder="Search sections..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          style={{
+            padding: '10px 14px',
+            border: '1px solid var(--admin-input-border)',
+            borderRadius: 'var(--admin-radius-md)',
+            background: 'var(--admin-input-bg)',
+            color: 'var(--admin-text)',
+            fontSize: 14,
+            outline: 'none',
+            width: '100%',
+            boxSizing: 'border-box',
+          }}
+        />
+      )}
+
+      {/* Block Grid */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+          gap: 12,
+        }}
+      >
+        {filtered.map((block) => (
+          <button
+            key={block.slug}
+            type="button"
+            onClick={() => onSelect(block.slug)}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 10,
+              padding: 16,
+              background: 'var(--admin-card-bg)',
+              border: '1px solid var(--admin-card-border)',
+              borderRadius: 'var(--admin-radius-lg)',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              textAlign: 'center',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = 'var(--admin-accent)'
+              e.currentTarget.style.boxShadow = 'var(--admin-card-shadow-hover)'
+              e.currentTarget.style.transform = 'translateY(-2px)'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = 'var(--admin-card-border)'
+              e.currentTarget.style.boxShadow = 'none'
+              e.currentTarget.style.transform = 'translateY(0)'
+            }}
+          >
+            {/* Icon or image */}
+            <div
+              style={{
+                width: 48,
+                height: 48,
+                borderRadius: 'var(--admin-radius-md)',
+                background: 'var(--admin-accent-subtle)',
+                color: 'var(--admin-accent)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: 24,
+                overflow: 'hidden',
+              }}
+            >
+              {block.imageURL ? (
+                <img
+                  src={block.imageURL}
+                  alt={block.label}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                />
+              ) : block.icon ? (
+                block.icon
+              ) : (
+                <BlockDefaultIcon />
+              )}
+            </div>
+
+            {/* Label */}
+            <span
+              style={{
+                fontSize: 13,
+                fontWeight: 600,
+                color: 'var(--admin-text)',
+                lineHeight: 1.3,
+              }}
+            >
+              {block.label}
+            </span>
+
+            {/* Description */}
+            {block.description && (
+              <span
+                style={{
+                  fontSize: 11,
+                  color: 'var(--admin-text-muted)',
+                  lineHeight: 1.4,
+                }}
+              >
+                {block.description}
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {filtered.length === 0 && (
+        <p style={{ textAlign: 'center', color: 'var(--admin-text-muted)', fontSize: 14, padding: 20 }}>
+          No sections match your search.
+        </p>
+      )}
+    </div>
+  )
+}
+
+function BlockDefaultIcon() {
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+    </svg>
+  )
+}

package/src/components/Dashboard.tsx

@@ -0,0 +1,415 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ThemeSwitcher } from './ThemeSwitcher'
+import { HelpTooltip } from './HelpTooltip'
+import { StatusBadge } from './StatusBadge'
+
+// SVG Icons as components
+function PagesIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+      <polyline points="10 9 9 9 8 9" />
+    </svg>
+  )
+}
+
+function MediaIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <polyline points="21 15 16 10 5 21" />
+    </svg>
+  )
+}
+
+function SettingsIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  )
+}
+
+function LayoutIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <line x1="3" y1="9" x2="21" y2="9" />
+      <line x1="3" y1="15" x2="21" y2="15" />
+    </svg>
+  )
+}
+
+function PlusIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  )
+}
+
+function ClockIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  )
+}
+
+function getGreeting(): string {
+  const hour = new Date().getHours()
+  if (hour < 12) return 'Good morning'
+  if (hour < 17) return 'Good afternoon'
+  return 'Good evening'
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  return date.toLocaleDateString()
+}
+
+interface RecentItem {
+  id: string
+  title?: string
+  slug?: string
+  _status?: string
+  updatedAt: string
+}
+
+export function Dashboard() {
+  const [userName, setUserName] = useState('')
+  const [recentPages, setRecentPages] = useState<RecentItem[]>([])
+  const [pageCount, setPageCount] = useState<number | null>(null)
+  const [mediaCount, setMediaCount] = useState<number | null>(null)
+
+  useEffect(() => {
+    // Fetch current user
+    fetch('/api/users/me', { credentials: 'include' })
+      .then((res) => res.json())
+      .then((data) => {
+        const user = data?.user || data
+        setUserName(user?.fullName || user?.email?.split('@')[0] || '')
+      })
+      .catch(() => {})
+
+    // Fetch recent pages
+    fetch('/api/pages?limit=5&sort=-updatedAt', { credentials: 'include' })
+      .then((res) => res.json())
+      .then((data) => {
+        setRecentPages(data?.docs || [])
+        setPageCount(data?.totalDocs ?? null)
+      })
+      .catch(() => {})
+
+    // Fetch media count
+    fetch('/api/media?limit=0', { credentials: 'include' })
+      .then((res) => res.json())
+      .then((data) => {
+        setMediaCount(data?.totalDocs ?? null)
+      })
+      .catch(() => {})
+  }, [])
+
+  return (
+    <div style={{ padding: '32px', maxWidth: 1200, margin: '0 auto' }}>
+      {/* Welcome Header */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 32 }}>
+        <div>
+          <h1 style={{ fontSize: 28, fontWeight: 700, color: 'var(--admin-text)', margin: '0 0 6px' }}>
+            {getGreeting()}{userName ? `, ${userName}` : ''}
+          </h1>
+          <p style={{ fontSize: 15, color: 'var(--admin-text-muted)', margin: 0 }}>
+            Manage your website content and settings from here.
+          </p>
+        </div>
+        <ThemeSwitcher />
+      </div>
+
+      {/* Quick Actions */}
+      <div style={{ display: 'flex', gap: 10, marginBottom: 32, flexWrap: 'wrap' }}>
+        <QuickAction href="/admin/collections/pages/create" icon={<PlusIcon />} label="New Page" />
+        <QuickAction href="/admin/collections/media/create" icon={<PlusIcon />} label="Upload Media" />
+        <QuickAction href="/admin/globals/header" icon={<LayoutIcon size={16} />} label="Edit Navigation" />
+        <QuickAction href="/admin/globals/site-settings" icon={<SettingsIcon size={16} />} label="Website Settings" />
+      </div>
+
+      {/* Content Cards Grid */}
+      <div
+        style={{
+          display: 'grid',
+          gap: 20,
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+          marginBottom: 32,
+        }}
+      >
+        {/* Pages Card */}
+        <ContentCard
+          icon={<PagesIcon />}
+          title="Pages"
+          description="Create and manage your website pages"
+          count={pageCount}
+          countLabel="pages"
+          tooltip="Pages are the individual sections of your website. Each page has a URL and contains content sections."
+          actions={[
+            { label: 'View All', href: '/admin/collections/pages' },
+            { label: 'Create New', href: '/admin/collections/pages/create', primary: true },
+          ]}
+        />
+
+        {/* Media Card */}
+        <ContentCard
+          icon={<MediaIcon />}
+          title="Media Library"
+          description="Upload and organize images and files"
+          count={mediaCount}
+          countLabel="files"
+          tooltip="Your media library stores all images, documents, and files used across your website."
+          actions={[
+            { label: 'Browse', href: '/admin/collections/media' },
+            { label: 'Upload', href: '/admin/collections/media/create', primary: true },
+          ]}
+        />
+
+        {/* Site Design Card */}
+        <ContentCard
+          icon={<LayoutIcon />}
+          title="Site Design"
+          description="Customize your header, footer, and site-wide settings"
+          tooltip="These settings apply to every page on your website — your navigation menu, footer information, and global SEO settings."
+          actions={[
+            { label: 'Header & Nav', href: '/admin/globals/header' },
+            { label: 'Footer', href: '/admin/globals/footer' },
+            { label: 'Settings', href: '/admin/globals/site-settings', primary: true },
+          ]}
+        />
+      </div>
+
+      {/* Recent Activity */}
+      {recentPages.length > 0 && (
+        <div
+          style={{
+            background: 'var(--admin-card-bg)',
+            border: '1px solid var(--admin-card-border)',
+            borderRadius: 'var(--admin-radius-lg)',
+            overflow: 'hidden',
+          }}
+        >
+          <div
+            style={{
+              padding: '16px 20px',
+              borderBottom: '1px solid var(--admin-border-subtle)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <h3 style={{ fontSize: 15, fontWeight: 600, color: 'var(--admin-text)', margin: 0, display: 'flex', alignItems: 'center', gap: 6 }}>
+              <ClockIcon /> Recently Edited
+            </h3>
+            <a
+              href="/admin/collections/pages"
+              style={{ fontSize: 13, color: 'var(--admin-accent)', textDecoration: 'none', fontWeight: 500 }}
+            >
+              View all
+            </a>
+          </div>
+          {recentPages.map((page, i) => (
+            <a
+              key={page.id}
+              href={`/admin/collections/pages/${page.id}`}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '12px 20px',
+                textDecoration: 'none',
+                borderBottom: i < recentPages.length - 1 ? '1px solid var(--admin-border-subtle)' : 'none',
+                transition: 'background-color 0.15s ease',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = 'var(--admin-surface)'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'transparent'
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
+                <PagesIcon size={16} />
+                <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--admin-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {page.title || page.slug || 'Untitled'}
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
+                {page._status && (
+                  <StatusBadge status={page._status as 'draft' | 'published' | 'changed'} size="sm" />
+                )}
+                <span style={{ fontSize: 12, color: 'var(--admin-text-muted)', whiteSpace: 'nowrap' }}>
+                  {formatRelativeTime(page.updatedAt)}
+                </span>
+              </div>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function QuickAction({ href, icon, label }: { href: string; icon: React.ReactNode; label: string }) {
+  return (
+    <a
+      href={href}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '8px 16px',
+        background: 'var(--admin-surface)',
+        border: '1px solid var(--admin-border)',
+        borderRadius: 'var(--admin-radius-md)',
+        color: 'var(--admin-text)',
+        textDecoration: 'none',
+        fontSize: 13,
+        fontWeight: 500,
+        transition: 'all 0.2s ease',
+        whiteSpace: 'nowrap',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = 'var(--admin-accent)'
+        e.currentTarget.style.color = 'var(--admin-accent)'
+        e.currentTarget.style.background = 'var(--admin-accent-subtle)'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'var(--admin-border)'
+        e.currentTarget.style.color = 'var(--admin-text)'
+        e.currentTarget.style.background = 'var(--admin-surface)'
+      }}
+    >
+      {icon}
+      {label}
+    </a>
+  )
+}
+
+function ContentCard({
+  icon,
+  title,
+  description,
+  count,
+  countLabel,
+  tooltip,
+  actions,
+}: {
+  icon: React.ReactNode
+  title: string
+  description: string
+  count?: number | null
+  countLabel?: string
+  tooltip?: string
+  actions?: Array<{ label: string; href: string; primary?: boolean }>
+}) {
+  return (
+    <div
+      style={{
+        background: 'var(--admin-card-bg)',
+        border: '1px solid var(--admin-card-border)',
+        borderRadius: 'var(--admin-radius-lg)',
+        padding: 24,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        boxShadow: 'var(--admin-card-shadow)',
+        transition: 'all 0.2s ease',
+      }}
+    >
+      {/* Card Header */}
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 'var(--admin-radius-md)',
+              background: 'var(--admin-accent-subtle)',
+              color: 'var(--admin-accent)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {icon}
+          </div>
+          <div>
+            <h3 style={{ fontSize: 16, fontWeight: 600, color: 'var(--admin-text)', margin: 0, display: 'flex', alignItems: 'center' }}>
+              {title}
+              {tooltip && <HelpTooltip content={tooltip} position="right" />}
+            </h3>
+            {count !== undefined && count !== null && (
+              <span style={{ fontSize: 12, color: 'var(--admin-text-muted)' }}>
+                {count} {countLabel}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Description */}
+      <p style={{ fontSize: 13, color: 'var(--admin-text-muted)', margin: 0, lineHeight: 1.5 }}>
+        {description}
+      </p>
+
+      {/* Actions */}
+      {actions && actions.length > 0 && (
+        <div style={{ display: 'flex', gap: 8, marginTop: 'auto', flexWrap: 'wrap' }}>
+          {actions.map((action) => (
+            <a
+              key={action.href}
+              href={action.href}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '7px 14px',
+                borderRadius: 'var(--admin-radius-sm)',
+                fontSize: 13,
+                fontWeight: 500,
+                textDecoration: 'none',
+                transition: 'all 0.15s ease',
+                ...(action.primary
+                  ? {
+                      background: 'var(--admin-accent)',
+                      color: 'var(--admin-text-inverse)',
+                    }
+                  : {
+                      background: 'var(--admin-surface)',
+                      color: 'var(--admin-text-secondary)',
+                      border: '1px solid var(--admin-border)',
+                    }),
+              }}
+            >
+              {action.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}