init monitoring ui

Author: noxify

packages/monitoring-ui/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/app.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

packages/monitoring-ui/demo-queue-config.ts

@@ -0,0 +1,81 @@
+const createMockQueue = (name: string) => {
+  let lastStats: Record<string, number> | null = null
+
+  function generateStats() {
+    return {
+      pending: Math.floor(Math.random() * 50),
+      processing: Math.floor(Math.random() * 10),
+      completed: Math.floor(Math.random() * 200),
+      failed: Math.floor(Math.random() * 5),
+      delayed: Math.floor(Math.random() * 5),
+      cancelled: Math.floor(Math.random() * 2),
+    }
+  }
+
+  return {
+    getConfig: () => ({
+      name,
+      maxTimeout: 30000,
+      concurrency: 5,
+      retryLimit: 3,
+    }),
+    getStats: () => {
+      lastStats = generateStats()
+      return lastStats
+    },
+    getJobs: () => {
+      lastStats = generateStats()
+      const now = Date.now()
+      const jobs = []
+      const statusList = Object.keys(lastStats) as (keyof typeof lastStats)[]
+      let jobCounter = 1
+      for (const status of statusList) {
+        const count = lastStats[status] ?? 0
+        for (let i = 0; i < count; i++) {
+          const baseTime = now - i * 10000 - jobCounter * 1000
+          jobs.push({
+            id: `job-${baseTime}-${jobCounter}`,
+            name: `${name}-job-${jobCounter}`,
+            status,
+            progress:
+              status === "completed"
+                ? 100
+                : status === "processing"
+                  ? Math.floor(Math.random() * 80) + 10
+                  : 0,
+            maxAttempts: 3,
+            attempts: status === "failed" ? 3 : status === "processing" ? 2 : 1,
+            createdAt: new Date(baseTime),
+            processAt: new Date(baseTime + 1000),
+            processedAt: ["processing", "completed", "failed", "cancelled"].includes(status)
+              ? new Date(baseTime + 2000)
+              : null,
+            failedAt: status === "failed" ? new Date(baseTime + 7000) : null,
+            completedAt: status === "completed" ? new Date(baseTime + 8000) : null,
+          })
+          jobCounter++
+        }
+      }
+      return jobs
+    },
+    get: (id: string) => ({
+      id,
+      status: "completed",
+      createdAt: new Date(Date.now() - 60000).toISOString(),
+      startedAt: new Date(Date.now() - 50000).toISOString(),
+      completedAt: new Date(Date.now() - 10000).toISOString(),
+      payload: { example: "payload data" },
+      result: { success: true, data: "Job result" },
+      error: null,
+      retries: 0,
+    }),
+  }
+}
+
+export default [
+  createMockQueue("email-queue"),
+  createMockQueue("video-processing-queue"),
+  createMockQueue("data-import-queue"),
+  createMockQueue("report-generation-queue"),
+  createMockQueue("notification-queue"),
+]

packages/monitoring-ui/eslint.config.js

@@ -0,0 +1,5 @@
+import baseConfig, { restrictEnvAccess } from "@vorsteh-queue/eslint-config/base"
+import reactConfig from "@vorsteh-queue/eslint-config/react"
+
+/** @type {import('typescript-eslint').Config} */
+export default [...baseConfig, ...reactConfig, ...restrictEnvAccess]

packages/monitoring-ui/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@vorsteh-queue/monitoring-ui",
+  "description": "Monitoring UI for Vorsteh Queue",
+  "keywords": [
+    "vorsteh-queue",
+    "queue",
+    "jobs",
+    "ui",
+    "monitoring"
+  ],
+  "homepage": "https://vorsteh-queue.dev",
+  "bugs": "https://github.com/noxify/vorsteh-queue/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/noxify/vorsteh-queue.git",
+    "directory": "packages/monitoring-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
+    "lint": "eslint .",
+    "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path ../../.prettierignore",
+    "typecheck": "tsc --noEmit"
+  },
+  "files": [
+    "dist/*"
+  ],
+  "prettier": "@vorsteh-queue/prettier-config",
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "13.8.0",
+    "@radix-ui/react-accordion": "1.2.12",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-scroll-area": "1.2.10",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@tanstack/devtools-vite": "0.3.11",
+    "@tanstack/react-devtools": "0.8.1",
+    "@tanstack/react-query": "5.90.7",
+    "@tanstack/react-query-devtools": "5.90.2",
+    "@tanstack/react-router": "1.135.0",
+    "@tanstack/react-router-devtools": "1.135.0",
+    "@tanstack/react-router-ssr-query": "1.135.0",
+    "@tanstack/react-start": "1.135.1",
+    "@tanstack/react-table": "8.21.3",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "date-fns": "^4.1.0",
+    "jiti": "2.6.1",
+    "lucide-react": "0.553.0",
+    "next-themes": "0.4.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "redaxios": "0.5.1",
+    "sonner": "2.0.7",
+    "tailwind-merge": "3.4.0",
+    "vaul": "1.1.2",
+    "zod": "4.1.12"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.1.17",
+    "@tailwindcss/vite": "4.1.17",
+    "@tanstack/nitro-v2-vite-plugin": "1.133.19",
+    "@types/node": "22.19.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "@vorsteh-queue/core": "workspace:*",
+    "@vorsteh-queue/eslint-config": "workspace:*",
+    "@vorsteh-queue/prettier-config": "workspace:*",
+    "postcss": "8.5.6",
+    "tailwindcss": "4.1.17",
+    "tw-animate-css": "1.4.0",
+    "typescript": "5.9.3",
+    "vite": "npm:rolldown-vite@latest",
+    "vite-tsconfig-paths": "5.1.4"
+  }
+}

packages/monitoring-ui/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}