Cron Job Scheduler

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools12.tsx instead.

Usage

The file also exports devtools12Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools12, devtools12Demo } from "@/components/blocks/devtools/devtools12";

export default function Page() {
  return <Devtools12 {...devtools12Demo} />;
}

Props

Types

type CronStatus = "active" | "paused" | "failed";

type CronJob = {
  name: string;
  expression: string;
  lastRun: string;
  nextRun: string;
  duration: string;
  status: CronStatus;
};

Behavior notes

• Entirely static; no client-side interactivity, sorting, or live re-scheduling. This is a status display, not a job editor.
• expression is rendered verbatim in a monospace <code> chip; there is no cron-syntax validation or human-readable translation of the expression.
• Status badge color is fixed by status value (active=emerald, paused=muted, failed=red) and is not configurable beyond changing status.
• lastRun and nextRun are plain display strings (a mix of relative text like "6 min ago" and absolute timestamps in the demo data); neither is computed from a real Date and neither will update on its own.
• The table scrolls horizontally on narrow viewports (min-w-[760px] inside an overflow-x-auto wrapper) rather than reflowing into stacked cards.