web-mojo 2.2.11 → 2.2.14

package/dist/admin.es.js

@@ -1,16 +1,16 @@
-import { P as Page, U as User, e as UserDataView, g as UserDeviceList, i as UserDeviceLocationList, C as ContextMenu, d as UserForms, c as UserList, a as Group, G as GroupList, b as GroupForms, f as UserDevice } from "./chunks/ContextMenu-DYLw4o0S.js";
-import { V as View, M as MOJOUtils, r as rest } from "./chunks/Rest-ChN4Ntac.js";
-import "./chunks/WebSocketClient-bLYhu2Wv.js";
-import { D as Dialog$1 } from "./chunks/Dialog-Cu_Dx46k.js";
-import { W } from "./chunks/Dialog-Cu_Dx46k.js";
-import { M as MetricsChart, c as MetricsMiniChartWidget, P as PieChart } from "./chunks/MetricsMiniChartWidget-DL5stA6A.js";
-import { aj as MemberList, T as TableView, B as IncidentEventList, ap as PushDeviceList, ai as LogList, c as TabView, b as TablePage, M as Member, ak as MemberForms, ay as GeoLocatedIP, az as GeoLocatedIPList, aB as TicketList, J as IncidentList, a0 as IncidentStats, V as IncidentHistoryList, U as IncidentHistory, H as Incident, C as ChatView, K as IncidentForms, I as IncidentEvent, G as IncidentEventForms, aD as TicketNoteList, aC as TicketNote, aA as Ticket, aE as TicketForms, aF as TicketCategories, W as RuleSet, a2 as MatchByOptions, a1 as BundleByOptions, _ as RuleList, X as RuleSetList, k as EmailDomainForms, j as EmailDomainList, E as EmailDomain, n as MailboxForms, m as MailboxList, l as Mailbox, s as EmailTemplate, u as EmailTemplateForms, t as EmailTemplateList, o as SentMessage, q as SentMessageList, av as PushDeliveryList, aw as PushConfigForms, at as PushConfigList, ax as PushTemplateForms, ar as PushTemplateList, a6 as Job, ac as JobEventList, aa as JobLogList, a8 as JobForms, a7 as JobList, af as JobRunnerList, ad as JobsEngineStats, ag as JobRunnerForms, ae as JobRunner, ah as Log, al as MetricsPermission, an as MetricsForms, am as MetricsPermissionList, x as FileManagerForms, w as FileManagerList, y as File, A as FileForms, z as FileList, i as S3BucketForms, h as S3BucketList } from "./chunks/ChatView-DIzLD6LF.js";
-import DataView from "./chunks/DataView-i7kpJjVQ.js";
-import { F as FormView, a as applyFileDropMixin } from "./chunks/FormView-B_90L1RY.js";
+import { P as Page, U as User, e as UserDataView, g as UserDeviceList, i as UserDeviceLocationList, C as ContextMenu, d as UserForms, c as UserList, a as Group, G as GroupList, b as GroupForms, f as UserDevice } from "./chunks/ContextMenu-Capwv7d-.js";
+import { V as View, M as MOJOUtils, r as rest } from "./chunks/Rest-0oRgqNjX.js";
+import "./chunks/WebSocketClient-D53hpvM8.js";
+import { D as Dialog$1 } from "./chunks/Dialog-RzLLLfJD.js";
+import { W } from "./chunks/Dialog-RzLLLfJD.js";
+import { M as MetricsChart, c as MetricsMiniChartWidget, P as PieChart } from "./chunks/MetricsMiniChartWidget-DyVs4Wt0.js";
+import { aj as MemberList, T as TableView, B as IncidentEventList, ap as PushDeviceList, ai as LogList, c as TabView, b as TablePage, M as Member, ak as MemberForms, ay as GeoLocatedIP, az as GeoLocatedIPList, aB as TicketList, J as IncidentList, a0 as IncidentStats, V as IncidentHistoryList, U as IncidentHistory, H as Incident, C as ChatView, K as IncidentForms, I as IncidentEvent, G as IncidentEventForms, aD as TicketNoteList, aC as TicketNote, aA as Ticket, aE as TicketForms, aF as TicketCategories, W as RuleSet, a2 as MatchByOptions, a1 as BundleByOptions, _ as RuleList, X as RuleSetList, k as EmailDomainForms, j as EmailDomainList, E as EmailDomain, n as MailboxForms, m as MailboxList, l as Mailbox, s as EmailTemplate, u as EmailTemplateForms, t as EmailTemplateList, o as SentMessage, q as SentMessageList, av as PushDeliveryList, aw as PushConfigForms, at as PushConfigList, ax as PushTemplateForms, ar as PushTemplateList, a6 as Job, ac as JobEventList, aa as JobLogList, a8 as JobForms, ad as JobsEngineStats, a7 as JobList, af as JobRunnerList, ag as JobRunnerForms, ae as JobRunner, ah as Log, al as MetricsPermission, an as MetricsForms, am as MetricsPermissionList, x as FileManagerForms, w as FileManagerList, y as File, A as FileForms, z as FileList, i as S3BucketForms, h as S3BucketList } from "./chunks/ChatView-eFzjsHBL.js";
+import DataView from "./chunks/DataView-BpXdthN2.js";
+import { F as FormView, a as applyFileDropMixin } from "./chunks/FormView--WuITh01.js";
 import { MapView } from "./map.es.js";
-import { M as Model, C as Collection } from "./chunks/Collection-BcCcol8p.js";
-import { L as LightboxGallery, P as PDFViewer } from "./chunks/PDFViewer--jlqnuVw.js";
-import { B, a, V, b, c, d } from "./chunks/version-CM7fRavU.js";
+import { M as Model, C as Collection } from "./chunks/Collection-CTkDG1NZ.js";
+import { L as LightboxGallery, P as PDFViewer } from "./chunks/PDFViewer-CHX2NLkG.js";
+import { B, a, V, b, c, d } from "./chunks/version-DCTYSNWj.js";
 class AdminHeaderView extends View {
   constructor(options = {}) {
     super({
@@ -3316,7 +3316,7 @@ class IncidentDashboardPage extends Page {
       title: '<i class="bi bi-geo-alt me-2"></i> Incidents by Country',
       endpoint: "/api/metrics/fetch",
       account: "incident",
-      category: "incident_by_country",
+      category: "incidents_by_country",
       granularity: "days",
       chartType: "line",
       showDateRange: false,
@@ -6098,7 +6098,7 @@ class JobHealthView extends View {
                                         <i class="bi bi-circle-fill fs-4 {{healthStatusClass}}"></i>
                                     </div>
                                     <div>
-                                        <h5 class="mb-1">System Health: {{health.overall_status|capitalize}}</h5>
+                                        <h5 class="mb-1">Service Health: {{health.overall_status|capitalize}}</h5>
                                         <small class="text-muted d-block">
                                             Workers: {{health.runners.active}}/{{health.runners.total}} active
                                         </small>
@@ -6574,444 +6574,36 @@ class JobDetailsView extends View {
   }
 }
 Job.VIEW_CLASS = JobDetailsView;
-class JobsTable extends TableView {
+class JobMetricsModalView extends View {
   constructor(options = {}) {
     super({
-      Collection: JobList,
-      collectionParams: {
-        size: 15,
-        sort: "-created"
-      },
-      options: {
-        searchable: true,
-        sortable: true,
-        paginated: true,
-        size: 15,
-        ...options.options
-      },
-      columns: [
-        {
-          key: "id",
-          label: "Job ID",
-          formatter: "truncate_middle(12)",
-          sortable: true,
-          filter: { type: "text", placeholder: "Job ID..." }
-        },
-        {
-          key: "status",
-          label: "Status",
-          formatter: (value, context) => {
-            const job = context.row;
-            const badgeClass = job.getStatusBadgeClass ? job.getStatusBadgeClass() : "bg-secondary";
-            const icon = job.getStatusIcon ? job.getStatusIcon() : "bi-question";
-            return `<span class="badge ${badgeClass}"><i class="${icon} me-1"></i>${value.toUpperCase()}</span>`;
-          },
-          sortable: true,
-          filter: {
-            type: "select",
-            options: [
-              { value: "pending", label: "Pending" },
-              { value: "running", label: "Running" },
-              { value: "completed", label: "Completed" },
-              { value: "failed", label: "Failed" },
-              { value: "canceled", label: "Canceled" },
-              { value: "expired", label: "Expired" }
-            ]
-          }
-        },
-        {
-          key: "channel",
-          label: "Channel",
-          formatter: "badge",
-          sortable: true,
-          filter: { type: "text", placeholder: "Channel..." }
-        },
-        {
-          key: "created",
-          label: "Created",
-          formatter: "datetime",
-          sortable: true,
-          filter: {
-            type: "daterange",
-            label: "Created Date"
-          }
-        },
-        {
-          key: "started_at",
-          label: "Started",
-          formatter: "datetime",
-          sortable: true
-        },
-        {
-          key: "finished_at",
-          label: "Finished",
-          formatter: "datetime",
-          sortable: true
-        }
-      ],
-      contextMenu: [
-        {
-          label: "View Details",
-          action: "view-job-details",
-          icon: "bi-info-circle"
-        },
-        {
-          label: "View Events",
-          action: "view-job-events",
-          icon: "bi-clock-history"
-        },
-        { separator: true },
-        {
-          label: "Cancel Job",
-          action: "cancel-job",
-          icon: "bi-x-circle",
-          danger: true,
-          condition: (job) => job.canCancel && job.canCancel()
-        },
-        {
-          label: "Retry Job",
-          action: "retry-job",
-          icon: "bi-arrow-clockwise",
-          condition: (job) => job.canRetry && job.canRetry()
-        },
-        {
-          label: "Clone Job",
-          action: "clone-job",
-          icon: "bi-copy"
-        },
-        { separator: true },
-        {
-          label: "Export Job",
-          action: "export-job",
-          icon: "bi-download"
-        }
-      ],
-      filters: [
-        {
-          key: "func",
-          label: "Function",
-          type: "text"
-        }
-      ],
-      batchActions: [
-        {
-          label: "Cancel Selected",
-          action: "batch-cancel",
-          icon: "bi-x-circle"
-        },
-        {
-          label: "Retry Selected",
-          action: "batch-retry",
-          icon: "bi-arrow-clockwise"
-        },
-        {
-          label: "Export Selected",
-          action: "batch-export",
-          icon: "bi-download"
-        }
-      ],
+      className: "job-metrics-modal-view",
       ...options
     });
+    this.template = `
+            <div data-container="job-metrics-modal-chart" style="min-height:320px;"></div>
+        `;
   }
-  async onItemViewJobDetails(job) {
-    if (job) {
-      await JobDetailsView.show(job);
-    }
-  }
-  async onItemCancelJob(job) {
-    const confirmed = await Dialog$1.showConfirm("Are you sure you want to cancel this job?");
-    if (job && confirmed) {
-      try {
-        const result = await job.cancel();
-        if (result.success) {
-          this.getApp().toast.success("Job cancelled successfully");
-          await this.collection.fetch();
-        } else {
-          this.getApp().toast.error(result.data?.error || "Failed to cancel job");
-        }
-      } catch (error) {
-        this.getApp().toast.error("Error cancelling job: " + error.message);
-      }
-    }
-  }
-  async onItemRetryJob(job) {
-    if (job) {
-      const result = await Dialog$1.showForm({
-        title: "Retry Job",
-        formConfig: JobForms.retry
-      });
-      if (result) {
-        try {
-          const retryResult = await job.retry(result.delay || 0);
-          if (retryResult.success) {
-            this.getApp().toast.success("Job queued for retry");
-            await this.collection.fetch();
-          } else {
-            this.getApp().toast.error(retryResult.data?.error || "Failed to retry job");
-          }
-        } catch (error) {
-          this.getApp().toast.error("Error retrying job: " + error.message);
-        }
-      }
-    }
-  }
-  async onItemCloneJob(job) {
-    if (job) {
-      const payload = job.getPayload();
-      const result = await Dialog$1.showForm({
-        title: "Clone Job",
-        formConfig: {
-          ...JobForms.clone,
-          fields: JobForms.clone.fields.map((field) => {
-            if (field.name === "payload") {
-              field.value = JSON.stringify(payload, null, 2);
-            } else if (field.name === "channel") {
-              field.value = job.get("channel");
-            }
-            return field;
-          })
-        }
-      });
-      if (result) {
-        try {
-          let newPayload = {};
-          if (result.payload) {
-            newPayload = JSON.parse(result.payload);
-          }
-          const cloneData = {
-            payload: newPayload,
-            channel: result.channel || job.get("channel"),
-            delay: result.delay || 0
-          };
-          const cloneResult = await job.cloneJob(cloneData);
-          if (cloneResult.success) {
-            this.getApp().toast.success("Job cloned successfully");
-            await this.collection.fetch();
-          } else {
-            this.getApp().toast.error(cloneResult.data?.error || "Failed to clone job");
-          }
-        } catch (error) {
-          this.getApp().toast.error("Error cloning job: " + error.message);
-        }
-      }
-    }
-  }
-}
-class RunnersTable extends TableView {
-  constructor(options = {}) {
-    super({
-      Collection: JobRunnerList,
-      options: {
-        searchable: true,
-        sortable: true,
-        paginated: true,
-        size: 10,
-        ...options.options
+  async onInit() {
+    this.chart = new MetricsChart({
+      containerId: "job-metrics-modal-chart",
+      title: '<i class="bi bi-graph-up me-2"></i> Job Channel Metrics',
+      endpoint: "/api/metrics/fetch",
+      height: 320,
+      granularity: "hours",
+      category: "jobs_channels",
+      account: "global",
+      chartType: "bar",
+      showDateRange: true,
+      yAxis: {
+        label: "Count",
+        beginAtZero: true
       },
-      columns: [
-        {
-          key: "runner_id",
-          label: "Runner ID",
-          formatter: "truncate_middle(16)",
-          sortable: true
-        },
-        {
-          key: "alive",
-          label: "Status",
-          formatter: (value) => {
-            const isAlive = value === true;
-            const badgeClass = isAlive ? "bg-success" : "bg-danger";
-            const icon = isAlive ? "bi-check-circle-fill" : "bi-x-octagon-fill";
-            const text = isAlive ? "ALIVE" : "DEAD";
-            return `<span class="badge ${badgeClass}"><i class="${icon} me-1"></i>${text}</span>`;
-          },
-          sortable: true,
-          filter: {
-            type: "select",
-            options: [
-              { value: true, label: "Alive" },
-              { value: false, label: "Dead" }
-            ]
-          }
-        },
-        {
-          key: "channels",
-          label: "Channels",
-          formatter: (channels) => {
-            if (!channels || !channels.length) return "None";
-            return channels.map((c2) => `<span class="badge bg-secondary me-1">${c2}</span>`).join("");
-          },
-          sortable: false
-        },
-        {
-          key: "jobs_processed",
-          label: "Processed",
-          sortable: true
-        },
-        {
-          key: "jobs_failed",
-          label: "Failed",
-          formatter: (value) => {
-            const badgeClass = value > 0 ? "bg-danger" : "bg-success";
-            return `<span class="badge ${badgeClass}">${value}</span>`;
-          },
-          sortable: true
-        },
-        {
-          key: "last_heartbeat",
-          label: "Last Heartbeat",
-          formatter: (value) => {
-            if (!value) return "Never";
-            const heartbeatTime = new Date(value);
-            const now = /* @__PURE__ */ new Date();
-            const diffMs = now - heartbeatTime;
-            const diffSeconds = Math.floor(diffMs / 1e3);
-            if (diffSeconds < 60) return `${diffSeconds}s ago`;
-            if (diffSeconds < 3600) return `${Math.floor(diffSeconds / 60)}m ago`;
-            return `${Math.floor(diffSeconds / 3600)}h ago`;
-          },
-          sortable: true
-        },
-        {
-          key: "started",
-          label: "Uptime",
-          formatter: (value) => {
-            if (!value) return "Unknown";
-            const startTime = new Date(value);
-            const now = /* @__PURE__ */ new Date();
-            const diffMs = now - startTime;
-            const diffSeconds = Math.floor(diffMs / 1e3);
-            if (diffSeconds < 60) return `${diffSeconds}s`;
-            if (diffSeconds < 3600) return `${Math.floor(diffSeconds / 60)}m`;
-            if (diffSeconds < 86400) return `${Math.floor(diffSeconds / 3600)}h`;
-            return `${Math.floor(diffSeconds / 86400)}d`;
-          },
-          sortable: true
-        }
-      ],
-      contextMenu: [
-        {
-          label: "Ping Runner",
-          action: "ping-runner",
-          icon: "bi-wifi"
-        },
-        {
-          label: "View Details",
-          action: "view-runner-details",
-          icon: "bi-info-circle"
-        },
-        { separator: true },
-        {
-          label: "Pause Runner",
-          action: "pause-runner",
-          icon: "bi-pause-circle",
-          condition: (runner) => runner.get("alive") === true
-        },
-        {
-          label: "Resume Runner",
-          action: "resume-runner",
-          icon: "bi-play-circle",
-          condition: (runner) => runner.get("alive") !== true
-        },
-        { separator: true },
-        {
-          label: "Shutdown Runner",
-          action: "shutdown-runner",
-          icon: "bi-power",
-          danger: true,
-          condition: (runner) => runner.get("alive") === true
-        }
-      ],
-      ...options
-    });
-  }
-  async onActionPingRunner(event, element) {
-    const runnerId = element.getAttribute("data-id");
-    const runner = this.collection.get(runnerId);
-    if (runner) {
-      try {
-        const result = await runner.ping();
-        if (result.success) {
-          this.getApp().toast.success("Runner ping successful");
-          await this.collection.fetch();
-        } else {
-          this.getApp().toast.error(result.data?.error || "Runner ping failed");
-        }
-      } catch (error) {
-        this.getApp().toast.error("Error pinging runner: " + error.message);
-      }
-    }
-  }
-  async onActionShutdownRunner(event, element) {
-    const runnerId = element.getAttribute("data-id");
-    const runner = this.collection.get(runnerId);
-    if (runner && confirm("Are you sure you want to shutdown this runner?")) {
-      try {
-        const result = await runner.shutdown(true);
-        if (result.success) {
-          this.getApp().toast.success("Runner shutdown initiated");
-          await this.collection.fetch();
-        } else {
-          this.getApp().toast.error(result.data?.error || "Failed to shutdown runner");
-        }
-      } catch (error) {
-        this.getApp().toast.error("Error shutting down runner: " + error.message);
+      tooltip: {
+        y: "number:0"
       }
-    }
-  }
-}
-class ScheduledJobsTable extends TableView {
-  constructor(options = {}) {
-    super({
-      Collection: JobList,
-      collectionParams: { status: "pending" },
-      hideActivePillNames: ["status"],
-      options: {
-        searchable: true,
-        sortable: true,
-        paginated: true,
-        size: 10,
-        ...options.options
-      },
-      columns: [
-        {
-          key: "id",
-          label: "Job ID",
-          formatter: "truncate_middle(12)",
-          sortable: true
-        },
-        {
-          key: "func",
-          label: "Function",
-          sortable: true
-        },
-        {
-          key: "channel",
-          label: "Channel",
-          formatter: "badge",
-          sortable: true
-        },
-        {
-          key: "run_at",
-          label: "Scheduled For",
-          formatter: "datetime",
-          sortable: true
-        },
-        {
-          key: "created",
-          label: "Created",
-          formatter: "datetime",
-          sortable: true
-        },
-        {
-          key: "expires_at",
-          label: "Expires At",
-          formatter: "datetime",
-          sortable: true
-        }
-      ],
-      ...options
     });
+    this.addChild(this.chart);
   }
 }
 class JobsAdminPage extends Page {
@@ -7035,7 +6627,7 @@ class JobsAdminPage extends Page {
                         <p class="text-muted mb-0">{{pageSubtitle}}</p>
                         <small class="text-info">
                             <i class="bi bi-arrow-clockwise me-1"></i>
-                            Auto-refresh: {{refreshRateSeconds}}s | Last updated: {{lastUpdated}}
+                            Auto-refresh: {{refreshRateLabel}} | Last updated: {{lastUpdated}}
                         </small>
                     </div>
                     <div class="btn-group" role="group">
@@ -7080,28 +6672,106 @@ class JobsAdminPage extends Page {
                     </div>
                 </div>
 
-                <!-- Job Stats -->
                 <div data-container="job-stats"></div>
 
-                <!-- Job Health -->
+                <div class="row mb-4 g-3 align-items-stretch">
+                    <div class="col-lg-6" data-container="jobs-published-chart"></div>
+                    <div class="col-lg-6 position-relative">
+                        <div data-container="jobs-failed-chart"></div>
+                        <button class="btn btn-link btn-sm text-decoration-none position-absolute top-0 end-0"
+                                data-action="open-job-metrics-modal">
+                            <i class="bi bi-graph-up"></i> Channel Metrics
+                        </button>
+                    </div>
+                </div>
+
                 <div class="row">
-                    <div class="col-12">
+                    <div class="col-xxl-6 col-lg-6 mb-4">
                         <div data-container="job-health"></div>
                     </div>
-                    <div class="col-12">
-                        <div class="mb-3" data-container="job-metrics"></div>
+                    <div class="col-xxl-6 col-lg-6 mb-4">
+                        <div class="card shadow-sm h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <h5 class="mb-0"><i class="bi bi-cpu me-2"></i>Job Runners</h5>
+                                <small class="text-muted">Heartbeat &amp; status</small>
+                            </div>
+                            <div class="card-body p-0" data-container="runner-table"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-xl-6 mb-4">
+                        <div class="card shadow-sm h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <h5 class="mb-0"><i class="bi bi-play-circle me-2"></i>Running Jobs</h5>
+                                <small class="text-muted">Currently executing</small>
+                            </div>
+                            <div class="card-body p-0" data-container="running-jobs-table"></div>
+                        </div>
+                    </div>
+                    <div class="col-xl-6 mb-4">
+                        <div class="card shadow-sm h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <h5 class="mb-0"><i class="bi bi-hourglass-split me-2"></i>Pending Jobs</h5>
+                                <small class="text-muted">Waiting in queue</small>
+                            </div>
+                            <div class="card-body p-0" data-container="pending-jobs-table"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-xl-6 mb-4">
+                        <div class="card shadow-sm h-100">
+                            <div class="card-header">
+                                <h5 class="mb-0"><i class="bi bi-calendar-event me-2"></i>Scheduled Jobs</h5>
+                            </div>
+                            <div class="card-body p-0" data-container="scheduled-jobs-table"></div>
+                        </div>
+                    </div>
+                    <div class="col-xl-6 mb-4">
+                        <div class="card shadow-sm h-100">
+                            <div class="card-header d-flex justify-content-between align-items-center">
+                                <h5 class="mb-0"><i class="bi bi-bug me-2"></i>Failed Jobs</h5>
+                                <small class="text-muted">Latest errors</small>
+                            </div>
+                            <div class="card-body p-0" data-container="failed-jobs-table"></div>
+                        </div>
                     </div>
                 </div>
 
-                <!-- Job Tables -->
-                <div class="card border shadow">
-                    <div class="card-header">
-                        <h5 class="card-title mb-0">
-                            <i class="bi bi-list-task me-2"></i>Job Management
-                        </h5>
+                <div class="card shadow-sm mb-5">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h5 class="mb-0"><i class="bi bi-tools me-2"></i>Operations</h5>
+                        <button class="btn btn-outline-secondary btn-sm" data-action="view-all-jobs">
+                            <i class="bi bi-table"></i> View All Jobs
+                        </button>
                     </div>
                     <div class="card-body">
-                        <div data-container="job-tables"></div>
+                        <div class="d-flex flex-wrap gap-2">
+                            <button class="btn btn-outline-primary" data-action="run-simple-job">
+                                <i class="bi bi-play-circle me-2"></i>Run Simple Job
+                            </button>
+                            <button class="btn btn-outline-primary" data-action="run-test-jobs">
+                                <i class="bi bi-robot me-2"></i>Run Test Jobs
+                            </button>
+                            <button class="btn btn-outline-warning" data-action="clear-stuck">
+                                <i class="bi bi-wrench me-2"></i>Clear Stuck
+                            </button>
+                            <button class="btn btn-outline-warning" data-action="clear-channel">
+                                <i class="bi bi-eraser me-2"></i>Clear Channel
+                            </button>
+                            <button class="btn btn-outline-danger" data-action="purge-jobs">
+                                <i class="bi bi-trash me-2"></i>Purge Jobs
+                            </button>
+                            <button class="btn btn-outline-info" data-action="cleanup-consumers">
+                                <i class="bi bi-people me-2"></i>Cleanup Consumers
+                            </button>
+                            <button class="btn btn-outline-secondary" data-action="runner-broadcast">
+                                <i class="bi bi-wifi me-2"></i>Broadcast Command
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -7119,36 +6789,308 @@ class JobsAdminPage extends Page {
       model: this.jobStats
     });
     this.addChild(this.jobHealthView);
-    this.jobTablesView = new TabView({
-      containerId: "job-tables",
-      tabs: {
-        "Jobs": new JobsTable(),
-        "Runners": new RunnersTable(),
-        "Scheduled": new ScheduledJobsTable()
+    this.jobsPublishedChart = new MetricsMiniChartWidget({
+      containerId: "jobs-published-chart",
+      icon: "bi bi-upload",
+      title: "Jobs Published",
+      subtitle: "{{now_value}} {{now_label}}",
+      granularity: "days",
+      slugs: ["jobs.published"],
+      account: "global",
+      chartType: "line",
+      height: 90,
+      showSettings: true,
+      showTrending: true,
+      showDateRange: false
+    });
+    this.addChild(this.jobsPublishedChart);
+    this.jobsFailedChart = new MetricsMiniChartWidget({
+      containerId: "jobs-failed-chart",
+      icon: "bi bi-exclamation-octagon",
+      title: "Jobs Failed",
+      subtitle: "{{now_value}} {{now_label}}",
+      granularity: "days",
+      slugs: ["jobs.failed"],
+      account: "global",
+      chartType: "line",
+      height: 90,
+      showSettings: true,
+      showTrending: true,
+      showDateRange: false
+    });
+    this.addChild(this.jobsFailedChart);
+    this.runningJobsTable = new TableView({
+      containerId: "running-jobs-table",
+      Collection: JobList,
+      collectionParams: {
+        size: 5,
+        sort: "-created",
+        status: "running"
+      },
+      searchable: true,
+      filterable: false,
+      paginated: true,
+      itemView: JobDetailsView,
+      hideActivePills: ["status"],
+      viewDialogOptions: {
+        title: "Job Details",
+        size: "xl",
+        scrollable: true
+      },
+      tableOptions: {
+        striped: false,
+        hover: true,
+        size: "sm"
       },
-      activeTab: "Jobs"
+      columns: [
+        {
+          key: "id",
+          label: "Job",
+          template: `
+                        <div class="fw-semibold font-monospace">{{model.id|truncate_middle(12)}}</div>
+                        <div class="text-muted small">{{model.channel}} &middot; {{model.func|truncate_middle(28)|default('n/a')}}</div>
+                    `
+        },
+        {
+          key: "runner_id",
+          label: "Runner",
+          template: `
+                        <span class="font-monospace">{{model.runner_id|truncate_middle(12)|default('n/a')}}</span>
+                    `
+        },
+        {
+          key: "status",
+          label: "State",
+          formatter: (value, context) => {
+            const job = context.row;
+            const badgeClass = job.getStatusBadgeClass ? job.getStatusBadgeClass() : "bg-secondary";
+            const icon = job.getStatusIcon ? job.getStatusIcon() : "bi-question";
+            return `<span class="badge ${badgeClass}"><i class="${icon} me-1"></i>${value.toUpperCase()}</span>`;
+          }
+        },
+        {
+          key: "created",
+          label: "Started",
+          formatter: "datetime"
+        }
+      ]
     });
-    this.addChild(this.jobTablesView);
-    this.jobMetricsChart = new MetricsChart({
-      title: `<i class="bi bi-graph-up me-2"></i> Job Metrics`,
-      endpoint: "/api/metrics/fetch",
-      height: 100,
-      granularity: "hours",
-      category: "jobs_channels",
-      account: "global",
-      chartType: "bar",
-      showDateRange: false,
-      yAxis: {
-        label: "Count",
-        beginAtZero: true
+    this.addChild(this.runningJobsTable);
+    this.pendingJobsTable = new TableView({
+      containerId: "pending-jobs-table",
+      Collection: JobList,
+      collectionParams: {
+        size: 5,
+        sort: "-created",
+        status: "pending",
+        run_at__isnull: true
       },
-      tooltip: {
-        y: "number"
+      searchable: true,
+      filterable: false,
+      paginated: true,
+      selectable: true,
+      batchBarLocation: "top",
+      batchActions: [
+        {
+          icon: "bi-x-circle-fill",
+          label: "Cancel Jobs",
+          action: "cancel-jobs"
+        }
+      ],
+      itemView: JobDetailsView,
+      hideActivePills: ["status"],
+      viewDialogOptions: {
+        title: "Job Details",
+        size: "xl",
+        scrollable: true
+      },
+      tableOptions: {
+        striped: false,
+        hover: true,
+        size: "sm"
+      },
+      columns: [
+        {
+          key: "id",
+          label: "Job",
+          template: `
+                        <div class="fw-semibold font-monospace">{{model.id|truncate_middle(12)}}</div>
+                        <div class="text-muted small">{{model.channel}} &middot; {{model.func|truncate_middle(28)|default('n/a')}}</div>
+                    `
+        },
+        {
+          key: "priority",
+          label: "Priority",
+          formatter: (value = 0) => {
+            const badge = value >= 8 ? "bg-danger" : value >= 5 ? "bg-warning" : "bg-secondary";
+            return `<span class="badge ${badge}">${value}</span>`;
+          }
+        },
+        {
+          key: "modified",
+          label: "Queued",
+          formatter: "relative"
+        }
+      ]
+    });
+    this.pendingJobsTable.on("action:batch-cancel-jobs", async (action, event, element) => {
+      const items = this.pendingJobsTable.getSelectedItems();
+      await Promise.all(items.map((item) => item.model.cancel()));
+      this.getApp().toast.success("Jobs cancelled successfully");
+      this.pendingJobsTable.collection.fetch();
+    });
+    this.addChild(this.pendingJobsTable);
+    this.failedJobsTable = new TableView({
+      containerId: "failed-jobs-table",
+      Collection: JobList,
+      collectionParams: {
+        size: 5,
+        sort: "-finished_at",
+        status: "failed"
+      },
+      searchable: true,
+      filterable: false,
+      paginated: true,
+      itemView: JobDetailsView,
+      viewDialogOptions: {
+        title: "Job Details",
+        size: "xl",
+        scrollable: true
+      },
+      hideActivePills: ["status"],
+      tableOptions: {
+        striped: false,
+        hover: true,
+        size: "sm"
+      },
+      columns: [
+        {
+          key: "id",
+          label: "Job",
+          template: `
+                        <div class="fw-semibold font-monospace">{{model.id|truncate_middle(12)}}</div>
+                        <div class="text-muted small">{{model.channel}} &middot; {{model.func|truncate_middle(28)|default('n/a')}}</div>
+                    `
+        },
+        {
+          key: "last_error",
+          label: "Error",
+          template: `
+                        <div class="text-danger small">{{model.last_error|truncate(80)|default('Unknown error')}}</div>
+                    `
+        },
+        {
+          key: "modified",
+          label: "Failed",
+          formatter: "relative"
+        }
+      ]
+    });
+    this.addChild(this.failedJobsTable);
+    this.scheduledJobsTable = new TableView({
+      containerId: "scheduled-jobs-table",
+      Collection: JobList,
+      collectionParams: {
+        size: 5,
+        sort: "run_at",
+        run_at__isnull: false,
+        status: "pending"
+      },
+      searchable: true,
+      filterable: false,
+      paginated: true,
+      itemView: JobDetailsView,
+      hideActivePills: ["status"],
+      viewDialogOptions: {
+        title: "Job Details",
+        size: "xl",
+        scrollable: true
+      },
+      tableOptions: {
+        striped: false,
+        hover: true,
+        size: "sm"
+      },
+      columns: [
+        {
+          key: "id",
+          label: "Job",
+          formatter: "truncate_middle(12)"
+        },
+        {
+          key: "run_at",
+          label: "Scheduled For",
+          formatter: "datetime"
+        },
+        {
+          key: "channel",
+          label: "Channel",
+          formatter: "badge"
+        }
+      ],
+      selectable: true,
+      batchBarLocation: "top",
+      batchActions: [
+        {
+          icon: "bi-x-circle-fill",
+          label: "Cancel Jobs",
+          action: "cancel-jobs"
+        }
+      ]
+    });
+    this.scheduledJobsTable.on("action:batch-cancel-jobs", async (action, event, element) => {
+      const items = this.scheduledJobsTable.getSelectedItems();
+      await Promise.all(items.map((item) => item.model.cancel()));
+      this.getApp().toast.success("Jobs cancelled successfully");
+      this.scheduledJobsTable.collection.fetch();
+    });
+    this.addChild(this.scheduledJobsTable);
+    this.runnersTable = new TableView({
+      containerId: "runner-table",
+      Collection: JobRunnerList,
+      searchable: true,
+      filterable: false,
+      paginated: true,
+      tableOptions: {
+        striped: false,
+        hover: true,
+        size: "sm"
       },
-      containerId: "job-metrics"
+      columns: [
+        {
+          key: "runner_id",
+          label: "Runner",
+          formatter: "truncate_middle(16)"
+        },
+        {
+          key: "alive",
+          label: "Status",
+          formatter: (value) => {
+            const isAlive = value === true;
+            const badgeClass = isAlive ? "bg-success" : "bg-danger";
+            const icon = isAlive ? "bi-check-circle-fill" : "bi-x-octagon-fill";
+            const text = isAlive ? "ALIVE" : "DEAD";
+            return `<span class="badge ${badgeClass}"><i class="${icon} me-1"></i>${text}</span>`;
+          }
+        },
+        {
+          key: "last_heartbeat",
+          label: "Heartbeat",
+          formatter: (value) => {
+            if (!value) return "Never";
+            const heartbeatTime = new Date(value);
+            const now = /* @__PURE__ */ new Date();
+            const diffMs = now - heartbeatTime;
+            const diffSeconds = Math.floor(diffMs / 1e3);
+            if (diffSeconds < 60) return `${diffSeconds}s ago`;
+            if (diffSeconds < 3600) return `${Math.floor(diffSeconds / 60)}m ago`;
+            return `${Math.floor(diffSeconds / 3600)}h ago`;
+          }
+        }
+      ]
     });
-    this.addChild(this.jobMetricsChart);
-    await this.jobStats.fetch();
+    this.addChild(this.runnersTable);
+    await this.refreshData();
   }
   // Auto-refresh management
   startAutoRefresh() {
@@ -7163,14 +7105,31 @@ class JobsAdminPage extends Page {
   }
   async refreshData() {
     try {
-      await this.jobStats.fetch();
-      const activeTab = this.jobTablesView?.getActiveTab();
-      if (activeTab) {
-        const activeTable = this.jobTablesView.getTab(activeTab);
-        if (activeTable?.collection?.fetch) {
-          await activeTable.collection.fetch();
-        }
+      const tasks = [
+        this.jobStats.fetch()
+      ];
+      if (this.jobsPublishedChart) {
+        tasks.push(this.jobsPublishedChart.refresh());
+      }
+      if (this.jobsFailedChart) {
+        tasks.push(this.jobsFailedChart.refresh());
+      }
+      if (this.runningJobsTable?.collection?.fetch) {
+        tasks.push(this.runningJobsTable.collection.fetch());
+      }
+      if (this.pendingJobsTable?.collection?.fetch) {
+        tasks.push(this.pendingJobsTable.collection.fetch());
       }
+      if (this.failedJobsTable?.collection?.fetch) {
+        tasks.push(this.failedJobsTable.collection.fetch());
+      }
+      if (this.scheduledJobsTable?.collection?.fetch) {
+        tasks.push(this.scheduledJobsTable.collection.fetch());
+      }
+      if (this.runnersTable?.collection?.fetch) {
+        tasks.push(this.runnersTable.collection.fetch());
+      }
+      await Promise.all(tasks);
       this.lastUpdated = (/* @__PURE__ */ new Date()).toLocaleString();
       this.updateHeaderTimestamp();
     } catch (error) {
@@ -7180,15 +7139,19 @@ class JobsAdminPage extends Page {
   updateHeaderTimestamp() {
     const timestampElement = this.element?.querySelector(".text-info");
     if (timestampElement) {
+      const rateLabel = this.refreshRate === 0 ? "Off" : `${this.refreshRate / 1e3}s`;
       timestampElement.innerHTML = `
                 <i class="bi bi-arrow-clockwise me-1"></i>
-                Auto-refresh: ${this.refreshRate / 1e3}s | Last updated: ${this.lastUpdated}
+                Auto-refresh: ${rateLabel} | Last updated: ${this.lastUpdated}
             `;
     }
   }
   get refreshRateSeconds() {
     return this.refreshRate / 1e3;
   }
+  get refreshRateLabel() {
+    return this.refreshRate === 0 ? "Off" : `${this.refreshRateSeconds}s`;
+  }
   // Action handlers
   async onActionRefreshAll(event, element) {
     try {
@@ -7196,7 +7159,6 @@ class JobsAdminPage extends Page {
       icon?.classList.add("spinning");
       element.disabled = true;
       await this.refreshData();
-      await this.render();
     } catch (error) {
       console.error("Failed to refresh jobs dashboard:", error);
     } finally {
@@ -7412,6 +7374,26 @@ class JobsAdminPage extends Page {
   getHealth() {
     return this.jobHealthView?.health || {};
   }
+  async onActionOpenJobMetricsModal() {
+    const modalView = new JobMetricsModalView();
+    await Dialog$1.showDialog({
+      title: '<i class="bi bi-graph-up me-2"></i>Job Channel Metrics',
+      body: modalView,
+      size: "xl",
+      scrollable: true,
+      buttons: [
+        { text: "Close", class: "btn-secondary", dismiss: true }
+      ]
+    });
+  }
+  async onActionViewAllJobs() {
+    const router = this.getApp()?.router;
+    if (router) {
+      router.navigateTo("/admin/jobs/table");
+    } else {
+      this.getApp()?.toast?.info("Router unavailable.");
+    }
+  }
 }
 class TaskDetailsView extends View {
   constructor(options = {}) {