mongo-scheduler-ui 1.0.0

package/src/components/StatsCards.tsx

@@ -0,0 +1,52 @@
+import { Activity, CheckCircle, XCircle, Clock, Loader, Ban } from 'lucide-react';
+import type { JobStats } from '../types/job';
+
+interface StatsCardProps {
+  stats: JobStats | null;
+}
+
+export default function StatsCards({ stats }: StatsCardProps) {
+  if (!stats) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+        {[...Array(6)].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-16 mb-2"></div>
+            <div className="h-8 bg-gray-700 rounded w-12"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const cards = [
+    { label: 'Total', value: stats.total, icon: Activity, color: 'text-purple-400' },
+    { label: 'Pending', value: stats.pending, icon: Clock, color: 'text-blue-400' },
+    { label: 'Running', value: stats.running, icon: Loader, color: 'text-yellow-400' },
+    { label: 'Completed', value: stats.completed, icon: CheckCircle, color: 'text-green-400' },
+    { label: 'Failed', value: stats.failed, icon: XCircle, color: 'text-red-400' },
+    { label: 'Cancelled', value: stats.cancelled, icon: Ban, color: 'text-gray-400' },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
+      {cards.map((card) => {
+        const Icon = card.icon;
+        return (
+          <div
+            key={card.label}
+            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 transition-all duration-200"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm text-gray-400">{card.label}</span>
+              <Icon className={`w-4 h-4 ${card.color}`} />
+            </div>
+            <div className={`text-2xl font-bold ${card.color}`}>
+              {card.value.toLocaleString()}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/index.css

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+
+  background-color: #0a0a0a;
+  color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/services/api.ts

@@ -0,0 +1,58 @@
+import axios from "axios";
+import type { Job, JobQuery, JobStats } from "../types/job";
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:3000";
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export const jobsApi = {
+  // Get all jobs with optional filters
+  getJobs: async (query?: JobQuery): Promise<Job[]> => {
+    const response = await api.get("/jobs", { params: query });
+    return response.data;
+  },
+
+  // Get job by ID
+  getJob: async (id: string): Promise<Job> => {
+    const response = await api.get(`/jobs/${id}`);
+    return response.data;
+  },
+
+  // Get job statistics
+  getStats: async (): Promise<JobStats> => {
+    const response = await api.get("/jobs/stats");
+    return response.data;
+  },
+
+  // Cancel a job
+  cancelJob: async (id: string): Promise<void> => {
+    await api.post(`/jobs/${id}/cancel`);
+  },
+
+  // Retry a failed job
+  retryJob: async (id: string): Promise<void> => {
+    await api.post(`/jobs/${id}/retry`);
+  },
+
+  // Create a new job
+  createJob: async (jobData: Partial<Job>): Promise<Job> => {
+    const response = await api.post("/jobs", jobData);
+    return response.data;
+  },
+
+  // Update an existing job
+  updateJob: async (id: string, jobData: Partial<Job>): Promise<Job> => {
+    const response = await api.put(`/jobs/${id}`, jobData);
+    return response.data;
+  },
+
+  // Delete a job
+  deleteJob: async (id: string): Promise<void> => {
+    await api.delete(`/jobs/${id}`);
+  },
+};

package/src/types/job.ts

@@ -0,0 +1,43 @@
+export interface Job {
+  _id: string;
+  name: string;
+  data?: any;
+  status: "pending" | "running" | "completed" | "failed" | "cancelled";
+  attempts: number;
+  nextRunAt: Date | string;
+  lastRunAt?: Date | string;
+  lockedAt?: Date | string;
+  lockedBy?: string;
+  retry?: {
+    maxAttempts: number;
+    delay: number | ((attempt: number) => number);
+  };
+  repeat?: {
+    cron?: string;
+    every?: number;
+    timezone?: string;
+  };
+  lastError?: string;
+  createdAt: Date | string;
+  updatedAt: Date | string;
+}
+
+export interface JobQuery {
+  name?: string;
+  status?: string | string[];
+  limit?: number;
+  skip?: number;
+  sort?: {
+    field: "nextRunAt" | "createdAt" | "updatedAt";
+    order: "asc" | "desc";
+  };
+}
+
+export interface JobStats {
+  total: number;
+  pending: number;
+  running: number;
+  completed: number;
+  failed: number;
+  cancelled: number;
+}

package/src/utils/helpers.ts

@@ -0,0 +1,31 @@
+import { formatDistance, format } from "date-fns";
+
+export const formatDate = (date: Date | string): string => {
+  return format(new Date(date), "MMM dd, yyyy HH:mm:ss");
+};
+
+export const formatRelativeTime = (date: Date | string): string => {
+  return formatDistance(new Date(date), new Date(), { addSuffix: true });
+};
+
+export const getStatusColor = (status: string): string => {
+  const colors = {
+    pending: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+    running: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
+    completed: "bg-green-500/20 text-green-400 border-green-500/30",
+    failed: "bg-red-500/20 text-red-400 border-red-500/30",
+    cancelled: "bg-gray-500/20 text-gray-400 border-gray-500/30",
+  };
+  return colors[status as keyof typeof colors] || colors.pending;
+};
+
+export const getStatusIcon = (status: string): string => {
+  const icons = {
+    pending: "⏱️",
+    running: "▶️",
+    completed: "✅",
+    failed: "❌",
+    cancelled: "🚫",
+  };
+  return icons[status as keyof typeof icons] || "⏱️";
+};

package/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})