Background Tasks Components

import { TaskScheduler } from '@sylphx/sdk/react'

export default function NewTaskPage() {
  return (
    <TaskScheduler
      onSchedule={(run) => {
        console.log('Task triggered:', run.id)
      }}
    />
  )
}

import { TaskList } from '@sylphx/sdk/react'

export default function TasksPage() {
  return (
    <TaskList
      title="Task Runs"
      onTaskClick={(run) => router.push(`/admin/tasks/${run.id}`)}
    />
  )
}

type TaskRunStatus =
  | 'pending'    // Run is queued, waiting to execute
  | 'running'    // Run is currently executing
  | 'completed'  // Run finished successfully
  | 'failed'     // Run failed after all retries
  | 'cancelled'  // Run was manually cancelled

import { CronBuilder } from '@sylphx/sdk/react'

export function SchedulePicker() {
  const [cron, setCron] = useState('0 9 * * *')

  return (
    <CronBuilder
      value={cron}
      onChange={setCron}
    />
  )
}

interface CronPreset {
  label: string        // Display name (e.g., "Every hour")
  value: string        // Cron expression (e.g., "0 * * * *")
  description?: string // Optional description
  icon?: ReactNode     // Optional icon
}

'use client'

import { useState } from 'react'
import { TaskScheduler, TaskList, CronBuilder } from '@sylphx/sdk/react'
import { cancelTask } from '@sylphx/sdk/tasks'
import { sendEmail, generateReport, syncData } from '@/tasks'
import { Plus, Calendar, List, Clock } from 'lucide-react'

const config = {
  secretKey: process.env.NEXT_PUBLIC_SYLPHX_KEY!,
  platformUrl: process.env.NEXT_PUBLIC_SYLPHX_URL ?? 'https://sylphx.com',
}

export default function TasksManagementPage() {
  const [view, setView] = useState<'list' | 'schedule'>('list')
  const [cronValue, setCronValue] = useState('0 9 * * *')

  const handleSchedule = async (run) => {
    toast.success(`Task triggered: ${run.id}`)
    setView('list') // Return to list view
  }

  const handleCancel = async (run) => {
    await cancelTask(config, run.id)
    toast.success('Task run cancelled')
  }

  const handleRetry = async (run) => {
    // Re-trigger with original payload
    await sendEmail.trigger(run.payload)
    toast.success('Task re-triggered')
  }

  return (
    <div className="max-w-6xl mx-auto p-6 space-y-8">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">Background Tasks</h1>

        <div className="flex gap-2">
          <button
            onClick={() => setView('list')}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
              view === 'list'
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted'
            }`}
          >
            <List className="w-4 h-4" />
            View Runs
          </button>
          <button
            onClick={() => setView('schedule')}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 ${
              view === 'schedule'
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted'
            }`}
          >
            <Plus className="w-4 h-4" />
            Trigger Task
          </button>
        </div>
      </div>

      {view === 'list' ? (
        <TaskList
          title="All Task Runs"
          showFilters={true}
          showSearch={true}
          showActions={true}
          autoRefresh={true}
          refreshInterval={10000}
          onCancel={handleCancel}
          onRetry={handleRetry}
          onTaskClick={(run) => router.push(`/admin/tasks/${run.id}`)}
        />
      ) : (
        <div className="grid grid-cols-2 gap-8">
          <div>
            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
              <Clock className="w-5 h-5" />
              Trigger a Task
            </h2>
            <TaskScheduler
              tasks={[sendEmail, generateReport, syncData]}
              onSchedule={handleSchedule}
              onCancel={() => setView('list')}
              showRetryConfig={true}
            />
          </div>

          <div>
            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
              <Calendar className="w-5 h-5" />
              Cron Schedule Builder
            </h2>
            <CronBuilder
              value={cronValue}
              onChange={setCronValue}
              mode="simple"
              showPreview={true}
              showNextRuns={true}
              showTimezone={true}
            />
          </div>
        </div>
      )}
    </div>
  )
}

import { SylphxProvider, TaskList, TaskScheduler } from '@sylphx/sdk/react'
import { sendEmail } from '@/tasks'

// Global theming via provider
<SylphxProvider
  theme={{
    colorPrimary: '#6366f1',
    colorSuccess: '#10b981',
    colorWarning: '#f59e0b',
    colorDanger: '#ef4444',
    borderRadius: '0.75rem',
  }}
>
  <TaskList title="Tasks" />
  <TaskScheduler tasks={[sendEmail]} onSchedule={handleSchedule} />
</SylphxProvider>

// Individual component styling
<TaskList
  title="Tasks"
  className="border-2 border-primary/20 rounded-2xl"
/>

<CronBuilder
  value={cron}
  onChange={setCron}
  className="bg-muted p-4 rounded-xl"
/>