From 95cf7e126d1278b2e58f5e9287a9dc5c2d222a83 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 5 Jan 2026 22:11:58 +0100
Subject: [PATCH 1/3] feat(ui): Add dedicated cron jobs management page

- Add CronJobsView.vue with full CRUD for scheduled tasks
- Support both command and backup task types
- Add search, filter by deployment/type, and pagination
- Show execution history with output/error details
- Add route /cron-jobs and navigation in System group
- Uses existing schedulerApi endpoints (no agent changes)

Signed-off-by: nfebe <fenn25.fn@gmail.com>
---
 src/layouts/DashboardLayout.vue |    4 +-
 src/router/index.ts             |    5 +
 src/views/CronJobsView.vue      | 1491 +++++++++++++++++++++++++++++++
 3 files changed, 1499 insertions(+), 1 deletion(-)
 create mode 100644 src/views/CronJobsView.vue

diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index ea32cf4..c66e5fe 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -94,6 +94,7 @@
               <span class="nav-count">{{ stats.services }}</span>
               Services
             </router-link>
+            <router-link to="/cron-jobs" class="nav-subitem" active-class="active"> Cron Jobs </router-link>
           </div>
         </div>
 
@@ -316,6 +317,7 @@ const currentPageTitle = computed(() => {
     infrastructure: "Infrastructure",
     "system-ports": "System Ports",
     services: "System Services",
+    "cron-jobs": "Cron Jobs",
     databases: "Database Servers",
     security: "Security & Monitoring",
     certificates: "SSL Certificates",
@@ -337,7 +339,7 @@ const breadcrumbs = computed(() => {
   } else if (["containers", "images", "volumes", "networks", "docker-ports"].includes(routeName)) {
     crumbs.push({ label: "Docker", path: "" });
     crumbs.push({ label: currentPageTitle.value, path: "" });
-  } else if (["infrastructure", "system-ports", "services"].includes(routeName)) {
+  } else if (["infrastructure", "system-ports", "services", "cron-jobs"].includes(routeName)) {
     crumbs.push({ label: "System", path: "" });
     crumbs.push({ label: currentPageTitle.value, path: "" });
   } else if (routeName === "databases") {
diff --git a/src/router/index.ts b/src/router/index.ts
index d645c2f..2d988c2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -109,6 +109,11 @@ const routes: RouteRecordRaw[] = [
         name: "security",
         component: () => import("@/views/SecurityView.vue"),
       },
+      {
+        path: "cron-jobs",
+        name: "cron-jobs",
+        component: () => import("@/views/CronJobsView.vue"),
+      },
     ],
   },
 ];
diff --git a/src/views/CronJobsView.vue b/src/views/CronJobsView.vue
new file mode 100644
index 0000000..a0842c1
--- /dev/null
+++ b/src/views/CronJobsView.vue
@@ -0,0 +1,1491 @@
+<template>
+  <div class="cron-jobs-view">
+    <div class="view-header">
+      <div class="header-left">
+        <h2>Scheduled Tasks</h2>
+        <p class="subtitle">Manage cron jobs and scheduled commands across deployments</p>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-primary" @click="openCreateModal">
+          <i class="pi pi-plus" />
+          New Cron Job
+        </button>
+        <button class="btn btn-icon" :disabled="loading" @click="fetchTasks">
+          <i class="pi pi-refresh" :class="{ 'pi-spin': loading }" />
+        </button>
+      </div>
+    </div>
+
+    <div v-if="tasks.length > 0 || searchQuery || filterDeployment || filterType" class="filters-bar">
+      <div class="search-box">
+        <i class="pi pi-search" />
+        <input v-model="searchQuery" type="text" placeholder="Search tasks..." />
+      </div>
+      <select v-model="filterDeployment" class="filter-select">
+        <option value="">All Deployments</option>
+        <option v-for="dep in uniqueDeployments" :key="dep" :value="dep">
+          {{ dep }}
+        </option>
+      </select>
+      <select v-model="filterType" class="filter-select">
+        <option value="">All Types</option>
+        <option value="command">Command</option>
+        <option value="backup">Backup</option>
+      </select>
+      <div class="filter-summary">
+        <template v-if="filteredTasks.length !== tasks.length">
+          {{ filteredTasks.length }} matching of {{ tasks.length }} total
+        </template>
+        <template v-else> {{ tasks.length }} tasks </template>
+      </div>
+    </div>
+
+    <div v-if="loading && tasks.length === 0" class="loading-state">
+      <i class="pi pi-spin pi-spinner" />
+      <span>Loading scheduled tasks...</span>
+    </div>
+
+    <div v-else-if="tasks.length === 0" class="empty-state">
+      <i class="pi pi-clock" />
+      <h3>No Scheduled Tasks</h3>
+      <p>Create cron jobs to run commands in your containers on a schedule.</p>
+      <button class="btn btn-primary" @click="openCreateModal">
+        <i class="pi pi-plus" />
+        Create First Cron Job
+      </button>
+    </div>
+
+    <div v-else-if="filteredTasks.length === 0 && (searchQuery || filterDeployment || filterType)" class="empty-state">
+      <i class="pi pi-filter-slash" />
+      <h3>No Matching Tasks</h3>
+      <p>No tasks match your current filters. Try adjusting your search or filters.</p>
+      <button class="btn btn-secondary" @click="clearFilters">Clear Filters</button>
+    </div>
+
+    <div v-else class="tasks-grid">
+      <div v-for="task in paginatedTasks" :key="task.id" class="task-card" :class="{ disabled: !task.enabled }">
+        <div class="task-header">
+          <div class="task-type" :class="task.type">
+            <i :class="task.type === 'backup' ? 'pi pi-database' : 'pi pi-code'" />
+            {{ task.type }}
+          </div>
+          <div class="task-toggle">
+            <label class="switch">
+              <input
+                type="checkbox"
+                :checked="task.enabled"
+                :disabled="togglingTask === task.id"
+                @change="toggleTask(task)"
+              />
+              <span class="slider" />
+            </label>
+          </div>
+        </div>
+
+        <div class="task-body">
+          <h3 class="task-name">{{ task.name }}</h3>
+          <div class="task-deployment">
+            <i class="pi pi-box" />
+            {{ task.deployment_name }}
+          </div>
+
+          <div class="task-schedule">
+            <i class="pi pi-clock" />
+            <code>{{ task.cron_expr }}</code>
+            <span class="cron-human">{{ cronToHuman(task.cron_expr) }}</span>
+          </div>
+
+          <div v-if="task.type === 'command' && task.config.command_config" class="task-command">
+            <div class="command-label">Command:</div>
+            <code class="command-value">{{ task.config.command_config.command }}</code>
+            <div v-if="task.config.command_config.service" class="command-service">
+              Service: {{ task.config.command_config.service }}
+            </div>
+          </div>
+
+          <div class="task-timing">
+            <div v-if="task.last_run" class="timing-item">
+              <span class="timing-label">Last run:</span>
+              <span class="timing-value">{{ formatDate(task.last_run) }}</span>
+            </div>
+            <div v-if="task.next_run && task.enabled" class="timing-item">
+              <span class="timing-label">Next run:</span>
+              <span class="timing-value">{{ formatDate(task.next_run) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="task-footer">
+          <button class="btn btn-sm btn-secondary" :disabled="runningTask === task.id" @click="runTaskNow(task)">
+            <i :class="runningTask === task.id ? 'pi pi-spin pi-spinner' : 'pi pi-play'" />
+            Run Now
+          </button>
+          <button class="btn btn-sm btn-secondary" @click="viewExecutions(task)">
+            <i class="pi pi-history" />
+            History
+          </button>
+          <button class="btn btn-sm btn-secondary" @click="openEditModal(task)">
+            <i class="pi pi-pencil" />
+          </button>
+          <button class="btn btn-sm btn-danger" @click="confirmDelete(task)">
+            <i class="pi pi-trash" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="totalPages > 1" class="pagination">
+      <button class="pagination-btn" :disabled="currentPage === 1" @click="goToPage(1)">
+        <i class="pi pi-angle-double-left" />
+      </button>
+      <button class="pagination-btn" :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">
+        <i class="pi pi-angle-left" />
+      </button>
+
+      <template v-for="page in visiblePages" :key="page">
+        <span v-if="page === '...'" class="pagination-ellipsis">...</span>
+        <button
+          v-else
+          class="pagination-btn"
+          :class="{ active: currentPage === page }"
+          @click="goToPage(page as number)"
+        >
+          {{ page }}
+        </button>
+      </template>
+
+      <button class="pagination-btn" :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">
+        <i class="pi pi-angle-right" />
+      </button>
+      <button class="pagination-btn" :disabled="currentPage === totalPages" @click="goToPage(totalPages)">
+        <i class="pi pi-angle-double-right" />
+      </button>
+
+      <span class="pagination-info"> Page {{ currentPage }} of {{ totalPages }} </span>
+    </div>
+
+    <div v-if="recentExecutions.length > 0" class="recent-executions">
+      <h3>Recent Executions</h3>
+      <div class="executions-list">
+        <div v-for="exec in recentExecutions" :key="exec.id" class="execution-item" :class="exec.status">
+          <div class="exec-status">
+            <i :class="statusIcon(exec.status)" />
+          </div>
+          <div class="exec-info">
+            <span class="exec-task">{{ getTaskName(exec.task_id) }}</span>
+            <span class="exec-time">{{ formatDate(exec.started_at) }}</span>
+          </div>
+          <div class="exec-duration">
+            {{ exec.duration_ms ? `${(exec.duration_ms / 1000).toFixed(1)}s` : "-" }}
+          </div>
+          <button class="btn btn-sm btn-icon" @click="viewExecutionOutput(exec)">
+            <i class="pi pi-eye" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create/Edit Modal -->
+    <Teleport to="body">
+      <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+        <div class="modal-container">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-clock" />
+              {{ editingTask ? "Edit Cron Job" : "Create Cron Job" }}
+            </h3>
+            <button class="close-btn" @click="closeModal">
+              <i class="pi pi-times" />
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="name">Name</label>
+              <input id="name" v-model="form.name" type="text" placeholder="Daily cleanup" :disabled="saving" />
+            </div>
+
+            <div class="form-group">
+              <label for="deployment">Deployment</label>
+              <select id="deployment" v-model="form.deployment_name" :disabled="saving || !!editingTask">
+                <option value="">Select deployment...</option>
+                <option v-for="dep in deployments" :key="dep.name" :value="dep.name">
+                  {{ dep.name }}
+                </option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="cron">Schedule (Cron Expression)</label>
+              <input id="cron" v-model="form.cron_expr" type="text" placeholder="0 2 * * *" :disabled="saving" />
+              <span class="hint">
+                {{ form.cron_expr ? cronToHuman(form.cron_expr) : 'e.g., "0 2 * * *" = Daily at 2:00 AM' }}
+              </span>
+            </div>
+
+            <div class="form-group">
+              <label for="service">Service (optional)</label>
+              <input
+                id="service"
+                v-model="form.service"
+                type="text"
+                placeholder="web, app, worker..."
+                :disabled="saving"
+              />
+              <span class="hint">Leave empty to use deployment name as container</span>
+            </div>
+
+            <div class="form-group">
+              <label for="command">Command</label>
+              <textarea
+                id="command"
+                v-model="form.command"
+                rows="3"
+                placeholder="php artisan schedule:run"
+                :disabled="saving"
+              />
+            </div>
+
+            <div class="form-group">
+              <label for="timeout">Timeout (seconds)</label>
+              <input id="timeout" v-model.number="form.timeout" type="number" min="1" max="3600" :disabled="saving" />
+            </div>
+
+            <div class="form-group checkbox-group">
+              <label class="checkbox-label">
+                <input v-model="form.enabled" type="checkbox" :disabled="saving" />
+                <span>Enable this task</span>
+              </label>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button class="btn btn-secondary" :disabled="saving" @click="closeModal">Cancel</button>
+            <button class="btn btn-primary" :disabled="saving || !isFormValid" @click="saveTask">
+              <i v-if="saving" class="pi pi-spin pi-spinner" />
+              {{ saving ? "Saving..." : editingTask ? "Update" : "Create" }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Execution Output Modal -->
+    <Teleport to="body">
+      <div v-if="showOutputModal" class="modal-overlay" @click.self="showOutputModal = false">
+        <div class="modal-container modal-wide">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-file-export" />
+              Execution Output
+            </h3>
+            <button class="close-btn" @click="showOutputModal = false">
+              <i class="pi pi-times" />
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <div v-if="selectedExecution" class="execution-details">
+              <div class="exec-meta">
+                <span class="exec-status-badge" :class="selectedExecution.status">
+                  {{ selectedExecution.status }}
+                </span>
+                <span>Started: {{ formatDate(selectedExecution.started_at) }}</span>
+                <span v-if="selectedExecution.ended_at"> Ended: {{ formatDate(selectedExecution.ended_at) }} </span>
+                <span v-if="selectedExecution.duration_ms">
+                  Duration: {{ (selectedExecution.duration_ms / 1000).toFixed(2) }}s
+                </span>
+              </div>
+              <div v-if="selectedExecution.output" class="output-block">
+                <h4>Output</h4>
+                <pre>{{ selectedExecution.output }}</pre>
+              </div>
+              <div v-if="selectedExecution.error" class="error-block">
+                <h4>Error</h4>
+                <pre>{{ selectedExecution.error }}</pre>
+              </div>
+              <div v-if="!selectedExecution.output && !selectedExecution.error" class="no-output">
+                No output recorded for this execution.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- Execution History Modal -->
+    <Teleport to="body">
+      <div v-if="showHistoryModal" class="modal-overlay" @click.self="showHistoryModal = false">
+        <div class="modal-container modal-wide">
+          <div class="modal-header">
+            <h3>
+              <i class="pi pi-history" />
+              Execution History: {{ selectedTask?.name }}
+            </h3>
+            <button class="close-btn" @click="showHistoryModal = false">
+              <i class="pi pi-times" />
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <div v-if="taskExecutions.length === 0" class="no-history">No execution history for this task.</div>
+            <div v-else class="history-list">
+              <div v-for="exec in taskExecutions" :key="exec.id" class="history-item" :class="exec.status">
+                <div class="history-status">
+                  <i :class="statusIcon(exec.status)" />
+                  <span>{{ exec.status }}</span>
+                </div>
+                <div class="history-time">
+                  {{ formatDate(exec.started_at) }}
+                </div>
+                <div class="history-duration">
+                  {{ exec.duration_ms ? `${(exec.duration_ms / 1000).toFixed(1)}s` : "-" }}
+                </div>
+                <button class="btn btn-sm btn-icon" @click="viewExecutionOutput(exec)">
+                  <i class="pi pi-eye" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <ConfirmModal
+      :visible="showDeleteModal"
+      title="Delete Cron Job"
+      :message="`Are you sure you want to delete '${taskToDelete?.name}'?`"
+      warning="This action cannot be undone. All execution history will be lost."
+      variant="danger"
+      confirm-text="Delete"
+      :loading="deleting"
+      @confirm="deleteTask"
+      @cancel="showDeleteModal = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { schedulerApi, deploymentsApi } from "@/services/api";
+import type { ScheduledTask, TaskExecution } from "@/services/api";
+import type { Deployment } from "@/types";
+import { useNotificationsStore } from "@/stores/notifications";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+
+const notifications = useNotificationsStore();
+
+const tasks = ref<ScheduledTask[]>([]);
+const deployments = ref<Deployment[]>([]);
+const recentExecutions = ref<TaskExecution[]>([]);
+const taskExecutions = ref<TaskExecution[]>([]);
+const loading = ref(false);
+
+const searchQuery = ref("");
+const filterDeployment = ref("");
+const filterType = ref("");
+const currentPage = ref(1);
+const pageSize = ref(12);
+
+const uniqueDeployments = computed(() => {
+  const deps = new Set(tasks.value.map((t) => t.deployment_name));
+  return Array.from(deps).sort();
+});
+
+const filteredTasks = computed(() => {
+  let result = tasks.value;
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    result = result.filter(
+      (t) =>
+        t.name.toLowerCase().includes(query) ||
+        t.deployment_name.toLowerCase().includes(query) ||
+        t.cron_expr.includes(query) ||
+        (t.config.command_config?.command || "").toLowerCase().includes(query),
+    );
+  }
+
+  if (filterDeployment.value) {
+    result = result.filter((t) => t.deployment_name === filterDeployment.value);
+  }
+
+  if (filterType.value) {
+    result = result.filter((t) => t.type === filterType.value);
+  }
+
+  return result;
+});
+
+const totalPages = computed(() => Math.ceil(filteredTasks.value.length / pageSize.value));
+
+const paginatedTasks = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  return filteredTasks.value.slice(start, start + pageSize.value);
+});
+
+const visiblePages = computed(() => {
+  const pages: (number | string)[] = [];
+  const total = totalPages.value;
+  const current = currentPage.value;
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i);
+  } else {
+    pages.push(1);
+    if (current > 3) pages.push("...");
+
+    const start = Math.max(2, current - 1);
+    const end = Math.min(total - 1, current + 1);
+
+    for (let i = start; i <= end; i++) pages.push(i);
+
+    if (current < total - 2) pages.push("...");
+    pages.push(total);
+  }
+
+  return pages;
+});
+
+watch([searchQuery, filterDeployment, filterType], () => {
+  currentPage.value = 1;
+});
+
+const clearFilters = () => {
+  searchQuery.value = "";
+  filterDeployment.value = "";
+  filterType.value = "";
+  currentPage.value = 1;
+};
+
+const goToPage = (page: number) => {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page;
+  }
+};
+const saving = ref(false);
+const deleting = ref(false);
+const runningTask = ref<number | null>(null);
+const togglingTask = ref<number | null>(null);
+
+const showModal = ref(false);
+const showDeleteModal = ref(false);
+const showOutputModal = ref(false);
+const showHistoryModal = ref(false);
+
+const editingTask = ref<ScheduledTask | null>(null);
+const taskToDelete = ref<ScheduledTask | null>(null);
+const selectedExecution = ref<TaskExecution | null>(null);
+const selectedTask = ref<ScheduledTask | null>(null);
+
+const defaultForm = () => ({
+  name: "",
+  deployment_name: "",
+  cron_expr: "",
+  service: "",
+  command: "",
+  timeout: 300,
+  enabled: true,
+});
+
+const form = ref(defaultForm());
+
+const isFormValid = computed(() => {
+  return (
+    form.value.name.trim() && form.value.deployment_name && form.value.cron_expr.trim() && form.value.command.trim()
+  );
+});
+
+const fetchTasks = async () => {
+  loading.value = true;
+  try {
+    const [tasksRes, execsRes] = await Promise.all([schedulerApi.listTasks(), schedulerApi.getRecentExecutions(10)]);
+    tasks.value = tasksRes.data.tasks || [];
+    recentExecutions.value = execsRes.data.executions || [];
+  } catch (e: any) {
+    notifications.error("Error", "Failed to load scheduled tasks");
+  } finally {
+    loading.value = false;
+  }
+};
+
+const fetchDeployments = async () => {
+  try {
+    const response = await deploymentsApi.list();
+    deployments.value = response.data.deployments || [];
+  } catch {
+    deployments.value = [];
+  }
+};
+
+const openCreateModal = () => {
+  editingTask.value = null;
+  form.value = defaultForm();
+  showModal.value = true;
+};
+
+const openEditModal = (task: ScheduledTask) => {
+  editingTask.value = task;
+  form.value = {
+    name: task.name,
+    deployment_name: task.deployment_name,
+    cron_expr: task.cron_expr,
+    service: task.config.command_config?.service || "",
+    command: task.config.command_config?.command || "",
+    timeout: task.config.command_config?.timeout || 300,
+    enabled: task.enabled,
+  };
+  showModal.value = true;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+  editingTask.value = null;
+  form.value = defaultForm();
+};
+
+const saveTask = async () => {
+  if (!isFormValid.value) return;
+
+  saving.value = true;
+  try {
+    const data = {
+      name: form.value.name,
+      type: "command" as const,
+      deployment_name: form.value.deployment_name,
+      cron_expr: form.value.cron_expr,
+      enabled: form.value.enabled,
+      config: {
+        command_config: {
+          service: form.value.service || "",
+          command: form.value.command,
+          timeout: form.value.timeout,
+        },
+      },
+    };
+
+    if (editingTask.value) {
+      await schedulerApi.updateTask(editingTask.value.id, {
+        name: data.name,
+        cron_expr: data.cron_expr,
+        enabled: data.enabled,
+        config: data.config,
+      });
+      notifications.success("Task Updated", `Cron job "${data.name}" has been updated`);
+    } else {
+      await schedulerApi.createTask(data);
+      notifications.success("Task Created", `Cron job "${data.name}" has been created`);
+    }
+
+    closeModal();
+    await fetchTasks();
+  } catch (e: any) {
+    const msg = e.response?.data?.error || e.message;
+    notifications.error("Error", msg);
+  } finally {
+    saving.value = false;
+  }
+};
+
+const toggleTask = async (task: ScheduledTask) => {
+  togglingTask.value = task.id;
+  try {
+    await schedulerApi.updateTask(task.id, { enabled: !task.enabled });
+    await fetchTasks();
+  } catch (e: any) {
+    notifications.error("Error", "Failed to toggle task");
+  } finally {
+    togglingTask.value = null;
+  }
+};
+
+const runTaskNow = async (task: ScheduledTask) => {
+  runningTask.value = task.id;
+  try {
+    await schedulerApi.runTaskNow(task.id);
+    notifications.success("Task Started", `"${task.name}" is now running`);
+    setTimeout(() => fetchTasks(), 2000);
+  } catch (e: any) {
+    const msg = e.response?.data?.error || e.message;
+    notifications.error("Error", msg);
+  } finally {
+    runningTask.value = null;
+  }
+};
+
+const confirmDelete = (task: ScheduledTask) => {
+  taskToDelete.value = task;
+  showDeleteModal.value = true;
+};
+
+const deleteTask = async () => {
+  if (!taskToDelete.value) return;
+
+  deleting.value = true;
+  try {
+    await schedulerApi.deleteTask(taskToDelete.value.id);
+    notifications.success("Task Deleted", `"${taskToDelete.value.name}" has been deleted`);
+    showDeleteModal.value = false;
+    taskToDelete.value = null;
+    await fetchTasks();
+  } catch (e: any) {
+    const msg = e.response?.data?.error || e.message;
+    notifications.error("Error", msg);
+  } finally {
+    deleting.value = false;
+  }
+};
+
+const viewExecutions = async (task: ScheduledTask) => {
+  selectedTask.value = task;
+  showHistoryModal.value = true;
+  try {
+    const response = await schedulerApi.getTaskExecutions(task.id, 50);
+    taskExecutions.value = response.data.executions || [];
+  } catch {
+    taskExecutions.value = [];
+  }
+};
+
+const viewExecutionOutput = (exec: TaskExecution) => {
+  selectedExecution.value = exec;
+  showOutputModal.value = true;
+};
+
+const getTaskName = (taskId: number): string => {
+  const task = tasks.value.find((t) => t.id === taskId);
+  return task?.name || `Task #${taskId}`;
+};
+
+const statusIcon = (status: string) => {
+  switch (status) {
+    case "completed":
+      return "pi pi-check-circle";
+    case "failed":
+      return "pi pi-times-circle";
+    case "running":
+      return "pi pi-spin pi-spinner";
+    default:
+      return "pi pi-clock";
+  }
+};
+
+const cronToHuman = (expr: string): string => {
+  const parts = expr.split(" ");
+  if (parts.length !== 5) return "Invalid cron expression";
+
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+
+  if (minute === "0" && hour === "*" && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    return "Every hour";
+  }
+  if (minute === "*" && hour === "*" && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    return "Every minute";
+  }
+  if (dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    if (minute !== "*" && hour !== "*") {
+      return `Daily at ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+    }
+    if (minute !== "*" && hour === "*") {
+      return `Hourly at minute ${minute}`;
+    }
+  }
+  if (dayOfWeek === "0" && dayOfMonth === "*" && month === "*") {
+    return `Weekly on Sunday at ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+  }
+  if (dayOfMonth === "1" && month === "*" && dayOfWeek === "*") {
+    return `Monthly on the 1st at ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}`;
+  }
+
+  return expr;
+};
+
+const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+onMounted(() => {
+  fetchTasks();
+  fetchDeployments();
+});
+</script>
+
+<style scoped>
+.cron-jobs-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.header-left h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0.25rem 0 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.filters-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
+}
+
+.search-box i {
+  color: #9ca3af;
+}
+
+.search-box input {
+  border: none;
+  background: none;
+  outline: none;
+  flex: 1;
+  font-size: 0.875rem;
+}
+
+.filter-select {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  background: white;
+  min-width: 150px;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: #6366f1;
+}
+
+.filter-summary {
+  margin-left: auto;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 1rem;
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+}
+
+.pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm);
+  background: white;
+  color: #374151;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination-btn.active {
+  background: #6366f1;
+  border-color: #6366f1;
+  color: white;
+}
+
+.pagination-ellipsis {
+  padding: 0 0.5rem;
+  color: #6b7280;
+}
+
+.pagination-info {
+  margin-left: 1rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.btn-icon {
+  padding: 0.625rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  color: #6b7280;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background: #f9fafb;
+  color: #374151;
+}
+
+.btn-primary {
+  background: #6366f1;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #4f46e5;
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: white;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #f9fafb;
+}
+
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #fecaca;
+}
+
+.loading-state,
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+.loading-state i,
+.empty-state i {
+  font-size: 3rem;
+  color: #9ca3af;
+  margin-bottom: 1rem;
+}
+
+.empty-state h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 0.5rem;
+}
+
+.empty-state p {
+  color: #6b7280;
+  margin: 0 0 1.5rem;
+}
+
+.tasks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 1.25rem;
+}
+
+.task-card {
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.task-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.task-card.disabled {
+  opacity: 0.6;
+}
+
+.task-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.task-type {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.task-type.command {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.task-type.backup {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #d1d5db;
+  transition: 0.3s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #22c55e;
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+.task-body {
+  padding: 1.25rem;
+}
+
+.task-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 0.75rem;
+}
+
+.task-deployment {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-bottom: 0.75rem;
+}
+
+.task-schedule {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #374151;
+  margin-bottom: 1rem;
+}
+
+.task-schedule code {
+  background: #f3f4f6;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-xs);
+  font-family: monospace;
+  font-size: 0.8125rem;
+}
+
+.cron-human {
+  color: #6b7280;
+  font-size: 0.8125rem;
+}
+
+.task-command {
+  background: #f9fafb;
+  border-radius: var(--radius-xs);
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.command-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #6b7280;
+  margin-bottom: 0.25rem;
+}
+
+.command-value {
+  display: block;
+  font-family: monospace;
+  font-size: 0.8125rem;
+  color: #1f2937;
+  word-break: break-all;
+}
+
+.command-service {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.5rem;
+}
+
+.task-timing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.timing-item {
+  font-size: 0.8125rem;
+}
+
+.timing-label {
+  color: #6b7280;
+}
+
+.timing-value {
+  color: #374151;
+  margin-left: 0.25rem;
+}
+
+.task-footer {
+  display: flex;
+  gap: 0.5rem;
+  padding: 1rem 1.25rem;
+  background: #f9fafb;
+  border-top: 1px solid #f3f4f6;
+}
+
+.recent-executions {
+  background: white;
+  border-radius: var(--radius-sm);
+  border: 1px solid #e5e7eb;
+  padding: 1.25rem;
+}
+
+.recent-executions h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 1rem;
+}
+
+.executions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.execution-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  background: #f9fafb;
+  border-radius: var(--radius-xs);
+}
+
+.execution-item.completed .exec-status i {
+  color: #22c55e;
+}
+
+.execution-item.failed .exec-status i {
+  color: #ef4444;
+}
+
+.execution-item.running .exec-status i {
+  color: #3b82f6;
+}
+
+.exec-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.exec-task {
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.exec-time {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.exec-duration {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-family: monospace;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  background: white;
+  border-radius: var(--radius-sm);
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+}
+
+.modal-container.modal-wide {
+  max-width: 700px;
+}
+
+.modal-header {
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+
+.modal-header h3 i {
+  color: #6366f1;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: var(--radius-sm);
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-group textarea {
+  resize: vertical;
+  font-family: monospace;
+}
+
+.hint {
+  display: block;
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.375rem;
+}
+
+.checkbox-group {
+  margin-top: 0.5rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-label input {
+  width: auto;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.execution-details {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.exec-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.exec-status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.exec-status-badge.completed {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.exec-status-badge.failed {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.exec-status-badge.running {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.output-block,
+.error-block {
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.output-block h4,
+.error-block h4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+  color: #374151;
+}
+
+.output-block pre,
+.error-block pre {
+  background: #1f2937;
+  color: #e5e7eb;
+  padding: 1rem;
+  border-radius: var(--radius-sm);
+  font-family: monospace;
+  font-size: 0.8125rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+.error-block pre {
+  background: #7f1d1d;
+  color: #fecaca;
+}
+
+.no-output,
+.no-history {
+  text-align: center;
+  padding: 2rem;
+  color: #6b7280;
+}
+
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: #f9fafb;
+  border-radius: var(--radius-sm);
+}
+
+.history-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 100px;
+}
+
+.history-item.completed .history-status i {
+  color: #22c55e;
+}
+
+.history-item.failed .history-status i {
+  color: #ef4444;
+}
+
+.history-time {
+  flex: 1;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.history-duration {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+@media (max-width: 768px) {
+  .view-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .header-actions {
+    justify-content: flex-end;
+  }
+
+  .tasks-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

From 5fcd5f6a336581b2aec17b7bfefd16da3c83db1f Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 5 Jan 2026 22:27:55 +0100
Subject: [PATCH 2/3] test(cron-jobs): Add unit tests for CronJobsView

Add comprehensive test suite covering view structure, data loading,
filtering, pagination, modal interactions, task actions, execution
history, and form validation.

Signed-off-by: nfebe <fenn25.fn@gmail.com>
---
 src/views/CronJobsView.test.ts | 541 +++++++++++++++++++++++++++++++++
 src/views/CronJobsView.vue     |   4 +-
 2 files changed, 543 insertions(+), 2 deletions(-)
 create mode 100644 src/views/CronJobsView.test.ts

diff --git a/src/views/CronJobsView.test.ts b/src/views/CronJobsView.test.ts
new file mode 100644
index 0000000..d864cc2
--- /dev/null
+++ b/src/views/CronJobsView.test.ts
@@ -0,0 +1,541 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import CronJobsView from "./CronJobsView.vue";
+
+vi.mock("@/services/api", () => ({
+  schedulerApi: {
+    listTasks: vi.fn().mockResolvedValue({
+      data: {
+        tasks: [
+          {
+            id: 1,
+            name: "Daily backup",
+            type: "backup",
+            deployment_name: "wordpress",
+            cron_expr: "0 2 * * *",
+            enabled: true,
+            config: { backup_config: { retention_count: 7 } },
+            last_run: "2024-01-15T02:00:00Z",
+            next_run: "2024-01-16T02:00:00Z",
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-15T02:00:00Z",
+          },
+          {
+            id: 2,
+            name: "Cache cleanup",
+            type: "command",
+            deployment_name: "laravel-app",
+            cron_expr: "0 * * * *",
+            enabled: true,
+            config: {
+              command_config: { service: "app", command: "php artisan cache:clear", timeout: 300 },
+            },
+            last_run: "2024-01-15T10:00:00Z",
+            next_run: "2024-01-15T11:00:00Z",
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-15T10:00:00Z",
+          },
+          {
+            id: 3,
+            name: "Disabled task",
+            type: "command",
+            deployment_name: "wordpress",
+            cron_expr: "0 0 * * 0",
+            enabled: false,
+            config: { command_config: { service: "", command: "echo hello", timeout: 60 } },
+            created_at: "2024-01-01T00:00:00Z",
+            updated_at: "2024-01-01T00:00:00Z",
+          },
+        ],
+      },
+    }),
+    getTask: vi.fn().mockResolvedValue({
+      data: { task: { id: 1, name: "Daily backup" } },
+    }),
+    createTask: vi.fn().mockResolvedValue({
+      data: { task: { id: 4, name: "New task" } },
+    }),
+    updateTask: vi.fn().mockResolvedValue({
+      data: { task: { id: 1, name: "Daily backup" } },
+    }),
+    deleteTask: vi.fn().mockResolvedValue({
+      data: { message: "Task deleted" },
+    }),
+    runTaskNow: vi.fn().mockResolvedValue({
+      data: { message: "Task started" },
+    }),
+    getTaskExecutions: vi.fn().mockResolvedValue({
+      data: {
+        executions: [
+          {
+            id: 1,
+            task_id: 1,
+            status: "completed",
+            output: "Backup completed successfully",
+            started_at: "2024-01-15T02:00:00Z",
+            ended_at: "2024-01-15T02:05:00Z",
+            duration_ms: 300000,
+          },
+        ],
+      },
+    }),
+    getRecentExecutions: vi.fn().mockResolvedValue({
+      data: {
+        executions: [
+          {
+            id: 1,
+            task_id: 1,
+            status: "completed",
+            output: "Backup completed",
+            started_at: "2024-01-15T02:00:00Z",
+            ended_at: "2024-01-15T02:05:00Z",
+            duration_ms: 300000,
+          },
+          {
+            id: 2,
+            task_id: 2,
+            status: "failed",
+            error: "Connection timeout",
+            started_at: "2024-01-15T10:00:00Z",
+            ended_at: "2024-01-15T10:00:30Z",
+            duration_ms: 30000,
+          },
+        ],
+      },
+    }),
+  },
+  deploymentsApi: {
+    list: vi.fn().mockResolvedValue({
+      data: {
+        deployments: [
+          { name: "wordpress", status: "running" },
+          { name: "laravel-app", status: "running" },
+        ],
+      },
+    }),
+  },
+}));
+
+const mockTasks = [
+  {
+    id: 1,
+    name: "Daily backup",
+    type: "backup",
+    deployment_name: "wordpress",
+    cron_expr: "0 2 * * *",
+    enabled: true,
+    config: { backup_config: { retention_count: 7 } },
+  },
+  {
+    id: 2,
+    name: "Cache cleanup",
+    type: "command",
+    deployment_name: "laravel-app",
+    cron_expr: "0 * * * *",
+    enabled: true,
+    config: { command_config: { service: "app", command: "php artisan cache:clear", timeout: 300 } },
+  },
+];
+
+vi.mock("vue-router", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+  }),
+}));
+
+describe("CronJobsView", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const mountView = () => {
+    return mount(CronJobsView, {
+      global: {
+        plugins: [
+          createTestingPinia({
+            createSpy: vi.fn,
+          }),
+        ],
+        stubs: {
+          ConfirmModal: true,
+          Teleport: true,
+        },
+      },
+    });
+  };
+
+  describe("View structure", () => {
+    it("renders the cron jobs view container", () => {
+      const wrapper = mountView();
+      expect(wrapper.find(".cron-jobs-view").exists()).toBe(true);
+    });
+
+    it("displays the header with title", () => {
+      const wrapper = mountView();
+      expect(wrapper.find("h2").text()).toBe("Scheduled Tasks");
+    });
+
+    it("contains New Cron Job button", () => {
+      const wrapper = mountView();
+      expect(wrapper.text()).toContain("New Cron Job");
+    });
+
+    it("contains Refresh button", () => {
+      const wrapper = mountView();
+      const refreshBtn = wrapper.find("button.btn-icon");
+      expect(refreshBtn.exists()).toBe(true);
+    });
+  });
+
+  describe("Data loading", () => {
+    it("fetches tasks on mount", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      mountView();
+      await flushPromises();
+      expect(schedulerApi.listTasks).toHaveBeenCalled();
+    });
+
+    it("fetches recent executions on mount", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      mountView();
+      await flushPromises();
+      expect(schedulerApi.getRecentExecutions).toHaveBeenCalledWith(10);
+    });
+
+    it("fetches deployments on mount", async () => {
+      const { deploymentsApi } = await import("@/services/api");
+      mountView();
+      await flushPromises();
+      expect(deploymentsApi.list).toHaveBeenCalled();
+    });
+  });
+
+  describe("Task display", () => {
+    it("displays task cards after loading", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      const taskCards = wrapper.findAll(".task-card");
+      expect(taskCards.length).toBe(3);
+    });
+
+    it("shows task name in card", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      expect(wrapper.text()).toContain("Daily backup");
+      expect(wrapper.text()).toContain("Cache cleanup");
+    });
+
+    it("shows deployment name for each task", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      expect(wrapper.text()).toContain("wordpress");
+      expect(wrapper.text()).toContain("laravel-app");
+    });
+
+    it("shows cron expression for each task", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      expect(wrapper.text()).toContain("0 2 * * *");
+      expect(wrapper.text()).toContain("0 * * * *");
+    });
+
+    it("shows command for command-type tasks", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      expect(wrapper.text()).toContain("php artisan cache:clear");
+    });
+
+    it("applies disabled class to disabled tasks", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      const disabledCards = wrapper.findAll(".task-card.disabled");
+      expect(disabledCards.length).toBe(1);
+    });
+  });
+
+  describe("Filtering", () => {
+    it("shows filters bar when tasks exist", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+      expect(wrapper.find(".filters-bar").exists()).toBe(true);
+    });
+
+    it("filters tasks by search query", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      const searchInput = wrapper.find(".search-box input");
+      await searchInput.setValue("backup");
+
+      const filteredTasks = (wrapper.vm as any).filteredTasks;
+      expect(filteredTasks.length).toBe(1);
+      expect(filteredTasks[0].name).toBe("Daily backup");
+    });
+
+    it("filters tasks by deployment", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      const select = wrapper.findAll(".filter-select")[0];
+      await select.setValue("wordpress");
+
+      const filteredTasks = (wrapper.vm as any).filteredTasks;
+      expect(filteredTasks.length).toBe(2);
+      expect(filteredTasks.every((t: any) => t.deployment_name === "wordpress")).toBe(true);
+    });
+
+    it("filters tasks by type", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      const select = wrapper.findAll(".filter-select")[1];
+      await select.setValue("command");
+
+      const filteredTasks = (wrapper.vm as any).filteredTasks;
+      expect(filteredTasks.length).toBe(2);
+      expect(filteredTasks.every((t: any) => t.type === "command")).toBe(true);
+    });
+
+    it("resets page to 1 when filter changes", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).currentPage = 2;
+      const searchInput = wrapper.find(".search-box input");
+      await searchInput.setValue("test");
+
+      expect((wrapper.vm as any).currentPage).toBe(1);
+    });
+  });
+
+  describe("Pagination", () => {
+    it("computes total pages correctly", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      expect((wrapper.vm as any).totalPages).toBe(1);
+    });
+
+    it("paginates tasks correctly", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      const paginatedTasks = (wrapper.vm as any).paginatedTasks;
+      expect(paginatedTasks.length).toBe(3);
+    });
+  });
+
+  describe("Modal interactions", () => {
+    it("opens create modal when New Cron Job button clicked", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      const newBtn = wrapper.find("button.btn-primary");
+      await newBtn.trigger("click");
+
+      expect((wrapper.vm as any).showModal).toBe(true);
+      expect((wrapper.vm as any).editingTask).toBe(null);
+    });
+
+    it("opens edit modal with task data", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).openEditModal(mockTasks[1]);
+
+      expect((wrapper.vm as any).showModal).toBe(true);
+      expect((wrapper.vm as any).editingTask).toEqual(mockTasks[1]);
+      expect((wrapper.vm as any).form.name).toBe("Cache cleanup");
+    });
+
+    it("closes modal and resets form", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).showModal = true;
+      (wrapper.vm as any).form.name = "Test";
+
+      (wrapper.vm as any).closeModal();
+
+      expect((wrapper.vm as any).showModal).toBe(false);
+      expect((wrapper.vm as any).form.name).toBe("");
+    });
+  });
+
+  describe("Task actions", () => {
+    it("toggles task enabled state", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      const wrapper = mountView();
+      await flushPromises();
+
+      await (wrapper.vm as any).toggleTask(mockTasks[0]);
+
+      expect(schedulerApi.updateTask).toHaveBeenCalledWith(1, { enabled: false });
+    });
+
+    it("runs task immediately", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      const wrapper = mountView();
+      await flushPromises();
+
+      await (wrapper.vm as any).runTaskNow(mockTasks[0]);
+
+      expect(schedulerApi.runTaskNow).toHaveBeenCalledWith(1);
+    });
+
+    it("opens delete confirmation modal", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).confirmDelete(mockTasks[0]);
+
+      expect((wrapper.vm as any).showDeleteModal).toBe(true);
+      expect((wrapper.vm as any).taskToDelete).toEqual(mockTasks[0]);
+    });
+
+    it("deletes task after confirmation", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).taskToDelete = mockTasks[0];
+      await (wrapper.vm as any).deleteTask();
+
+      expect(schedulerApi.deleteTask).toHaveBeenCalledWith(1);
+    });
+  });
+
+  describe("Execution history", () => {
+    it("fetches task executions when viewing history", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      const wrapper = mountView();
+      await flushPromises();
+
+      await (wrapper.vm as any).viewExecutions(mockTasks[0]);
+
+      expect(schedulerApi.getTaskExecutions).toHaveBeenCalledWith(1, 50);
+      expect((wrapper.vm as any).showHistoryModal).toBe(true);
+    });
+
+    it("displays recent executions section", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      expect(wrapper.find(".recent-executions").exists()).toBe(true);
+      expect(wrapper.text()).toContain("Recent Executions");
+    });
+  });
+
+  describe("Helper functions", () => {
+    it("cronToHuman converts daily schedule correctly", () => {
+      const wrapper = mountView();
+      expect((wrapper.vm as any).cronToHuman("0 2 * * *")).toBe("Daily at 02:00");
+    });
+
+    it("cronToHuman converts hourly schedule correctly", () => {
+      const wrapper = mountView();
+      expect((wrapper.vm as any).cronToHuman("0 * * * *")).toBe("Every hour");
+    });
+
+    it("cronToHuman returns human readable for minute intervals", () => {
+      const wrapper = mountView();
+      expect((wrapper.vm as any).cronToHuman("*/5 * * * *")).toContain("minute");
+    });
+
+    it("getTaskName returns task name by id", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      expect((wrapper.vm as any).getTaskName(1)).toBe("Daily backup");
+      expect((wrapper.vm as any).getTaskName(999)).toBe("Task #999");
+    });
+
+    it("statusIcon returns correct icon for each status", () => {
+      const wrapper = mountView();
+      expect((wrapper.vm as any).statusIcon("completed")).toBe("pi pi-check-circle");
+      expect((wrapper.vm as any).statusIcon("failed")).toBe("pi pi-times-circle");
+      expect((wrapper.vm as any).statusIcon("running")).toBe("pi pi-spin pi-spinner");
+      expect((wrapper.vm as any).statusIcon("pending")).toBe("pi pi-clock");
+    });
+  });
+
+  describe("Form validation", () => {
+    it("form is invalid when required fields are empty", () => {
+      const wrapper = mountView();
+      expect((wrapper.vm as any).isFormValid).toBe(false);
+    });
+
+    it("form is valid when all required fields are filled", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).form.name = "Test task";
+      (wrapper.vm as any).form.deployment_name = "wordpress";
+      (wrapper.vm as any).form.cron_expr = "0 * * * *";
+      (wrapper.vm as any).form.command = "echo test";
+
+      expect((wrapper.vm as any).isFormValid).toBe(true);
+    });
+  });
+
+  describe("Task creation", () => {
+    it("creates new task with correct data", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      const wrapper = mountView();
+      await flushPromises();
+
+      (wrapper.vm as any).form = {
+        name: "New task",
+        deployment_name: "wordpress",
+        cron_expr: "0 3 * * *",
+        service: "app",
+        command: "php artisan schedule:run",
+        timeout: 300,
+        enabled: true,
+      };
+
+      await (wrapper.vm as any).saveTask();
+
+      expect(schedulerApi.createTask).toHaveBeenCalledWith({
+        name: "New task",
+        type: "command",
+        deployment_name: "wordpress",
+        cron_expr: "0 3 * * *",
+        enabled: true,
+        config: {
+          command_config: {
+            service: "app",
+            command: "php artisan schedule:run",
+            timeout: 300,
+          },
+        },
+      });
+    });
+  });
+
+  describe("Empty state", () => {
+    it("shows empty state when no tasks", async () => {
+      const { schedulerApi } = await import("@/services/api");
+      (schedulerApi.listTasks as any).mockResolvedValueOnce({
+        data: { tasks: [] },
+      });
+
+      const wrapper = mountView();
+      await flushPromises();
+
+      expect(wrapper.find(".empty-state").exists()).toBe(true);
+      expect(wrapper.text()).toContain("No Scheduled Tasks");
+    });
+
+    it("shows no matching tasks message when filters return empty", async () => {
+      const wrapper = mountView();
+      await flushPromises();
+
+      const searchInput = wrapper.find(".search-box input");
+      await searchInput.setValue("nonexistent-task-xyz");
+
+      expect(wrapper.text()).toContain("No Matching Tasks");
+    });
+  });
+});
diff --git a/src/views/CronJobsView.vue b/src/views/CronJobsView.vue
index a0842c1..968bceb 100644
--- a/src/views/CronJobsView.vue
+++ b/src/views/CronJobsView.vue
@@ -491,8 +491,8 @@ const defaultForm = () => ({
 const form = ref(defaultForm());
 
 const isFormValid = computed(() => {
-  return (
-    form.value.name.trim() && form.value.deployment_name && form.value.cron_expr.trim() && form.value.command.trim()
+  return Boolean(
+    form.value.name.trim() && form.value.deployment_name && form.value.cron_expr.trim() && form.value.command.trim(),
   );
 });
 

From d73c475f8a4042da916e4b9a429759e54ac32005 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Mon, 5 Jan 2026 22:35:30 +0100
Subject: [PATCH 3/3] refactor(cron-jobs): Add type safety and named constants

- Add CronJobForm interface for form object
- Replace magic numbers with named constants for pagination
  and API limits (PAGE_SIZE, RECENT_EXECUTIONS_LIMIT,
  TASK_HISTORY_LIMIT)
---
 src/views/CronJobsView.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/views/CronJobsView.vue b/src/views/CronJobsView.vue
index 968bceb..a20bce5 100644
--- a/src/views/CronJobsView.vue
+++ b/src/views/CronJobsView.vue
@@ -373,6 +373,10 @@ import type { Deployment } from "@/types";
 import { useNotificationsStore } from "@/stores/notifications";
 import ConfirmModal from "@/components/ConfirmModal.vue";
 
+const PAGE_SIZE = 12;
+const RECENT_EXECUTIONS_LIMIT = 10;
+const TASK_HISTORY_LIMIT = 50;
+
 const notifications = useNotificationsStore();
 
 const tasks = ref<ScheduledTask[]>([]);
@@ -385,7 +389,7 @@ const searchQuery = ref("");
 const filterDeployment = ref("");
 const filterType = ref("");
 const currentPage = ref(1);
-const pageSize = ref(12);
+const pageSize = ref(PAGE_SIZE);
 
 const uniqueDeployments = computed(() => {
   const deps = new Set(tasks.value.map((t) => t.deployment_name));
@@ -478,7 +482,17 @@ const taskToDelete = ref<ScheduledTask | null>(null);
 const selectedExecution = ref<TaskExecution | null>(null);
 const selectedTask = ref<ScheduledTask | null>(null);
 
-const defaultForm = () => ({
+interface CronJobForm {
+  name: string;
+  deployment_name: string;
+  cron_expr: string;
+  service: string;
+  command: string;
+  timeout: number;
+  enabled: boolean;
+}
+
+const defaultForm = (): CronJobForm => ({
   name: "",
   deployment_name: "",
   cron_expr: "",
@@ -488,7 +502,7 @@ const defaultForm = () => ({
   enabled: true,
 });
 
-const form = ref(defaultForm());
+const form = ref<CronJobForm>(defaultForm());
 
 const isFormValid = computed(() => {
   return Boolean(
@@ -499,7 +513,10 @@ const isFormValid = computed(() => {
 const fetchTasks = async () => {
   loading.value = true;
   try {
-    const [tasksRes, execsRes] = await Promise.all([schedulerApi.listTasks(), schedulerApi.getRecentExecutions(10)]);
+    const [tasksRes, execsRes] = await Promise.all([
+      schedulerApi.listTasks(),
+      schedulerApi.getRecentExecutions(RECENT_EXECUTIONS_LIMIT),
+    ]);
     tasks.value = tasksRes.data.tasks || [];
     recentExecutions.value = execsRes.data.executions || [];
   } catch (e: any) {
@@ -640,7 +657,7 @@ const viewExecutions = async (task: ScheduledTask) => {
   selectedTask.value = task;
   showHistoryModal.value = true;
   try {
-    const response = await schedulerApi.getTaskExecutions(task.id, 50);
+    const response = await schedulerApi.getTaskExecutions(task.id, TASK_HISTORY_LIMIT);
     taskExecutions.value = response.data.executions || [];
   } catch {
     taskExecutions.value = [];