mongo-scheduler-ui 1.0.0

package/src/components/JobFormModal.tsx

@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from "react";
+import {
+  X,
+  Save,
+  Clock,
+  Repeat,
+  AlertCircle,
+  Database,
+  Globe,
+} from "lucide-react";
+import type { Job } from "../types/job";
+
+interface JobFormModalProps {
+  job?: Job | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (jobData: Partial<Job>) => Promise<void>;
+}
+
+export default function JobFormModal({
+  job,
+  isOpen,
+  onClose,
+  onSave,
+}: JobFormModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Form State
+  const [name, setName] = useState("");
+  const [runAt, setRunAt] = useState("");
+  const [dataJson, setDataJson] = useState("{}");
+  const [repeatType, setRepeatType] = useState<"none" | "cron" | "every">(
+    "none"
+  );
+  const [cronExpression, setCronExpression] = useState("");
+  const [everyInterval, setEveryInterval] = useState("");
+  const [timezone, setTimezone] = useState("");
+  const [maxRetries, setMaxRetries] = useState("3");
+  const [retryDelay, setRetryDelay] = useState("1000");
+
+  useEffect(() => {
+    if (isOpen) {
+      if (job) {
+        // Edit Mode
+        setName(job.name);
+        setRunAt(
+          job.nextRunAt
+            ? new Date(job.nextRunAt).toISOString().slice(0, 16)
+            : ""
+        );
+        setDataJson(JSON.stringify(job.data || {}, null, 2));
+
+        if (job.repeat?.cron) {
+          setRepeatType("cron");
+          setCronExpression(job.repeat.cron);
+          setTimezone(job.repeat.timezone || "");
+        } else if (job.repeat?.every) {
+          setRepeatType("every");
+          setEveryInterval(job.repeat.every.toString());
+        } else {
+          setRepeatType("none");
+        }
+
+        if (job.retry) {
+          setMaxRetries(job.retry.maxAttempts?.toString() || "3");
+          const delay =
+            typeof job.retry.delay === "number" ? job.retry.delay : 1000;
+          setRetryDelay(delay.toString());
+        }
+      } else {
+        // Create Mode - Reset
+        setName("");
+        setRunAt("");
+        setDataJson("{}");
+        setRepeatType("none");
+        setCronExpression("");
+        setTimezone("");
+        setEveryInterval("");
+        setMaxRetries("3");
+        setRetryDelay("1000");
+      }
+      setError(null);
+    }
+  }, [isOpen, job]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      let parsedData = {};
+      try {
+        parsedData = JSON.parse(dataJson);
+      } catch (err) {
+        throw new Error("Invalid JSON in Data field");
+      }
+
+      const payload: any = {
+        name,
+        data: parsedData,
+        runAt: runAt ? new Date(runAt).toISOString() : undefined,
+        retry: {
+          maxAttempts: parseInt(maxRetries),
+          delay: parseInt(retryDelay),
+        },
+      };
+
+      if (repeatType === "cron" && cronExpression) {
+        payload.repeat = {
+          cron: cronExpression,
+          ...(timezone && { timezone }),
+        };
+      } else if (repeatType === "every" && everyInterval) {
+        payload.repeat = { every: parseInt(everyInterval) };
+      } else {
+        payload.repeat = undefined;
+      }
+
+      await onSave(payload);
+      onClose();
+    } catch (err: any) {
+      setError(err.message || "Failed to save job");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 overflow-y-auto">
+      <div className="bg-gray-800 border border-gray-700 rounded-xl w-full max-w-2xl shadow-xl flex flex-col max-h-[90vh]">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-700 bg-gray-800/50 rounded-t-xl sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-500/10 rounded-lg">
+              {job ? (
+                <Database className="w-5 h-5 text-blue-400" />
+              ) : (
+                <Save className="w-5 h-5 text-green-400" />
+              )}
+            </div>
+            <h2 className="text-xl font-semibold text-white">
+              {job ? "Edit Job" : "Create New Job"}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <form
+          onSubmit={handleSubmit}
+          className="p-6 space-y-6 overflow-y-auto flex-1"
+        >
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 flex items-center gap-3 text-red-400">
+              <AlertCircle className="w-5 h-5" />
+              <p>{error}</p>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            {/* Name */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1">
+                Job Name
+              </label>
+              <input
+                type="text"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2.5 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition-all"
+                placeholder="e.g. send-email-campaign"
+                disabled={!!job} // Usually name is immutable or hard to change logic for, but API lets us. Let's keep editable if API allows, but typical patterns lock it. User specifically asked for Create UI for API, API code uses name. I will leave it enabled. Actually, re-reading API code, update doesn't take name. So disable if job exists.
+              />
+              {job && (
+                <p className="text-xs text-gray-500 mt-1">
+                  Job name cannot be changed once created.
+                </p>
+              )}
+            </div>
+
+            {/* Run At */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1">
+                Run At (Optional)
+              </label>
+              <div className="relative">
+                <Clock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                <input
+                  type="datetime-local"
+                  value={runAt}
+                  onChange={(e) => setRunAt(e.target.value)}
+                  className="w-full bg-gray-900 border border-gray-700 rounded-lg pl-10 pr-4 py-2.5 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition-all [&::-webkit-calendar-picker-indicator]:invert"
+                />
+              </div>
+              <p className="text-xs text-gray-500 mt-1">
+                Leave empty to run immediately (or based on repeat schedule)
+              </p>
+            </div>
+
+            {/* Repeat Configuration */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1 flex items-center gap-2">
+                <Repeat className="w-4 h-4 text-gray-400" />
+                Repeat Schedule
+              </label>
+              <div className="grid grid-cols-3 gap-3 mb-3">
+                <button
+                  type="button"
+                  onClick={() => setRepeatType("none")}
+                  className={`px-4 py-2 rounded-lg border text-sm font-medium transition-all ${
+                    repeatType === "none"
+                      ? "bg-blue-500/10 border-blue-500 text-blue-400"
+                      : "bg-gray-900 border-gray-700 text-gray-400 hover:border-gray-600"
+                  }`}
+                >
+                  None
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setRepeatType("cron")}
+                  className={`px-4 py-2 rounded-lg border text-sm font-medium transition-all ${
+                    repeatType === "cron"
+                      ? "bg-blue-500/10 border-blue-500 text-blue-400"
+                      : "bg-gray-900 border-gray-700 text-gray-400 hover:border-gray-600"
+                  }`}
+                >
+                  Cron
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setRepeatType("every")}
+                  className={`px-4 py-2 rounded-lg border text-sm font-medium transition-all ${
+                    repeatType === "every"
+                      ? "bg-blue-500/10 border-blue-500 text-blue-400"
+                      : "bg-gray-900 border-gray-700 text-gray-400 hover:border-gray-600"
+                  }`}
+                >
+                  Interval
+                </button>
+              </div>
+
+              {repeatType === "cron" && (
+                <div className="space-y-3">
+                  <div>
+                    <input
+                      type="text"
+                      value={cronExpression}
+                      onChange={(e) => setCronExpression(e.target.value)}
+                      placeholder="Cron Expression (* * * * *)"
+                      className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none"
+                    />
+                  </div>
+                  <div className="relative">
+                    <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                    <input
+                      type="text"
+                      list="timezones"
+                      value={timezone}
+                      onChange={(e) => setTimezone(e.target.value)}
+                      placeholder="Timezone (e.g. UTC, America/New_York)"
+                      className="w-full bg-gray-900 border border-gray-700 rounded-lg pl-10 pr-4 py-2 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none"
+                    />
+                    <datalist id="timezones">
+                      <option value="UTC" />
+                      <option value="America/New_York" />
+                      <option value="America/Los_Angeles" />
+                      <option value="Europe/London" />
+                      <option value="Europe/Paris" />
+                      <option value="Asia/Tokyo" />
+                      <option value="Asia/Kolkata" />
+                      <option value="Australia/Sydney" />
+                    </datalist>
+                  </div>
+                </div>
+              )}
+              {repeatType === "every" && (
+                <div className="flex items-center gap-2">
+                  <input
+                    type="number"
+                    value={everyInterval}
+                    onChange={(e) => setEveryInterval(e.target.value)}
+                    placeholder="Time in ms"
+                    className="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none"
+                  />
+                  <span className="text-gray-400 text-sm">ms</span>
+                </div>
+              )}
+            </div>
+
+            {/* Retry Configuration */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Max Retries
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  value={maxRetries}
+                  onChange={(e) => setMaxRetries(e.target.value)}
+                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Retry Delay (ms)
+                </label>
+                <input
+                  type="number"
+                  min="0"
+                  value={retryDelay}
+                  onChange={(e) => setRetryDelay(e.target.value)}
+                  className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none"
+                />
+              </div>
+            </div>
+
+            {/* Data JSON */}
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1">
+                Data Payload (JSON)
+              </label>
+              <textarea
+                value={dataJson}
+                onChange={(e) => setDataJson(e.target.value)}
+                rows={5}
+                className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2.5 text-white font-mono text-sm focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 outline-none transition-all resize-none"
+              />
+            </div>
+          </div>
+        </form>
+
+        {/* Footer */}
+        <div className="p-6 border-t border-gray-700 bg-gray-800/50 rounded-b-xl flex justify-end gap-3 sticky bottom-0 z-10">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-gray-300 hover:text-white transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={loading}
+            className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <>
+                <span className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="w-4 h-4" />
+                {job ? "Update Job" : "Create Job"}
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/JobList.tsx

@@ -0,0 +1,171 @@
+import { RefreshCw, Trash2, RotateCcw, X, Edit } from 'lucide-react';
+import type { Job } from '../types/job';
+import { formatDate, formatRelativeTime, getStatusColor } from '../utils/helpers';
+import Pagination from './Pagination';
+
+interface JobListProps {
+  jobs: Job[];
+  loading: boolean;
+  onJobClick: (job: Job) => void;
+  onEdit: (job: Job) => void;
+  onRefresh: () => void;
+  onDelete: (id: string) => void;
+  onRetry: (id: string) => void;
+  onCancel: (id: string) => void;
+  // Pagination Props
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  itemsPerPage: number;
+  onItemsPerPageChange: (items: number) => void;
+  totalItems: number;
+}
+
+export default function JobList({ 
+  jobs, 
+  loading, 
+  onJobClick, 
+  onEdit, 
+  onRefresh, 
+  onDelete, 
+  onRetry, 
+  onCancel,
+  currentPage,
+  totalPages,
+  onPageChange,
+  itemsPerPage,
+  onItemsPerPageChange,
+  totalItems
+}: JobListProps) {
+  if (loading) {
+    return (
+      <div className="space-y-3">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="bg-gray-800/50 rounded-lg p-4 animate-pulse">
+            <div className="h-4 bg-gray-700 rounded w-3/4 mb-2"></div>
+            <div className="h-3 bg-gray-700 rounded w-1/2"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (jobs.length === 0 && totalItems === 0) {
+    return (
+      <div className="text-center py-16 text-gray-400">
+        <p className="text-lg">No jobs found</p>
+        <p className="text-sm mt-2">Try adjusting your filters</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col xl:flex-row justify-between items-start xl:items-center mb-4 gap-4">
+        <h3 className="text-lg font-semibold text-white">Jobs</h3>
+        
+        <div className="flex items-center gap-2 self-end xl:self-auto">
+             <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={onPageChange}
+                itemsPerPage={itemsPerPage}
+                onItemsPerPageChange={onItemsPerPageChange}
+                totalItems={totalItems}
+                className="!py-0" 
+            />
+            <div className="h-8 w-px bg-gray-700 mx-2 hidden sm:block"></div>
+            <button
+            onClick={onRefresh}
+            className="p-2 rounded-lg bg-gray-800/50 hover:bg-gray-700/50 transition-colors border border-gray-700/50"
+            title="Refresh"
+            >
+            <RefreshCw className="w-5 h-5 text-gray-400" />
+            </button>
+        </div>
+      </div>
+
+      {jobs.map((job) => (
+        <div
+          key={job._id}
+          onClick={() => onJobClick(job)}
+          className="bg-gradient-to-br from-gray-800/80 to-gray-900/80 backdrop-blur-sm rounded-lg p-4 border border-gray-700/50 hover:border-gray-600/50 cursor-pointer transition-all duration-200 group"
+        >
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1">
+              <h4 className="text-white font-medium mb-1">{job.name}</h4>
+              <div className="flex items-center gap-2 text-sm text-gray-400">
+                <span className={`px-2 py-1 rounded text-xs border ${getStatusColor(job.status)}`}>
+                  {job.status}
+                </span>
+                <span>•</span>
+                <span title={formatDate(job.createdAt)}>Created {formatRelativeTime(job.createdAt)}</span>
+              </div>
+            </div>
+
+            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+               <button
+                  onClick={(e) => { e.stopPropagation(); onEdit(job); }}
+                  className="p-2 rounded bg-green-500/20 hover:bg-green-500/30 text-green-400"
+                  title="Edit"
+                >
+                  <Edit className="w-4 h-4" />
+                </button>
+              {job.status === 'failed' && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onRetry(job._id); }}
+                  className="p-2 rounded bg-blue-500/20 hover:bg-blue-500/30 text-blue-400"
+                  title="Retry"
+                >
+                  <RotateCcw className="w-4 h-4" />
+                </button>
+              )}
+              {(job.status === 'pending' || job.status === 'running') && (
+                <button
+                  onClick={(e) => { e.stopPropagation(); onCancel(job._id); }}
+                  className="p-2 rounded bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400"
+                  title="Cancel"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              )}
+              <button
+                onClick={(e) => { e.stopPropagation(); onDelete(job._id); }}
+                className="p-2 rounded bg-red-500/20 hover:bg-red-500/30 text-red-400"
+                title="Delete"
+              >
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {job.lastError && (
+            <div className="mt-2 text-xs text-red-400 bg-red-500/10 rounded px-2 py-1">
+              Error: {job.lastError.substring(0, 100)}
+              {job.lastError.length > 100 && '...'}
+            </div>
+          )}
+
+          <div className="mt-2 flex gap-4 text-xs text-gray-500">
+            {job.nextRunAt && (
+              <span className="font-medium text-blue-300">
+                 Run {formatRelativeTime(job.nextRunAt)}
+              </span>
+            )}
+             {job.nextRunAt && (
+              <span className="text-gray-600">
+                 ({formatDate(job.nextRunAt)})
+              </span>
+            )}
+            {job.attempts > 0 && (
+              <span>Attempts: {job.attempts}</span>
+            )}
+            {job.repeat && (
+              <span className="text-purple-400">🔁 Repeating</span>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/Pagination.tsx

@@ -0,0 +1,107 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  itemsPerPage: number;
+  onItemsPerPageChange: (items: number) => void;
+  totalItems: number;
+  className?: string;
+}
+
+export default function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  itemsPerPage,
+  onItemsPerPageChange,
+  totalItems,
+  className = "",
+}: PaginationProps) {
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+  if (totalItems === 0) return null;
+
+  return (
+    <div className={`flex flex-col sm:flex-row items-center justify-between gap-4 ${className}`}>
+      {/* Stats */}
+      <div className="text-sm text-gray-400">
+        Showing <span className="font-medium text-white">{startItem}</span> to{' '}
+        <span className="font-medium text-white">{endItem}</span> of{' '}
+        <span className="font-medium text-white">{totalItems}</span> results
+      </div>
+
+      <div className="flex items-center gap-4">
+        {/* Rows per page */}
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-400">Rows per page:</span>
+          <select
+            value={itemsPerPage}
+            onChange={(e) => {
+                onItemsPerPageChange(Number(e.target.value));
+                onPageChange(1); // Reset to page 1 when changing items per page
+            }}
+            className="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-1.5 outline-none"
+          >
+            <option value={5}>5</option>
+            <option value={10}>10</option>
+            <option value={20}>20</option>
+            <option value={50}>50</option>
+          </select>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+            className="p-2 rounded-lg bg-gray-800/50 border border-gray-700/50 text-gray-400 hover:text-white hover:bg-gray-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+          
+          <div className="flex items-center gap-1 px-2">
+             {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                // Logic to show a window of pages around current page
+                let pageNum = i + 1;
+                if (totalPages > 5) {
+                    if (currentPage > 3) {
+                        pageNum = currentPage - 3 + i + 1;
+                    } 
+                    if (pageNum > totalPages) {
+                        pageNum = totalPages - (4 - i);
+                    }
+                }
+                
+                return (
+                    <button
+                        key={pageNum}
+                        onClick={() => onPageChange(pageNum)}
+                        className={`w-8 h-8 rounded-lg text-sm font-medium transition-all ${
+                            currentPage === pageNum
+                            ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20'
+                            : 'bg-gray-800/50 border border-gray-700/50 text-gray-400 hover:text-white hover:bg-gray-700/50'
+                        }`}
+                    >
+                        {pageNum}
+                    </button>
+                );
+             })}
+          </div>
+
+          <button
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            className="p-2 rounded-lg bg-gray-800/50 border border-gray-700/50 text-gray-400 hover:text-white hover:bg-gray-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+            aria-label="Next page"
+          >
+            <ChevronRight className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}