File size: 1,548 Bytes
1f21206 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import { useState } from 'react'
import type { CronTask } from '../../types/task'
import { TaskRow } from './TaskRow'
import { useTranslation } from '../../i18n'
type Props = {
tasks: CronTask[]
}
export function TaskList({ tasks }: Props) {
const t = useTranslation()
const enabledCount = tasks.filter((task) => task.enabled).length
const [expandedLogsId, setExpandedLogsId] = useState<string | null>(null)
return (
<div>
{/* Stats */}
<div className="grid grid-cols-3 gap-4 mb-6">
<StatCard label={t('tasks.totalTasks')} value={String(tasks.length)} />
<StatCard label={t('tasks.active')} value={String(enabledCount)} />
<StatCard label={t('tasks.disabled')} value={String(tasks.length - enabledCount)} />
</div>
{/* Task rows — accordion: only one logs panel open at a time */}
<div className="flex flex-col">
{tasks.map((task) => (
<TaskRow
key={task.id}
task={task}
showLogs={expandedLogsId === task.id}
onToggleLogs={() => setExpandedLogsId(expandedLogsId === task.id ? null : task.id)}
/>
))}
</div>
</div>
)
}
function StatCard({ label, value }: { label: string; value: string }) {
return (
<div className="px-4 py-3 rounded-[var(--radius-lg)] bg-[var(--color-surface-info)]">
<div className="text-2xl font-bold text-[var(--color-text-primary)]">{value}</div>
<div className="text-xs text-[var(--color-text-secondary)]">{label}</div>
</div>
)
}
|