first commit

2026-02-20 17:31:01 +01:00
commit 61ab24490d
160 changed files with 17034 additions and 0 deletions
@@ -0,0 +1,82 @@
+import { useJobs, useToggleJob, useTriggerJob } from '../../hooks/useAdmin';
+import { SkeletonTable } from '../ui/Skeleton';
+
+function formatNextRun(iso: string | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  const now = new Date();
+  const diffMs = d.getTime() - now.getTime();
+  if (diffMs < 0) return 'imminent';
+  const mins = Math.round(diffMs / 60_000);
+  if (mins < 60) return `in ${mins}m`;
+  const hrs = Math.round(mins / 60);
+  return `in ${hrs}h`;
+}
+
+export function JobControls() {
+  const { data: jobs, isLoading } = useJobs();
+  const toggleJob = useToggleJob();
+  const triggerJob = useTriggerJob();
+
+  if (isLoading) return <SkeletonTable rows={4} cols={3} />;
+
+  return (
+    <div className="space-y-3">
+      {jobs?.map((job) => (
+        <div key={job.name} className="glass p-4 glass-hover">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div className="flex items-center gap-3">
+              {/* Status dot */}
+              <span
+                className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${
+                  job.enabled
+                    ? 'bg-emerald-400 shadow-lg shadow-emerald-400/40'
+                    : 'bg-gray-500'
+                }`}
+              />
+              <div>
+                <span className="text-sm font-medium text-gray-200">{job.label}</span>
+                <div className="flex items-center gap-3 mt-0.5">
+                  <span className={`text-[11px] font-medium ${job.enabled ? 'text-emerald-400' : 'text-gray-500'}`}>
+                    {job.enabled ? 'Active' : 'Inactive'}
+                  </span>
+                  {job.enabled && job.next_run_at && (
+                    <span className="text-[11px] text-gray-500">
+                      Next run {formatNextRun(job.next_run_at)}
+                    </span>
+                  )}
+                  {!job.registered && (
+                    <span className="text-[11px] text-red-400">Not registered</span>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => toggleJob.mutate({ jobName: job.name, enabled: !job.enabled })}
+                disabled={toggleJob.isPending}
+                className={`rounded-lg border px-3 py-1.5 text-xs transition-all duration-200 disabled:opacity-50 ${
+                  job.enabled
+                    ? 'border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20'
+                    : 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
+                }`}
+              >
+                {job.enabled ? 'Disable' : 'Enable'}
+              </button>
+              <button
+                type="button"
+                onClick={() => triggerJob.mutate(job.name)}
+                disabled={triggerJob.isPending || !job.enabled}
+                className="btn-gradient px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span>{triggerJob.isPending ? 'Triggering…' : 'Trigger Now'}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}