Background Jobs Components

import { JobScheduler } from '@sylphx/platform-sdk/react'

export default function NewJobPage() {
  return (
    <JobScheduler
      onSchedule={(job) => {
        console.log('Job scheduled:', job.id)
      }}
    />
  )
}

import { JobList } from '@sylphx/platform-sdk/react'

export default function JobsPage() {
  return (
    <JobList
      title="Scheduled Jobs"
      onJobClick={(job) => router.push(`/admin/jobs/${job.id}`)}
    />
  )
}

type JobStatus =
  | 'pending'    // Job is queued, waiting to run
  | 'running'    // Job is currently executing
  | 'completed'  // Job finished successfully
  | 'failed'     // Job failed after all retries
  | 'cancelled'  // Job was manually cancelled
  | 'paused'     // Recurring job is paused

import { CronBuilder } from '@sylphx/platform-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 {
  JobScheduler,
  JobList,
  CronBuilder,
} from '@sylphx/platform-sdk/react'
import { platform } from '@/lib/platform'
import { Plus, Calendar, List, Clock } from 'lucide-react'

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

  const handleSchedule = async (job) => {
    await platform.jobs.schedule(job)
    toast.success('Job scheduled successfully!')
    setView('list') // Return to list view
  }

  const handleCancel = async (job) => {
    await platform.jobs.cancel(job.id)
    toast.success('Job cancelled')
  }

  const handleRetry = async (job) => {
    await platform.jobs.retry(job.id)
    toast.success('Job queued for retry')
  }

  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 Jobs</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 Jobs
          </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" />
            New Job
          </button>
        </div>
      </div>

      {view === 'list' ? (
        <JobList
          title="All Jobs"
          showFilters={true}
          showSearch={true}
          showActions={true}
          autoRefresh={true}
          refreshInterval={10000}
          onCancel={handleCancel}
          onRetry={handleRetry}
          onJobClick={(job) => router.push(`/admin/jobs/${job.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" />
              Schedule a Job
            </h2>
            <JobScheduler
              onSchedule={handleSchedule}
              onCancel={() => setView('list')}
              showRetryConfig={true}
              showTimeoutConfig={true}
              endpoints={[
                { label: 'Send Email', url: '/api/jobs/send-email' },
                { label: 'Generate Report', url: '/api/jobs/report' },
                { label: 'Sync Data', url: '/api/jobs/sync' },
              ]}
            />
          </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, JobList, JobScheduler } from '@sylphx/platform-sdk/react'

// Global theming via provider
<SylphxProvider
  theme={{
    colorPrimary: '#6366f1',
    colorSuccess: '#10b981',
    colorWarning: '#f59e0b',
    colorDanger: '#ef4444',
    borderRadius: '0.75rem',
  }}
>
  <JobList title="Jobs" />
  <JobScheduler onSchedule={handleSchedule} />
</SylphxProvider>

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

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