first commit

web/src/components/TaskTable.tsx

@@ -0,0 +1,52 @@
+import cronstrue from "cronstrue";
+import type { TaskRecord } from "../api/client";
+
+function describeSchedule(task: TaskRecord): string {
+  if (!task.scheduleExpression) return "—";
+  if (task.scheduleType === "cron") {
+    try {
+      return cronstrue.toString(task.scheduleExpression, { verbose: false });
+    } catch {
+      return task.scheduleExpression;
+    }
+  }
+  return task.scheduleExpression;
+}
+
+export default function TaskTable({ tasks }: { tasks: TaskRecord[] }) {
+  return (
+    <table className="task-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Command</th>
+          <th>Schedule</th>
+          <th>Next run</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tasks.map((task) => (
+          <tr key={task.id} className={task.isStale ? "stale" : undefined}>
+            <td>{task.name}</td>
+            <td className="mono">{task.command ?? "—"}</td>
+            <td>
+              <div className="schedule-human">{describeSchedule(task)}</div>
+              {task.scheduleExpression && <span className="mono schedule-raw">{task.scheduleExpression}</span>}
+            </td>
+            <td>{task.nextRunAt ? new Date(task.nextRunAt).toLocaleString() : "—"}</td>
+            <td>
+              {task.isStale ? (
+                <span className="badge badge-stale">Missing</span>
+              ) : task.enabled ? (
+                <span className="badge badge-ok">Enabled</span>
+              ) : (
+                <span className="badge badge-disabled">Disabled</span>
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}