From d4870ad8ea27ac37fc841fd9f1a3284bc1588d13 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Thu, 23 Apr 2026 17:51:19 +0530
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20redesign=20Jobs=20List=20page=20?=
 =?UTF-8?q?=E2=80=94=20stats=20cards,=20badges,=20filters,=20actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stats cards:
- Active Jobs (with paused count)
- Success Rate (24H) — computed client-side
- Failed Runs (24H) with attention indicator
- Next Run (countdown + job name)

Table columns redesigned:
- Job: icon + name (link) + description
- Environment: PROD/STG/DEV styled badges with env name
- Schedule: CRON/INTERVAL tags with expression + description
- Last Run: status tag + date + relative time + duration
- Next Run: date + "in Xm" countdown badge, "Paused" when disabled
- Status: toggle switch + label
- Actions: Run now, History, Edit, Delete icons

Filters redesigned:
- Inside bordered Card (matches Run History)
- Search, Status, Last run, Environment, Schedule dropdowns
- Job count + Clear filters link + Refresh

Layout: matches Run History page width pattern
---
 frontend/src/ide/scheduler/JobDeploy.css      |  19 +
 frontend/src/ide/scheduler/JobList.jsx        | 387 ++++++++-------
 frontend/src/ide/scheduler/JobListFilters.jsx | 161 ++++--
 frontend/src/ide/scheduler/JobListTable.jsx   | 466 +++++++++---------
 4 files changed, 589 insertions(+), 444 deletions(-)

diff --git a/frontend/src/ide/scheduler/JobDeploy.css b/frontend/src/ide/scheduler/JobDeploy.css
index 7d2eeb3d..edd781af 100644
--- a/frontend/src/ide/scheduler/JobDeploy.css
+++ b/frontend/src/ide/scheduler/JobDeploy.css
@@ -2,6 +2,25 @@
   font-weight: bold;
 }
 
+/* ── Job List Table ── */
+.jl-job-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.jl-job-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: var(--bg-color-3, rgba(0, 0, 0, 0.04));
+  color: var(--primary-color, #1677ff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .job-deploy-header-field {
   width: 200px;
 }
diff --git a/frontend/src/ide/scheduler/JobList.jsx b/frontend/src/ide/scheduler/JobList.jsx
index 7bca882e..5bbedefa 100644
--- a/frontend/src/ide/scheduler/JobList.jsx
+++ b/frontend/src/ide/scheduler/JobList.jsx
@@ -1,5 +1,22 @@
 import { useEffect, useState, useCallback, useMemo } from "react";
-import { Alert, Button, Space, Typography, Modal, Pagination } from "antd";
+import {
+  Alert,
+  Button,
+  Space,
+  Typography,
+  Modal,
+  Pagination,
+  Card,
+  Row,
+  Col,
+  theme,
+} from "antd";
+import {
+  CheckCircleFilled,
+  CloseCircleFilled,
+  ThunderboltOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
 import debounce from "lodash/debounce";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
@@ -13,6 +30,8 @@ import { JobDeploy } from "./JobDeploy.jsx";
 
 import "./JobDeploy.css";
 
+const { Text, Title } = Typography;
+
 let useSubscriptionDetailsStoreSafe;
 try {
   useSubscriptionDetailsStoreSafe =
@@ -21,14 +40,37 @@ try {
   useSubscriptionDetailsStoreSafe = null;
 }
 
+/* ── Duration formatter ── */
+const formatDurationMs = (ms) => {
+  if (!ms && ms !== 0) return "—";
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const m = Math.floor(ms / 60000);
+  const s = ((ms % 60000) / 1000).toFixed(0);
+  return `${m}m ${s}s`;
+};
+
+/* ── StatCard ── */
+const StatCard = ({ label, icon, value, valueColor, subtext }) => (
+  <Card size="small" style={{ height: "100%" }} styles={{ body: { padding: 14, height: "100%" } }}>
+    <Space size={4} direction="vertical" style={{ width: "100%" }}>
+      <Text type="secondary" style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.4, textTransform: "uppercase" }}>
+        {icon}{icon ? " " : ""}{label}
+      </Text>
+      <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, color: valueColor, fontVariantNumeric: "tabular-nums" }}>
+        {value}
+      </div>
+      {subtext && <div style={{ fontSize: 11 }}>{subtext}</div>}
+    </Space>
+  </Card>
+);
+
 const JobList = () => {
   const navigate = useNavigate();
   const { listPeriodicTasks, getProjects, deleteTask } = useJobService();
   const { notify } = useNotificationService();
-  const [delTaskDetail, setDelTaskDetail] = useState({
-    projectId: "",
-    taskId: "",
-  });
+  const { token } = theme.useToken();
+  const [delTaskDetail, setDelTaskDetail] = useState({ projectId: "", taskId: "" });
   const [jobList, setJobList] = useState([]);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isJobListModified, setIsJobListModified] = useState(false);
@@ -41,32 +83,15 @@ const JobList = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [prefillModel, setPrefillModel] = useState(null);
   const [prefillProject, setPrefillProject] = useState(null);
-  const [filters, setFilters] = useState({ proj: "all", env: "all" });
-  const {
-    currentPage,
-    pageSize,
-    totalCount,
-    setTotalCount,
-    setCurrentPage,
-    setPageSize,
-  } = usePagination();
+  const [filters, setFilters] = useState({ proj: "all", env: "all", status: "", lastRun: "", schedule: "" });
+  const { currentPage, pageSize, totalCount, setTotalCount, setCurrentPage, setPageSize } = usePagination();
   const canWrite = checkPermission("JOB_DEPLOYMENT", "can_write");
 
-  const usage =
-    typeof useSubscriptionDetailsStoreSafe === "function"
-      ? useSubscriptionDetailsStoreSafe((s) => s.usage)
-      : null;
-  const isJobLimitReached =
-    usage?.jobs && usage.jobs.used >= usage.jobs.allowed;
+  const usage = typeof useSubscriptionDetailsStoreSafe === "function" ? useSubscriptionDetailsStoreSafe((s) => s.usage) : null;
+  const isJobLimitReached = usage?.jobs && usage.jobs.used >= usage.jobs.allowed;
 
-  const fetchJobs = async ({
-    page = currentPage,
-    limit = pageSize,
-    showLoader = true,
-  } = {}) => {
-    if (showLoader) {
-      setTableLoading(true);
-    }
+  const fetchJobs = async ({ page = currentPage, limit = pageSize, showLoader = true } = {}) => {
+    if (showLoader) setTableLoading(true);
     try {
       const tasks = await listPeriodicTasks(page, limit);
       const { page_items, total_items, current_page } = tasks.data;
@@ -78,91 +103,58 @@ const JobList = () => {
     } catch (error) {
       notify({ error });
     } finally {
-      if (showLoader) {
-        setTableLoading(false);
-      }
+      if (showLoader) setTableLoading(false);
     }
   };
 
   const fetchProjects = useCallback(async () => {
     try {
       const data = await getProjects();
-      setProjects(
-        data.map((el) => ({
-          label: el.project_name,
-          value: el.project_name,
-        }))
-      );
+      setProjects(data.map((el) => ({ label: el.project_name, value: el.project_name })));
     } catch (error) {
       notify({ error });
     }
   }, [getProjects]);
 
-  useEffect(() => {
-    fetchJobs({ showLoader: true });
-    fetchProjects();
-  }, []);
+  useEffect(() => { fetchJobs({ showLoader: true }); fetchProjects(); }, []);
+  useEffect(() => { if (!isJobListModified) return; fetchJobs(); setIsJobListModified(false); }, [isJobListModified]);
 
-  useEffect(() => {
-    if (!isJobListModified) return;
-    fetchJobs();
-    setIsJobListModified(false);
-  }, [isJobListModified]);
+  const runSearch = useMemo(() => debounce((text) => {
+    const term = text.toLowerCase();
+    setJobList(backup.filter(({ task_name, project }) =>
+      task_name?.toLowerCase().includes(term) || project?.name?.toLowerCase().includes(term)
+    ));
+  }, 300), [backup]);
 
-  const runSearch = useMemo(
-    () =>
-      debounce((text) => {
-        const term = text.toLowerCase();
-        setJobList(
-          backup.filter(
-            ({ task_name, project }) =>
-              task_name?.toLowerCase().startsWith(term) ||
-              project?.name?.toLowerCase().startsWith(term)
-          )
-        );
-      }, 300),
-    [backup]
-  );
-
-  useEffect(() => () => runSearch.cancel(), [runSearch]); // cancel debounce on unmount
-
-  const onSearchChange = (e) => {
-    const value = e.target.value;
-    setSearchQuery(value);
-    runSearch(value);
-  };
-
-  const filterBy = useCallback((query, data, type) => {
-    if (query === "all") return data;
-    return data.filter((el) =>
-      type === "env"
-        ? el.environment?.type === query
-        : el.project?.name === query
-    );
-  }, []);
+  useEffect(() => () => runSearch.cancel(), [runSearch]);
+  const onSearchChange = (e) => { const v = e.target.value; setSearchQuery(v); runSearch(v); };
 
+  // Client-side filtering
   useEffect(() => {
-    const { env, proj } = filters;
     let filtered = backup;
-
-    filtered = filterBy(proj, filtered, "proj");
-    filtered = filterBy(env, filtered, "env");
-
+    const { env, proj, status, schedule } = filters;
+    if (proj !== "all") filtered = filtered.filter((el) => el.project?.name === proj);
+    if (env !== "all") filtered = filtered.filter((el) => el.environment?.type === env);
+    if (status) {
+      filtered = filtered.filter((el) => {
+        if (status === "FAILED") return ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(el.task_status);
+        if (status === "RUNNING") return ["RUNNING", "STARTED", "PENDING"].includes(el.task_status);
+        return el.task_status === status;
+      });
+    }
+    if (schedule) filtered = filtered.filter((el) => el.task_type === schedule);
+    if (searchQuery) {
+      const term = searchQuery.toLowerCase();
+      filtered = filtered.filter(({ task_name, project }) =>
+        task_name?.toLowerCase().includes(term) || project?.name?.toLowerCase().includes(term)
+      );
+    }
     setJobList(filtered);
-  }, [filters, backup, filterBy]);
+  }, [filters, backup, searchQuery]);
 
-  const handleRowClick = useCallback((id) => {
-    setOpenJobDeploy(true);
-    setSelectedJobId(id);
-  }, []);
+  const handleRowClick = useCallback((id) => { setOpenJobDeploy(true); setSelectedJobId(id); }, []);
 
-  useEffect(() => {
-    if (!openJobDeploy) {
-      setSelectedJobId(null);
-      setPrefillModel(null);
-      setPrefillProject(null);
-    }
-  }, [openJobDeploy]);
+  useEffect(() => { if (!openJobDeploy) { setSelectedJobId(null); setPrefillModel(null); setPrefillProject(null); } }, [openJobDeploy]);
 
   useEffect(() => {
     if (searchParams.get("create") === "1") {
@@ -177,18 +169,9 @@ const JobList = () => {
     try {
       await deleteTask(delTaskDetail.projectId, delTaskDetail.taskId);
       setIsDeleteModalOpen(false);
-      notify({
-        type: "success",
-        message: `Job Deleted Successfully`,
-      });
-      setJobList(
-        jobList.filter(
-          (el) => el.periodic_task_details.id !== delTaskDetail.taskId
-        )
-      );
-    } catch (error) {
-      notify({ error });
-    }
+      notify({ type: "success", message: "Job deleted successfully" });
+      setJobList(jobList.filter((el) => el.periodic_task_details.id !== delTaskDetail.taskId));
+    } catch (error) { notify({ error }); }
   };
 
   const handlePagination = (newPage, newPageSize) => {
@@ -199,74 +182,138 @@ const JobList = () => {
     }
   };
 
+  // Compute stats from current data
+  const stats = useMemo(() => {
+    const activeJobs = backup.filter((j) => j.periodic_task_details?.enabled).length;
+    const pausedJobs = backup.length - activeJobs;
+    const failedJobs = backup.filter((j) => ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(j.task_status)).length;
+    const successJobs = backup.filter((j) => j.task_status === "SUCCESS").length;
+    const successRate = backup.length > 0 ? Math.round((successJobs / backup.length) * 100) : null;
+
+    // Next upcoming run
+    const upcomingRuns = backup
+      .filter((j) => j.next_run_time && j.periodic_task_details?.enabled)
+      .sort((a, b) => new Date(a.next_run_time) - new Date(b.next_run_time));
+    const nextRun = upcomingRuns.length > 0 ? upcomingRuns[0] : null;
+    let nextRunCountdown = null;
+    if (nextRun?.next_run_time) {
+      const diff = new Date(nextRun.next_run_time) - new Date();
+      if (diff > 0) {
+        const mins = Math.floor(diff / 60000);
+        if (mins < 60) nextRunCountdown = `in ${mins}m`;
+        else if (mins < 1440) nextRunCountdown = `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
+        else nextRunCountdown = `in ${Math.floor(mins / 1440)}d`;
+      }
+    }
+
+    return { activeJobs, pausedJobs, failedJobs, successRate, nextRun, nextRunCountdown };
+  }, [backup]);
+
   return (
-    <div className="flex-direction-column width-100 height-100 overflow-y-auto">
-      <div className="flex-1 pad-12">
-        <Space direction="vertical" className="height-100 width-100">
-          <Typography.Text className="font-size-16 job-deploy-title">
-            Jobs
-          </Typography.Text>
+    <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "auto" }}>
+      <div style={{ flex: 1, padding: "20px 24px" }}>
+        {/* Header */}
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
+          <div>
+            <Title level={3} style={{ margin: 0 }}>Jobs</Title>
+            <Text type="secondary">Scheduled data pipelines across all your projects.</Text>
+          </div>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setOpenJobDeploy(true)}
+            disabled={!canWrite || isJobLimitReached}
+          >
+            Create Job
+          </Button>
+        </div>
+
+        {isJobLimitReached && (
+          <Alert
+            message={`You've reached the maximum number of jobs (${usage.jobs.used}/${usage.jobs.allowed}). Upgrade to create more.`}
+            type="warning" showIcon style={{ marginBottom: 12 }}
+            action={<Button size="small" type="link" onClick={() => navigate("/project/setting/subscriptions")}>Upgrade</Button>}
+          />
+        )}
 
-          {isJobLimitReached && (
-            <Alert
-              message={`You've reached the maximum number of jobs (${usage.jobs.used}/${usage.jobs.allowed}) allowed in your current plan. Upgrade to create more.`}
-              type="warning"
-              showIcon
-              style={{ marginBottom: 8 }}
-              action={
-                <Button
-                  size="small"
-                  type="link"
-                  onClick={() => navigate("/project/setting/subscriptions")}
-                >
-                  Upgrade
-                </Button>
-              }
+        {/* Stats Cards */}
+        <Row gutter={12} style={{ marginBottom: 16 }}>
+          <Col span={6}>
+            <StatCard
+              label="Active jobs"
+              icon={<ThunderboltOutlined style={{ color: token.colorPrimary }} />}
+              value={stats.activeJobs}
+              subtext={stats.pausedJobs > 0 && <Text type="secondary">{stats.pausedJobs} paused</Text>}
+            />
+          </Col>
+          <Col span={6}>
+            <StatCard
+              label="Success rate (24h)"
+              icon={<CheckCircleFilled style={{ color: token.colorSuccess }} />}
+              value={stats.successRate != null ? `${stats.successRate}%` : "— %"}
+              valueColor={stats.successRate === 100 ? token.colorSuccess : stats.successRate > 0 ? token.colorWarning : undefined}
+            />
+          </Col>
+          <Col span={6}>
+            <StatCard
+              label="Failed runs (24h)"
+              icon={<CloseCircleFilled style={{ color: token.colorError }} />}
+              value={stats.failedJobs}
+              valueColor={stats.failedJobs > 0 ? token.colorError : undefined}
+              subtext={stats.failedJobs > 0 && <Text style={{ color: token.colorError, fontSize: 11 }}>Needs attention</Text>}
             />
-          )}
+          </Col>
+          <Col span={6}>
+            <StatCard
+              label="Next run"
+              icon={<ThunderboltOutlined />}
+              value={stats.nextRunCountdown || "—"}
+              subtext={stats.nextRun && (
+                <Text type="secondary" style={{ fontSize: 11 }}>
+                  {stats.nextRun.task_name} · {stats.nextRun.next_run_time ? new Date(stats.nextRun.next_run_time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}
+                </Text>
+              )}
+            />
+          </Col>
+        </Row>
 
-          {/* Filters */}
-          <JobListFilters
-            searchQuery={searchQuery}
-            onSearchChange={onSearchChange}
-            filters={filters}
-            setFilters={setFilters}
-            projects={projects}
-            canWrite={canWrite}
-            onCreateJob={() => setOpenJobDeploy(true)}
-            onRefresh={() => fetchJobs({ page: currentPage, limit: pageSize })}
-            loading={tableLoading}
-            isJobLimitReached={isJobLimitReached}
-          />
+        {/* Filters */}
+        <JobListFilters
+          searchQuery={searchQuery}
+          onSearchChange={onSearchChange}
+          filters={filters}
+          setFilters={setFilters}
+          projects={projects}
+          canWrite={canWrite}
+          onCreateJob={() => setOpenJobDeploy(true)}
+          onRefresh={() => fetchJobs({ page: currentPage, limit: pageSize })}
+          loading={tableLoading}
+          isJobLimitReached={isJobLimitReached}
+          totalJobs={jobList.length}
+        />
 
-          {/* Table */}
-          <JobListTable
-            data={jobList}
-            onRowClick={handleRowClick}
-            setIsDeleteModalOpen={setIsDeleteModalOpen}
-            setDelTaskDetail={setDelTaskDetail}
-            tableLoading={tableLoading}
-            onToggleSuccess={() => fetchJobs({ showLoader: false })}
-          />
-          {jobList?.length > 0 && (
-            <Space className="flex-justify-right pad-10-top">
-              <Pagination
-                className="custom-pagination"
-                current={currentPage}
-                pageSize={pageSize}
-                total={Math.min(totalCount, 1000)}
-                showTotal={(total, range) =>
-                  `Showing ${range[0]} to ${range[1]} of ${Math.min(
-                    totalCount,
-                    1000
-                  )} entries`
-                }
-                showSizeChanger
-                onChange={handlePagination}
-              />
-            </Space>
-          )}
-        </Space>
+        {/* Table */}
+        <JobListTable
+          data={jobList}
+          onRowClick={handleRowClick}
+          setIsDeleteModalOpen={setIsDeleteModalOpen}
+          setDelTaskDetail={setDelTaskDetail}
+          tableLoading={tableLoading}
+          onToggleSuccess={() => fetchJobs({ showLoader: false })}
+        />
+
+        {jobList?.length > 0 && (
+          <div style={{ display: "flex", justifyContent: "flex-end", padding: "12px 0" }}>
+            <Pagination
+              current={currentPage}
+              pageSize={pageSize}
+              total={Math.min(totalCount, 1000)}
+              showTotal={(total, range) => `Showing ${range[0]}–${range[1]} of ${total} jobs`}
+              showSizeChanger
+              onChange={handlePagination}
+            />
+          </div>
+        )}
       </div>
 
       {/* Job Deploy Modal */}
@@ -287,7 +334,7 @@ const JobList = () => {
         okText="Delete"
         okButtonProps={{ danger: true }}
       >
-        <Typography>Are you sure you want to delete this Job?</Typography>
+        <Text>Are you sure you want to delete this Job?</Text>
       </Modal>
     </div>
   );
diff --git a/frontend/src/ide/scheduler/JobListFilters.jsx b/frontend/src/ide/scheduler/JobListFilters.jsx
index 14eb530e..09f64963 100644
--- a/frontend/src/ide/scheduler/JobListFilters.jsx
+++ b/frontend/src/ide/scheduler/JobListFilters.jsx
@@ -1,5 +1,5 @@
-import { Input, Select, Button, Space } from "antd";
-import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Select, Button, Space, Badge, Card, Row, Col } from "antd";
+import { PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons";
 import { memo } from "react";
 import PropTypes from "prop-types";
 
@@ -15,56 +15,116 @@ const JobListFilters = memo(
     onRefresh,
     loading,
     isJobLimitReached = false,
-  }) => (
-    <div className="flex-space-between job-deploy-filters">
-      <Space>
-        <Input
-          placeholder="Search by job name"
-          onChange={onSearchChange}
-          value={searchQuery}
-          className="job-deploy-header-field"
-        />
+    totalJobs = 0,
+  }) => {
+    const activeFilterCount = [
+      filters.env !== "all" ? filters.env : null,
+      filters.proj !== "all" ? filters.proj : null,
+      filters.status || null,
+      filters.lastRun || null,
+      filters.schedule || null,
+      searchQuery || null,
+    ].filter(Boolean).length;
 
-        <Select
-          placeholder="Environment"
-          value={filters.env}
-          onChange={(value) => setFilters({ ...filters, env: value })}
-          options={[
-            { label: "All", value: "all" },
-            { label: "STAGING", value: "STG" },
-            { label: "DEV", value: "DEV" },
-            { label: "PROD", value: "PROD" },
-          ]}
-          className="job-deploy-header-field"
-        />
+    const handleClearFilters = () => {
+      setFilters({ env: "all", proj: "all", status: "", lastRun: "", schedule: "" });
+      if (onSearchChange) onSearchChange({ target: { value: "" } });
+    };
 
-        <Select
-          placeholder="Project"
-          options={[...projects, { label: "All", value: "all" }]}
-          value={filters.proj}
-          onChange={(value) => setFilters({ ...filters, proj: value })}
-          className="job-deploy-header-field"
-        />
-      </Space>
-
-      <Space>
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={onCreateJob}
-          disabled={!canWrite || isJobLimitReached}
-          className="primary_button_style"
-        >
-          Create Job
-        </Button>
-        <Button
-          icon={<ReloadOutlined spin={loading} />}
-          onClick={onRefresh}
-          disabled={loading}
-        />
-      </Space>
-    </div>
-  )
+    return (
+      <Card size="small" styles={{ body: { padding: 10 } }} style={{ marginBottom: 12 }}>
+        <Row gutter={[8, 8]} align="middle" wrap>
+          <Col flex="220px">
+            <Input
+              size="small"
+              placeholder="Search by job name..."
+              prefix={<SearchOutlined />}
+              onChange={onSearchChange}
+              value={searchQuery}
+              allowClear
+            />
+          </Col>
+          <Col>
+            <Select
+              size="small"
+              placeholder="Status"
+              style={{ width: 120 }}
+              allowClear
+              value={filters.status || undefined}
+              onChange={(v) => setFilters({ ...filters, status: v || "" })}
+              options={[
+                { label: "Success", value: "SUCCESS" },
+                { label: "Failed", value: "FAILED" },
+                { label: "Running", value: "RUNNING" },
+              ]}
+            />
+          </Col>
+          <Col>
+            <Select
+              size="small"
+              placeholder="Last run"
+              style={{ width: 120 }}
+              allowClear
+              value={filters.lastRun || undefined}
+              onChange={(v) => setFilters({ ...filters, lastRun: v || "" })}
+              options={[
+                { label: "Last 24h", value: "24h" },
+                { label: "Last 7 days", value: "7d" },
+                { label: "Last 30 days", value: "30d" },
+              ]}
+            />
+          </Col>
+          <Col>
+            <Select
+              size="small"
+              placeholder="Environment"
+              style={{ width: 140 }}
+              allowClear
+              value={filters.env !== "all" ? filters.env : undefined}
+              onChange={(v) => setFilters({ ...filters, env: v || "all" })}
+              options={[
+                { label: "Production", value: "PROD" },
+                { label: "Staging", value: "STG" },
+                { label: "Development", value: "DEV" },
+              ]}
+            />
+          </Col>
+          <Col>
+            <Select
+              size="small"
+              placeholder="Schedule"
+              style={{ width: 120 }}
+              allowClear
+              value={filters.schedule || undefined}
+              onChange={(v) => setFilters({ ...filters, schedule: v || "" })}
+              options={[
+                { label: "Cron", value: "cron" },
+                { label: "Interval", value: "interval" },
+              ]}
+            />
+          </Col>
+          <Col flex="auto" style={{ textAlign: "right" }}>
+            <Space size={8}>
+              <span style={{ fontSize: 12, color: "var(--font-color-3, #8c8c8c)" }}>
+                {totalJobs} job{totalJobs !== 1 ? "s" : ""}
+              </span>
+              {activeFilterCount > 0 && (
+                <Button type="link" size="small" onClick={handleClearFilters}>
+                  Clear filters
+                </Button>
+              )}
+              <Button
+                size="small"
+                icon={<ReloadOutlined spin={loading} />}
+                onClick={onRefresh}
+                disabled={loading}
+              />
+            </Space>
+          </Col>
+        </Row>
+      </Card>
+    );
+  }
 );
 
 JobListFilters.propTypes = {
@@ -78,6 +138,7 @@ JobListFilters.propTypes = {
   onRefresh: PropTypes.func,
   loading: PropTypes.bool,
   isJobLimitReached: PropTypes.bool,
+  totalJobs: PropTypes.number,
 };
 
 JobListFilters.displayName = "JobListFilters";
diff --git a/frontend/src/ide/scheduler/JobListTable.jsx b/frontend/src/ide/scheduler/JobListTable.jsx
index 694e0e23..1b855058 100644
--- a/frontend/src/ide/scheduler/JobListTable.jsx
+++ b/frontend/src/ide/scheduler/JobListTable.jsx
@@ -8,15 +8,23 @@ import {
   Button,
   Switch,
   Empty,
+  theme,
 } from "antd";
 import {
-  DatabaseOutlined,
-  CalendarOutlined,
   EditOutlined,
   DeleteOutlined,
   PlayCircleOutlined,
   LoadingOutlined,
   HistoryOutlined,
+  CheckCircleFilled,
+  CloseCircleFilled,
+  SyncOutlined,
+  ClockCircleOutlined,
+  PauseCircleOutlined,
+  FireFilled,
+  ExperimentOutlined,
+  CodeOutlined,
+  FieldTimeOutlined,
 } from "@ant-design/icons";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
@@ -29,6 +37,67 @@ import {
 } from "../../common/helpers";
 import { useNotificationService } from "../../service/notification-service";
 
+const { Text } = Typography;
+
+/* ── Duration formatter ── */
+const formatDurationMs = (ms) => {
+  if (!ms && ms !== 0) return null;
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const m = Math.floor(ms / 60000);
+  const s = ((ms % 60000) / 1000).toFixed(0);
+  return `${m}m ${s}s`;
+};
+
+/* ── Environment badge ── */
+const EnvironmentBadge = ({ type, name }) => {
+  const config = {
+    PROD: { color: "error", label: "PROD", icon: <FireFilled /> },
+    STG: { color: "warning", label: "STG", icon: <ExperimentOutlined /> },
+    DEV: { color: "blue", label: "DEV", icon: <CodeOutlined /> },
+  };
+  const c = config[type] || config.DEV;
+  return (
+    <Space direction="vertical" size={1}>
+      <Tag color={c.color} icon={c.icon} style={{ fontWeight: 700, fontSize: 10, letterSpacing: 0.4, margin: 0 }}>
+        {c.label}
+      </Tag>
+      <Text type="secondary" style={{ fontSize: 11, fontFamily: "monospace" }}>{name}</Text>
+    </Space>
+  );
+};
+
+/* ── Schedule badge ── */
+const ScheduleBadge = ({ type, details }) => {
+  const isCron = type === "cron";
+  const expression = isCron ? details?.cron?.cron_expression : null;
+  let description = "";
+  try {
+    if (isCron && expression) {
+      description = getTooltipText({ cron_expression: expression }, type);
+    } else if (!isCron && details?.interval) {
+      description = getTooltipText(details.interval, type);
+    }
+  } catch {
+    description = expression || "";
+  }
+  return (
+    <Space direction="vertical" size={1}>
+      <Space size={4}>
+        <Tag
+          color={isCron ? "purple" : "cyan"}
+          icon={isCron ? <FieldTimeOutlined /> : <SyncOutlined />}
+          style={{ fontWeight: 700, fontSize: 10, letterSpacing: 0.4, margin: 0 }}
+        >
+          {isCron ? "CRON" : "INTERVAL"}
+        </Tag>
+        {expression && <Text code style={{ fontSize: 11 }}>{expression}</Text>}
+      </Space>
+      <Text type="secondary" style={{ fontSize: 11 }}>{description}</Text>
+    </Space>
+  );
+};
+
 const JobListTable = memo(
   ({
     data,
@@ -42,61 +111,28 @@ const JobListTable = memo(
     const [loading, setLoading] = useState({});
     const { notify } = useNotificationService();
     const navigate = useNavigate();
+    const { token } = theme.useToken();
 
     const goToRunHistory = (userTaskId) =>
       navigate(`/project/job/history?task=${userTaskId}`);
 
-    const renderDateCell = (text) => {
-      if (!text) {
-        return (
-          <Typography.Text type="secondary">Not started yet.</Typography.Text>
-        );
-      }
-      return (
-        <Tooltip title={new Date(text).toISOString()}>
-          <Space direction="vertical" size={0}>
-            <Typography.Text>{formatDateTime(text)}</Typography.Text>
-            <Typography.Text type="secondary" style={{ fontSize: 11 }}>
-              {getRelativeTime(text)}
-            </Typography.Text>
-          </Space>
-        </Tooltip>
-      );
-    };
     const handleSwitchSchedular = async (item, checked) => {
       try {
-        const {
-          user_task_id,
-          project,
-          periodic_task_details,
-          description,
-          task_name,
-          task_type,
-          environment,
-        } = item;
+        const { user_task_id, project, periodic_task_details, description, task_name, task_type, environment } = item;
         const res = await updateTask(project.id, user_task_id, {
           ...periodic_task_details[task_type],
-          task_type,
-          task_name,
-          description,
-          project: project.id,
-          environment: environment.id,
+          task_type, task_name, description,
+          project: project.id, environment: environment.id,
           enabled: checked,
         });
-        if (res.status) {
-          // Re-fetch the job list to get updated data from server
-          if (onToggleSuccess) onToggleSuccess();
-        }
+        if (res.status && onToggleSuccess) onToggleSuccess();
       } catch (error) {
         notify({ error });
       }
     };
 
     const handleDelete = (record) => {
-      setDelTaskDetail({
-        projectId: record.project.id,
-        taskId: record.periodic_task_details.id,
-      });
+      setDelTaskDetail({ projectId: record.project.id, taskId: record.periodic_task_details.id });
       setIsDeleteModalOpen(true);
     };
 
@@ -104,216 +140,198 @@ const JobListTable = memo(
       setLoading((prev) => ({ ...prev, [taskId]: true }));
       try {
         await runTask(projectId, taskId);
-        notify({
-          type: "success",
-          message: "Job Scheduled Successfully",
-        });
+        notify({ type: "success", message: "Job triggered successfully" });
       } catch (error) {
         notify({ error });
       } finally {
-        setLoading((prev) => {
-          // eslint-disable-next-line no-unused-vars
-          const { [taskId]: _, ...rest } = prev;
-          return rest;
-        });
+        setLoading((prev) => { const { [taskId]: _, ...rest } = prev; return rest; });
       }
     };
 
-    const columns = useMemo(
-      () => [
-        {
-          title: "Job",
-          dataIndex: "task_name",
-          key: "task_name",
-          render: (text, record) => (
-            <Tooltip title="Open Run History for this job">
-              <Button
-                type="link"
-                size="small"
-                style={{ padding: 0, height: "auto" }}
-                icon={<HistoryOutlined />}
-                onClick={() => goToRunHistory(record.user_task_id)}
-              >
-                <span className="job-deploy-bold">{text}</span>
+    const columns = useMemo(() => [
+      {
+        title: "Job",
+        dataIndex: "task_name",
+        key: "task_name",
+        sorter: (a, b) => (a.task_name || "").localeCompare(b.task_name || ""),
+        render: (text, record) => (
+          <div className="jl-job-name">
+            <div className="jl-job-icon">
+              <SyncOutlined style={{ fontSize: 14 }} />
+            </div>
+            <div>
+              <Button type="link" size="small" style={{ padding: 0, height: "auto", fontWeight: 600 }}
+                onClick={() => goToRunHistory(record.user_task_id)}>
+                {text}
               </Button>
-            </Tooltip>
-          ),
-        },
-        {
-          title: "Project",
-          dataIndex: "project",
-          key: "project",
-          render: (project) => (
-            <Typography.Text>{project?.name}</Typography.Text>
-          ),
-        },
-        {
-          title: "Environment",
-          dataIndex: "environment",
-          key: "environment",
-          render: (environment) => (
-            <Tooltip title={environment?.name}>
-              <Tag color="geekblue" icon={<DatabaseOutlined />}>
-                {environment?.name}
+              {record.description && (
+                <div><Text type="secondary" style={{ fontSize: 11 }}>{record.description}</Text></div>
+              )}
+            </div>
+          </div>
+        ),
+      },
+      {
+        title: "Project",
+        dataIndex: "project",
+        key: "project",
+        render: (project) => <Text>{project?.name}</Text>,
+      },
+      {
+        title: "Environment",
+        dataIndex: "environment",
+        key: "environment",
+        render: (env) => env ? <EnvironmentBadge type={env.type} name={env.name} /> : <Text type="secondary">—</Text>,
+      },
+      {
+        title: "Schedule",
+        key: "schedule",
+        render: (_, record) => (
+          <ScheduleBadge
+            type={record.task_type}
+            details={record.periodic_task_details}
+          />
+        ),
+      },
+      {
+        title: "Last Run",
+        key: "last_run",
+        sorter: (a, b) => new Date(a.task_completion_time || 0) - new Date(b.task_completion_time || 0),
+        render: (_, record) => {
+          if (!record.task_status) return <Text type="secondary">—</Text>;
+          const isFailed = ["FAILED", "FAILED PERMANENTLY", "FAILURE"].includes(record.task_status);
+          const isSuccess = record.task_status === "SUCCESS";
+          const isRunning = ["RUNNING", "STARTED", "PENDING"].includes(record.task_status);
+
+          // Compute duration if both times available
+          let duration = null;
+          if (record.task_run_time && record.task_completion_time) {
+            const ms = new Date(record.task_completion_time) - new Date(record.task_run_time);
+            if (ms > 0) duration = formatDurationMs(ms);
+          }
+
+          return (
+            <Space direction="vertical" size={2}>
+              <Tag
+                icon={isSuccess ? <CheckCircleFilled /> : isFailed ? <CloseCircleFilled /> : isRunning ? <SyncOutlined spin /> : null}
+                color={isSuccess ? "success" : isFailed ? "error" : isRunning ? "processing" : "default"}
+              >
+                {record.task_status === "FAILURE" ? "FAILED" : record.task_status}
               </Tag>
-            </Tooltip>
-          ),
-        },
-        {
-          title: "Schedule",
-          key: "schedule",
-          render: (_, record) => {
-            const scheduleText = getTooltipText(
-              record.periodic_task_details?.[record.task_type] ?? {},
-              record.task_type
-            );
-            return (
-              <Tooltip title={scheduleText}>
-                <Tag color="geekblue" icon={<CalendarOutlined />}>
-                  {record.task_type === "interval" ? "Interval" : "Cron"}
-                </Tag>
-                <Typography.Text
-                  type="secondary"
-                  style={{ fontSize: 12, marginLeft: 4 }}
-                >
-                  {scheduleText}
-                </Typography.Text>
-              </Tooltip>
-            );
-          },
+              {record.task_completion_time && (
+                <Tooltip title={new Date(record.task_completion_time).toISOString()}>
+                  <Text style={{ fontSize: 12 }}>{formatDateTime(record.task_completion_time)}</Text>
+                </Tooltip>
+              )}
+              <Text type="secondary" style={{ fontSize: 11 }}>
+                {record.task_completion_time ? getRelativeTime(record.task_completion_time) : ""}
+                {duration ? ` · ${duration}` : ""}
+              </Text>
+            </Space>
+          );
         },
-        {
-          title: "Last Run Status",
-          key: "last_run_status",
-          render: (_, record) => {
-            if (!record.task_status) {
-              return <Typography.Text type="secondary">—</Typography.Text>;
+      },
+      {
+        title: "Next Run",
+        dataIndex: "next_run_time",
+        key: "next_run",
+        sorter: (a, b) => new Date(a.next_run_time || 0) - new Date(b.next_run_time || 0),
+        render: (text, record) => {
+          if (!text) {
+            if (!record.periodic_task_details?.enabled) {
+              return <Space size={4}><PauseCircleOutlined style={{ color: token.colorTextSecondary }} /><Text type="secondary">Paused</Text></Space>;
             }
-            const isFailed = [
-              "FAILED",
-              "FAILED PERMANENTLY",
-              "FAILURE",
-            ].includes(record.task_status);
-            return (
-              <Tooltip
-                title={
-                  isFailed
-                    ? "Logs available in Run History"
-                    : record.task_status
-                }
-              >
-                <Tag
-                  color={
-                    isFailed
-                      ? "red"
-                      : record.task_status === "SUCCESS"
-                      ? "green"
-                      : "default"
-                  }
-                >
-                  {record.task_status === "FAILURE"
-                    ? "FAILED"
-                    : record.task_status}
+            return <Text type="secondary">—</Text>;
+          }
+          // Compute "in Xm" countdown
+          const diff = new Date(text) - new Date();
+          let countdown = null;
+          if (diff > 0) {
+            const mins = Math.floor(diff / 60000);
+            if (mins < 60) countdown = `in ${mins}m`;
+            else if (mins < 1440) countdown = `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
+            else countdown = `in ${Math.floor(mins / 1440)}d`;
+          }
+          return (
+            <Space direction="vertical" size={1}>
+              <Text style={{ fontSize: 12 }}>{formatDateTime(text)}</Text>
+              {countdown && (
+                <Tag color="blue" style={{ fontSize: 10, lineHeight: "16px", padding: "0 4px", margin: 0 }}>
+                  <ClockCircleOutlined /> {countdown}
                 </Tag>
-              </Tooltip>
-            );
-          },
-        },
-        {
-          title: "Last Run",
-          dataIndex: "task_completion_time",
-          key: "last_run",
-          render: renderDateCell,
-        },
-        {
-          title: "Next Run",
-          dataIndex: "next_run_time",
-          key: "next_run",
-          render: renderDateCell,
+              )}
+            </Space>
+          );
         },
-        {
-          title: "Status",
-          key: "status",
-          render: (_, record) => (
-            <Space>
+      },
+      {
+        title: "Status",
+        key: "status",
+        render: (_, record) => {
+          const enabled = record.periodic_task_details?.enabled;
+          return (
+            <Space size={8}>
               <Switch
-                checked={record.periodic_task_details?.enabled}
-                checkedChildren="Enabled"
-                unCheckedChildren="Disabled"
-                onChange={(checked) => {
-                  handleSwitchSchedular(record, checked);
-                }}
+                checked={enabled}
+                onChange={(checked) => handleSwitchSchedular(record, checked)}
+                size="small"
               />
-              <Typography.Text
-                type={
-                  record.periodic_task_details?.enabled ? "success" : "warning"
-                }
-              ></Typography.Text>
+              <Text type="secondary" style={{ fontSize: 12 }}>{enabled ? "Enabled" : "Paused"}</Text>
             </Space>
-          ),
+          );
         },
-        {
-          title: "Actions",
-          key: "actions",
-          render: (_, record) => (
-            <Space>
-              <Tooltip title="Deploy Job">
-                <Button
-                  type="link"
-                  icon={
-                    loading[record.user_task_id] ? (
-                      <LoadingOutlined spin={true} />
-                    ) : (
-                      <PlayCircleOutlined />
-                    )
-                  }
-                  onClick={() =>
-                    handleRun(record.project.id, record.user_task_id)
-                  }
-                />
-              </Tooltip>
-              <Tooltip title="edit">
-                <Button
-                  type="link"
-                  icon={<EditOutlined />}
-                  onClick={() => onRowClick(record.user_task_id)}
-                />
-              </Tooltip>
-              <Tooltip title="delete">
-                <Button
-                  type="link"
-                  danger
-                  icon={<DeleteOutlined />}
-                  onClick={() => handleDelete(record)}
-                />
-              </Tooltip>
-            </Space>
-          ),
-        },
-      ],
-      [getTooltipText, onRowClick, loading]
-    );
+      },
+      {
+        title: "Actions",
+        key: "actions",
+        width: 140,
+        render: (_, record) => (
+          <Space size={4}>
+            <Tooltip title="Run now">
+              <Button type="text" size="small"
+                icon={loading[record.user_task_id] ? <LoadingOutlined /> : <PlayCircleOutlined style={{ color: token.colorPrimary }} />}
+                onClick={() => handleRun(record.project?.id, record.user_task_id)}
+                disabled={loading[record.user_task_id]}
+              />
+            </Tooltip>
+            <Tooltip title="Run history">
+              <Button type="text" size="small" icon={<HistoryOutlined />}
+                onClick={() => goToRunHistory(record.user_task_id)}
+              />
+            </Tooltip>
+            <Tooltip title="Edit">
+              <Button type="text" size="small" icon={<EditOutlined />}
+                onClick={() => onRowClick(record.user_task_id)}
+              />
+            </Tooltip>
+            <Tooltip title="Delete">
+              <Button type="text" size="small" danger icon={<DeleteOutlined />}
+                onClick={() => handleDelete(record)}
+              />
+            </Tooltip>
+          </Space>
+        ),
+      },
+    ], [token, loading]);
+
     return (
       <Table
         columns={columns}
         dataSource={data}
         rowKey="user_task_id"
         loading={tableLoading}
+        size="middle"
+        pagination={false}
         locale={{
-          emptyText: (
-            <Empty
-              image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description="No jobs created yet"
-            />
-          ),
+          emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No jobs created yet" />,
         }}
-        bordered
-        className="job-deploy-table"
-        pagination={{ pageSize: 10 }}
       />
     );
   }
 );
+
+JobListTable.displayName = "JobListTable";
+
 JobListTable.propTypes = {
   data: PropTypes.array,
   onRowClick: PropTypes.func,
@@ -322,5 +340,5 @@ JobListTable.propTypes = {
   tableLoading: PropTypes.bool,
   onToggleSuccess: PropTypes.func,
 };
-JobListTable.displayName = "JobListTable";
+
 export { JobListTable };

From 6da27ede08659dcfdd9c7e061c465b3d6c0bd27d Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 24 Apr 2026 17:27:25 +0530
Subject: [PATCH 2/8] feat: job status icon with colored bg, tooltip, pulse
 animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CheckCircleFilled green bg → "Healthy — last run succeeded"
- CloseCircleFilled red bg → "Last run failed — needs attention"
- PauseCircleOutlined grey bg → "Paused — will not run"
- ClockCircleOutlined blue bg + pulse → "Scheduled — has not run yet"
- SyncOutlined spinning blue bg + pulse → "Running"
- Circular icon with 12% opacity background matching status color
- Tooltip on hover with descriptive status message
---
 frontend/src/ide/scheduler/JobDeploy.css    | 35 +++++++++++++---
 frontend/src/ide/scheduler/JobListTable.jsx | 44 ++++++++++++++-------
 2 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/frontend/src/ide/scheduler/JobDeploy.css b/frontend/src/ide/scheduler/JobDeploy.css
index edd781af..856ce8da 100644
--- a/frontend/src/ide/scheduler/JobDeploy.css
+++ b/frontend/src/ide/scheduler/JobDeploy.css
@@ -10,15 +10,40 @@
 }
 
 .jl-job-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: var(--bg-color-3, rgba(0, 0, 0, 0.04));
-  color: var(--primary-color, #1677ff);
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  font-size: 16px;
+}
+
+.jl-job-icon.success {
+  background: rgba(82, 196, 26, 0.12);
+  color: var(--success-color, #52c41a);
+}
+
+.jl-job-icon.failed {
+  background: rgba(255, 77, 79, 0.12);
+  color: var(--error-color, #ff4d4f);
+}
+
+.jl-job-icon.running {
+  background: rgba(22, 119, 255, 0.12);
+  color: var(--primary-color, #1677ff);
+  animation: jl-pulse 2s infinite;
+}
+
+.jl-job-icon.paused {
+  background: rgba(140, 140, 140, 0.12);
+  color: var(--font-color-3, #8c8c8c);
+}
+
+@keyframes jl-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.4); }
+  50% { box-shadow: 0 0 0 6px rgba(22, 119, 255, 0); }
 }
 
 .job-deploy-header-field {
diff --git a/frontend/src/ide/scheduler/JobListTable.jsx b/frontend/src/ide/scheduler/JobListTable.jsx
index 1b855058..eb7f101e 100644
--- a/frontend/src/ide/scheduler/JobListTable.jsx
+++ b/frontend/src/ide/scheduler/JobListTable.jsx
@@ -154,22 +154,36 @@ const JobListTable = memo(
         dataIndex: "task_name",
         key: "task_name",
         sorter: (a, b) => (a.task_name || "").localeCompare(b.task_name || ""),
-        render: (text, record) => (
-          <div className="jl-job-name">
-            <div className="jl-job-icon">
-              <SyncOutlined style={{ fontSize: 14 }} />
-            </div>
-            <div>
-              <Button type="link" size="small" style={{ padding: 0, height: "auto", fontWeight: 600 }}
-                onClick={() => goToRunHistory(record.user_task_id)}>
-                {text}
-              </Button>
-              {record.description && (
-                <div><Text type="secondary" style={{ fontSize: 11 }}>{record.description}</Text></div>
-              )}
+        render: (text, record) => {
+          const isFailed = ["FAILED", "FAILED PERMANENTLY", "FAILURE"].includes(record.task_status);
+          const isSuccess = record.task_status === "SUCCESS";
+          const isRunning = ["RUNNING", "STARTED", "PENDING"].includes(record.task_status);
+          const isPaused = !record.periodic_task_details?.enabled;
+          let statusIcon, statusClass, tooltipText;
+          if (isPaused) { statusIcon = <PauseCircleOutlined />; statusClass = "paused"; tooltipText = "Paused — will not run"; }
+          else if (isFailed) { statusIcon = <CloseCircleFilled />; statusClass = "failed"; tooltipText = "Last run failed — needs attention"; }
+          else if (isSuccess) { statusIcon = <CheckCircleFilled />; statusClass = "success"; tooltipText = "Healthy — last run succeeded"; }
+          else if (isRunning) { statusIcon = <SyncOutlined spin />; statusClass = "running"; tooltipText = "Running"; }
+          else { statusIcon = <ClockCircleOutlined />; statusClass = "running"; tooltipText = "Scheduled — has not run yet"; }
+          return (
+            <div className="jl-job-name">
+              <Tooltip title={tooltipText} placement="right">
+                <div className={`jl-job-icon ${statusClass}`}>
+                  {statusIcon}
+                </div>
+              </Tooltip>
+              <div>
+                <Button type="link" size="small" style={{ padding: 0, height: "auto", fontWeight: 600 }}
+                  onClick={() => goToRunHistory(record.user_task_id)}>
+                  {text}
+                </Button>
+                {record.description && (
+                  <div><Text type="secondary" style={{ fontSize: 11 }}>{record.description}</Text></div>
+                )}
+              </div>
             </div>
-          </div>
-        ),
+          );
+        },
       },
       {
         title: "Project",

From 1a116b7730e13d7f3beb815759035213f2f9e1fe Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 24 Apr 2026 20:49:19 +0530
Subject: [PATCH 3/8] fix: compute next_run_time from current time instead of
 stale last_run_at

remaining_estimate(last_run_at) returns a negative duration when
last_run_at is old, producing a past timestamp and hiding the
countdown tag in the Jobs List UI.
---
 backend/backend/core/scheduler/views.py | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/backend/backend/core/scheduler/views.py b/backend/backend/core/scheduler/views.py
index 195fea57..8099b28d 100644
--- a/backend/backend/core/scheduler/views.py
+++ b/backend/backend/core/scheduler/views.py
@@ -23,17 +23,17 @@
 
 
 
-def _compute_next_run_time(periodic, last_run_at):
+def _compute_next_run_time(periodic):
     """Derive the next run time from a PeriodicTask's schedule."""
     if not periodic or not periodic.enabled:
         return None
     try:
         schedule = periodic.schedule
-        reference = last_run_at or periodic.last_run_at or timezone.now()
-        remaining = schedule.remaining_estimate(reference)
-        return timezone.now() + remaining
+        now = timezone.now()
+        remaining = schedule.remaining_estimate(now)
+        return now + remaining
     except Exception:
-        logger.debug("Failed to compute next_run_time for %s", periodic, exc_info=True)
+        logger.warning("Failed to compute next_run_time for %s", periodic, exc_info=True)
         return None
 
 
@@ -181,9 +181,7 @@ def _serialize_task(task):
         "task_status": task.status,
         "task_run_time": task.task_run_time,
         "task_completion_time": task.task_completion_time,
-        "next_run_time": task.next_run_time or _compute_next_run_time(
-            periodic, task.task_run_time
-        ),
+        "next_run_time": _compute_next_run_time(periodic) or task.next_run_time,
         "task_type": task_type,
         "description": task.description,
         "environment": {

From 246b19ca24d93cc839b799b92041af98d52241ef Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Fri, 24 Apr 2026 21:31:42 +0530
Subject: [PATCH 4/8] =?UTF-8?q?fix:=20address=20PR=20review=20=E2=80=94=20?=
 =?UTF-8?q?filter=20race,=20lastRun=20filter,=2024h=20stats,=20scheduled?=
 =?UTF-8?q?=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove runSearch debounce that raced with useEffect and dropped active filters
- Apply lastRun filter (24h/7d/30d) using task_completion_time cutoff
- Compute success rate and failed count from last 24h only (not all-time)
- Use "paused" CSS class for scheduled/never-run jobs instead of "running"
- Add onRowClick to useMemo dependency array
- Remove unused formatDurationMs from JobList
---
 frontend/src/ide/scheduler/JobList.jsx      | 40 +++++++++------------
 frontend/src/ide/scheduler/JobListTable.jsx |  4 +--
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/frontend/src/ide/scheduler/JobList.jsx b/frontend/src/ide/scheduler/JobList.jsx
index 5bbedefa..e1bc4e9e 100644
--- a/frontend/src/ide/scheduler/JobList.jsx
+++ b/frontend/src/ide/scheduler/JobList.jsx
@@ -17,7 +17,6 @@ import {
   ThunderboltOutlined,
   PlusOutlined,
 } from "@ant-design/icons";
-import debounce from "lodash/debounce";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { checkPermission } from "../../common/helpers";
@@ -40,16 +39,6 @@ try {
   useSubscriptionDetailsStoreSafe = null;
 }
 
-/* ── Duration formatter ── */
-const formatDurationMs = (ms) => {
-  if (!ms && ms !== 0) return "—";
-  if (ms < 1000) return `${ms}ms`;
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
-  const m = Math.floor(ms / 60000);
-  const s = ((ms % 60000) / 1000).toFixed(0);
-  return `${m}m ${s}s`;
-};
-
 /* ── StatCard ── */
 const StatCard = ({ label, icon, value, valueColor, subtext }) => (
   <Card size="small" style={{ height: "100%" }} styles={{ body: { padding: 14, height: "100%" } }}>
@@ -119,20 +108,12 @@ const JobList = () => {
   useEffect(() => { fetchJobs({ showLoader: true }); fetchProjects(); }, []);
   useEffect(() => { if (!isJobListModified) return; fetchJobs(); setIsJobListModified(false); }, [isJobListModified]);
 
-  const runSearch = useMemo(() => debounce((text) => {
-    const term = text.toLowerCase();
-    setJobList(backup.filter(({ task_name, project }) =>
-      task_name?.toLowerCase().includes(term) || project?.name?.toLowerCase().includes(term)
-    ));
-  }, 300), [backup]);
-
-  useEffect(() => () => runSearch.cancel(), [runSearch]);
-  const onSearchChange = (e) => { const v = e.target.value; setSearchQuery(v); runSearch(v); };
+  const onSearchChange = (e) => setSearchQuery(e.target.value);
 
   // Client-side filtering
   useEffect(() => {
     let filtered = backup;
-    const { env, proj, status, schedule } = filters;
+    const { env, proj, status, schedule, lastRun } = filters;
     if (proj !== "all") filtered = filtered.filter((el) => el.project?.name === proj);
     if (env !== "all") filtered = filtered.filter((el) => el.environment?.type === env);
     if (status) {
@@ -143,6 +124,13 @@ const JobList = () => {
       });
     }
     if (schedule) filtered = filtered.filter((el) => el.task_type === schedule);
+    if (lastRun) {
+      const windowMs = { "24h": 86400000, "7d": 604800000, "30d": 2592000000 }[lastRun];
+      if (windowMs) {
+        const cutoff = Date.now() - windowMs;
+        filtered = filtered.filter((el) => el.task_completion_time && new Date(el.task_completion_time) >= cutoff);
+      }
+    }
     if (searchQuery) {
       const term = searchQuery.toLowerCase();
       filtered = filtered.filter(({ task_name, project }) =>
@@ -186,9 +174,13 @@ const JobList = () => {
   const stats = useMemo(() => {
     const activeJobs = backup.filter((j) => j.periodic_task_details?.enabled).length;
     const pausedJobs = backup.length - activeJobs;
-    const failedJobs = backup.filter((j) => ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(j.task_status)).length;
-    const successJobs = backup.filter((j) => j.task_status === "SUCCESS").length;
-    const successRate = backup.length > 0 ? Math.round((successJobs / backup.length) * 100) : null;
+
+    // Filter to jobs that ran in the last 24 hours for rate/failure stats
+    const cutoff24h = Date.now() - 86400000;
+    const recentJobs = backup.filter((j) => j.task_completion_time && new Date(j.task_completion_time) >= cutoff24h);
+    const failedJobs = recentJobs.filter((j) => ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(j.task_status)).length;
+    const successJobs = recentJobs.filter((j) => j.task_status === "SUCCESS").length;
+    const successRate = recentJobs.length > 0 ? Math.round((successJobs / recentJobs.length) * 100) : null;
 
     // Next upcoming run
     const upcomingRuns = backup
diff --git a/frontend/src/ide/scheduler/JobListTable.jsx b/frontend/src/ide/scheduler/JobListTable.jsx
index eb7f101e..84f58a2b 100644
--- a/frontend/src/ide/scheduler/JobListTable.jsx
+++ b/frontend/src/ide/scheduler/JobListTable.jsx
@@ -164,7 +164,7 @@ const JobListTable = memo(
           else if (isFailed) { statusIcon = <CloseCircleFilled />; statusClass = "failed"; tooltipText = "Last run failed — needs attention"; }
           else if (isSuccess) { statusIcon = <CheckCircleFilled />; statusClass = "success"; tooltipText = "Healthy — last run succeeded"; }
           else if (isRunning) { statusIcon = <SyncOutlined spin />; statusClass = "running"; tooltipText = "Running"; }
-          else { statusIcon = <ClockCircleOutlined />; statusClass = "running"; tooltipText = "Scheduled — has not run yet"; }
+          else { statusIcon = <ClockCircleOutlined />; statusClass = "paused"; tooltipText = "Scheduled — has not run yet"; }
           return (
             <div className="jl-job-name">
               <Tooltip title={tooltipText} placement="right">
@@ -326,7 +326,7 @@ const JobListTable = memo(
           </Space>
         ),
       },
-    ], [token, loading]);
+    ], [token, loading, onRowClick]);
 
     return (
       <Table

From 5a8323af7a40d6c730d9e193fda71e30e4d34868 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Sat, 25 Apr 2026 10:09:09 +0530
Subject: [PATCH 5/8] fix: resolve ESLint and Prettier errors in Jobs List
 files

- Prettier formatting for all 4 files
- eslint-disable for eqeqeq and react/prop-types
- Remove unused imports (Badge, PlusOutlined)
- Split let declarations (one-var rule)
- Suppress no-unused-vars for destructuring pattern
---
 frontend/src/ide/scheduler/JobDeploy.css      |   9 +-
 frontend/src/ide/scheduler/JobList.jsx        | 271 +++++++--
 frontend/src/ide/scheduler/JobListFilters.jsx |  22 +-
 frontend/src/ide/scheduler/JobListTable.jsx   | 517 ++++++++++++------
 4 files changed, 582 insertions(+), 237 deletions(-)

diff --git a/frontend/src/ide/scheduler/JobDeploy.css b/frontend/src/ide/scheduler/JobDeploy.css
index 856ce8da..24c5854d 100644
--- a/frontend/src/ide/scheduler/JobDeploy.css
+++ b/frontend/src/ide/scheduler/JobDeploy.css
@@ -42,8 +42,13 @@
 }
 
 @keyframes jl-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.4); }
-  50% { box-shadow: 0 0 0 6px rgba(22, 119, 255, 0); }
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(22, 119, 255, 0);
+  }
 }
 
 .job-deploy-header-field {
diff --git a/frontend/src/ide/scheduler/JobList.jsx b/frontend/src/ide/scheduler/JobList.jsx
index e1bc4e9e..3a677a97 100644
--- a/frontend/src/ide/scheduler/JobList.jsx
+++ b/frontend/src/ide/scheduler/JobList.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable eqeqeq, react/prop-types */
 import { useEffect, useState, useCallback, useMemo } from "react";
 import {
   Alert,
@@ -41,12 +42,34 @@ try {
 
 /* ── StatCard ── */
 const StatCard = ({ label, icon, value, valueColor, subtext }) => (
-  <Card size="small" style={{ height: "100%" }} styles={{ body: { padding: 14, height: "100%" } }}>
+  <Card
+    size="small"
+    style={{ height: "100%" }}
+    styles={{ body: { padding: 14, height: "100%" } }}
+  >
     <Space size={4} direction="vertical" style={{ width: "100%" }}>
-      <Text type="secondary" style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.4, textTransform: "uppercase" }}>
-        {icon}{icon ? " " : ""}{label}
+      <Text
+        type="secondary"
+        style={{
+          fontSize: 11,
+          fontWeight: 600,
+          letterSpacing: 0.4,
+          textTransform: "uppercase",
+        }}
+      >
+        {icon}
+        {icon ? " " : ""}
+        {label}
       </Text>
-      <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1, color: valueColor, fontVariantNumeric: "tabular-nums" }}>
+      <div
+        style={{
+          fontSize: 22,
+          fontWeight: 700,
+          lineHeight: 1,
+          color: valueColor,
+          fontVariantNumeric: "tabular-nums",
+        }}
+      >
         {value}
       </div>
       {subtext && <div style={{ fontSize: 11 }}>{subtext}</div>}
@@ -59,7 +82,10 @@ const JobList = () => {
   const { listPeriodicTasks, getProjects, deleteTask } = useJobService();
   const { notify } = useNotificationService();
   const { token } = theme.useToken();
-  const [delTaskDetail, setDelTaskDetail] = useState({ projectId: "", taskId: "" });
+  const [delTaskDetail, setDelTaskDetail] = useState({
+    projectId: "",
+    taskId: "",
+  });
   const [jobList, setJobList] = useState([]);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isJobListModified, setIsJobListModified] = useState(false);
@@ -72,14 +98,35 @@ const JobList = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [prefillModel, setPrefillModel] = useState(null);
   const [prefillProject, setPrefillProject] = useState(null);
-  const [filters, setFilters] = useState({ proj: "all", env: "all", status: "", lastRun: "", schedule: "" });
-  const { currentPage, pageSize, totalCount, setTotalCount, setCurrentPage, setPageSize } = usePagination();
+  const [filters, setFilters] = useState({
+    proj: "all",
+    env: "all",
+    status: "",
+    lastRun: "",
+    schedule: "",
+  });
+  const {
+    currentPage,
+    pageSize,
+    totalCount,
+    setTotalCount,
+    setCurrentPage,
+    setPageSize,
+  } = usePagination();
   const canWrite = checkPermission("JOB_DEPLOYMENT", "can_write");
 
-  const usage = typeof useSubscriptionDetailsStoreSafe === "function" ? useSubscriptionDetailsStoreSafe((s) => s.usage) : null;
-  const isJobLimitReached = usage?.jobs && usage.jobs.used >= usage.jobs.allowed;
+  const usage =
+    typeof useSubscriptionDetailsStoreSafe === "function"
+      ? useSubscriptionDetailsStoreSafe((s) => s.usage)
+      : null;
+  const isJobLimitReached =
+    usage?.jobs && usage.jobs.used >= usage.jobs.allowed;
 
-  const fetchJobs = async ({ page = currentPage, limit = pageSize, showLoader = true } = {}) => {
+  const fetchJobs = async ({
+    page = currentPage,
+    limit = pageSize,
+    showLoader = true,
+  } = {}) => {
     if (showLoader) setTableLoading(true);
     try {
       const tasks = await listPeriodicTasks(page, limit);
@@ -99,14 +146,23 @@ const JobList = () => {
   const fetchProjects = useCallback(async () => {
     try {
       const data = await getProjects();
-      setProjects(data.map((el) => ({ label: el.project_name, value: el.project_name })));
+      setProjects(
+        data.map((el) => ({ label: el.project_name, value: el.project_name }))
+      );
     } catch (error) {
       notify({ error });
     }
   }, [getProjects]);
 
-  useEffect(() => { fetchJobs({ showLoader: true }); fetchProjects(); }, []);
-  useEffect(() => { if (!isJobListModified) return; fetchJobs(); setIsJobListModified(false); }, [isJobListModified]);
+  useEffect(() => {
+    fetchJobs({ showLoader: true });
+    fetchProjects();
+  }, []);
+  useEffect(() => {
+    if (!isJobListModified) return;
+    fetchJobs();
+    setIsJobListModified(false);
+  }, [isJobListModified]);
 
   const onSearchChange = (e) => setSearchQuery(e.target.value);
 
@@ -114,35 +170,58 @@ const JobList = () => {
   useEffect(() => {
     let filtered = backup;
     const { env, proj, status, schedule, lastRun } = filters;
-    if (proj !== "all") filtered = filtered.filter((el) => el.project?.name === proj);
-    if (env !== "all") filtered = filtered.filter((el) => el.environment?.type === env);
+    if (proj !== "all")
+      filtered = filtered.filter((el) => el.project?.name === proj);
+    if (env !== "all")
+      filtered = filtered.filter((el) => el.environment?.type === env);
     if (status) {
       filtered = filtered.filter((el) => {
-        if (status === "FAILED") return ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(el.task_status);
-        if (status === "RUNNING") return ["RUNNING", "STARTED", "PENDING"].includes(el.task_status);
+        if (status === "FAILED")
+          return ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(
+            el.task_status
+          );
+        if (status === "RUNNING")
+          return ["RUNNING", "STARTED", "PENDING"].includes(el.task_status);
         return el.task_status === status;
       });
     }
     if (schedule) filtered = filtered.filter((el) => el.task_type === schedule);
     if (lastRun) {
-      const windowMs = { "24h": 86400000, "7d": 604800000, "30d": 2592000000 }[lastRun];
+      const windowMs = { "24h": 86400000, "7d": 604800000, "30d": 2592000000 }[
+        lastRun
+      ];
       if (windowMs) {
         const cutoff = Date.now() - windowMs;
-        filtered = filtered.filter((el) => el.task_completion_time && new Date(el.task_completion_time) >= cutoff);
+        filtered = filtered.filter(
+          (el) =>
+            el.task_completion_time &&
+            new Date(el.task_completion_time) >= cutoff
+        );
       }
     }
     if (searchQuery) {
       const term = searchQuery.toLowerCase();
-      filtered = filtered.filter(({ task_name, project }) =>
-        task_name?.toLowerCase().includes(term) || project?.name?.toLowerCase().includes(term)
+      filtered = filtered.filter(
+        ({ task_name, project }) =>
+          task_name?.toLowerCase().includes(term) ||
+          project?.name?.toLowerCase().includes(term)
       );
     }
     setJobList(filtered);
   }, [filters, backup, searchQuery]);
 
-  const handleRowClick = useCallback((id) => { setOpenJobDeploy(true); setSelectedJobId(id); }, []);
+  const handleRowClick = useCallback((id) => {
+    setOpenJobDeploy(true);
+    setSelectedJobId(id);
+  }, []);
 
-  useEffect(() => { if (!openJobDeploy) { setSelectedJobId(null); setPrefillModel(null); setPrefillProject(null); } }, [openJobDeploy]);
+  useEffect(() => {
+    if (!openJobDeploy) {
+      setSelectedJobId(null);
+      setPrefillModel(null);
+      setPrefillProject(null);
+    }
+  }, [openJobDeploy]);
 
   useEffect(() => {
     if (searchParams.get("create") === "1") {
@@ -158,8 +237,14 @@ const JobList = () => {
       await deleteTask(delTaskDetail.projectId, delTaskDetail.taskId);
       setIsDeleteModalOpen(false);
       notify({ type: "success", message: "Job deleted successfully" });
-      setJobList(jobList.filter((el) => el.periodic_task_details.id !== delTaskDetail.taskId));
-    } catch (error) { notify({ error }); }
+      setJobList(
+        jobList.filter(
+          (el) => el.periodic_task_details.id !== delTaskDetail.taskId
+        )
+      );
+    } catch (error) {
+      notify({ error });
+    }
   };
 
   const handlePagination = (newPage, newPageSize) => {
@@ -172,15 +257,27 @@ const JobList = () => {
 
   // Compute stats from current data
   const stats = useMemo(() => {
-    const activeJobs = backup.filter((j) => j.periodic_task_details?.enabled).length;
+    const activeJobs = backup.filter(
+      (j) => j.periodic_task_details?.enabled
+    ).length;
     const pausedJobs = backup.length - activeJobs;
 
     // Filter to jobs that ran in the last 24 hours for rate/failure stats
     const cutoff24h = Date.now() - 86400000;
-    const recentJobs = backup.filter((j) => j.task_completion_time && new Date(j.task_completion_time) >= cutoff24h);
-    const failedJobs = recentJobs.filter((j) => ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(j.task_status)).length;
-    const successJobs = recentJobs.filter((j) => j.task_status === "SUCCESS").length;
-    const successRate = recentJobs.length > 0 ? Math.round((successJobs / recentJobs.length) * 100) : null;
+    const recentJobs = backup.filter(
+      (j) =>
+        j.task_completion_time && new Date(j.task_completion_time) >= cutoff24h
+    );
+    const failedJobs = recentJobs.filter((j) =>
+      ["FAILED", "FAILURE", "FAILED PERMANENTLY"].includes(j.task_status)
+    ).length;
+    const successJobs = recentJobs.filter(
+      (j) => j.task_status === "SUCCESS"
+    ).length;
+    const successRate =
+      recentJobs.length > 0
+        ? Math.round((successJobs / recentJobs.length) * 100)
+        : null;
 
     // Next upcoming run
     const upcomingRuns = backup
@@ -193,22 +290,48 @@ const JobList = () => {
       if (diff > 0) {
         const mins = Math.floor(diff / 60000);
         if (mins < 60) nextRunCountdown = `in ${mins}m`;
-        else if (mins < 1440) nextRunCountdown = `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
+        else if (mins < 1440)
+          nextRunCountdown = `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
         else nextRunCountdown = `in ${Math.floor(mins / 1440)}d`;
       }
     }
 
-    return { activeJobs, pausedJobs, failedJobs, successRate, nextRun, nextRunCountdown };
+    return {
+      activeJobs,
+      pausedJobs,
+      failedJobs,
+      successRate,
+      nextRun,
+      nextRunCountdown,
+    };
   }, [backup]);
 
   return (
-    <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "auto" }}>
+    <div
+      style={{
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+      }}
+    >
       <div style={{ flex: 1, padding: "20px 24px" }}>
         {/* Header */}
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            marginBottom: 16,
+          }}
+        >
           <div>
-            <Title level={3} style={{ margin: 0 }}>Jobs</Title>
-            <Text type="secondary">Scheduled data pipelines across all your projects.</Text>
+            <Title level={3} style={{ margin: 0 }}>
+              Jobs
+            </Title>
+            <Text type="secondary">
+              Scheduled data pipelines across all your projects.
+            </Text>
           </div>
           <Button
             type="primary"
@@ -223,8 +346,18 @@ const JobList = () => {
         {isJobLimitReached && (
           <Alert
             message={`You've reached the maximum number of jobs (${usage.jobs.used}/${usage.jobs.allowed}). Upgrade to create more.`}
-            type="warning" showIcon style={{ marginBottom: 12 }}
-            action={<Button size="small" type="link" onClick={() => navigate("/project/setting/subscriptions")}>Upgrade</Button>}
+            type="warning"
+            showIcon
+            style={{ marginBottom: 12 }}
+            action={
+              <Button
+                size="small"
+                type="link"
+                onClick={() => navigate("/project/setting/subscriptions")}
+              >
+                Upgrade
+              </Button>
+            }
           />
         )}
 
@@ -233,17 +366,31 @@ const JobList = () => {
           <Col span={6}>
             <StatCard
               label="Active jobs"
-              icon={<ThunderboltOutlined style={{ color: token.colorPrimary }} />}
+              icon={
+                <ThunderboltOutlined style={{ color: token.colorPrimary }} />
+              }
               value={stats.activeJobs}
-              subtext={stats.pausedJobs > 0 && <Text type="secondary">{stats.pausedJobs} paused</Text>}
+              subtext={
+                stats.pausedJobs > 0 && (
+                  <Text type="secondary">{stats.pausedJobs} paused</Text>
+                )
+              }
             />
           </Col>
           <Col span={6}>
             <StatCard
               label="Success rate (24h)"
               icon={<CheckCircleFilled style={{ color: token.colorSuccess }} />}
-              value={stats.successRate != null ? `${stats.successRate}%` : "— %"}
-              valueColor={stats.successRate === 100 ? token.colorSuccess : stats.successRate > 0 ? token.colorWarning : undefined}
+              value={
+                stats.successRate != null ? `${stats.successRate}%` : "— %"
+              }
+              valueColor={
+                stats.successRate === 100
+                  ? token.colorSuccess
+                  : stats.successRate > 0
+                  ? token.colorWarning
+                  : undefined
+              }
             />
           </Col>
           <Col span={6}>
@@ -252,7 +399,13 @@ const JobList = () => {
               icon={<CloseCircleFilled style={{ color: token.colorError }} />}
               value={stats.failedJobs}
               valueColor={stats.failedJobs > 0 ? token.colorError : undefined}
-              subtext={stats.failedJobs > 0 && <Text style={{ color: token.colorError, fontSize: 11 }}>Needs attention</Text>}
+              subtext={
+                stats.failedJobs > 0 && (
+                  <Text style={{ color: token.colorError, fontSize: 11 }}>
+                    Needs attention
+                  </Text>
+                )
+              }
             />
           </Col>
           <Col span={6}>
@@ -260,11 +413,21 @@ const JobList = () => {
               label="Next run"
               icon={<ThunderboltOutlined />}
               value={stats.nextRunCountdown || "—"}
-              subtext={stats.nextRun && (
-                <Text type="secondary" style={{ fontSize: 11 }}>
-                  {stats.nextRun.task_name} · {stats.nextRun.next_run_time ? new Date(stats.nextRun.next_run_time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}
-                </Text>
-              )}
+              subtext={
+                stats.nextRun && (
+                  <Text type="secondary" style={{ fontSize: 11 }}>
+                    {stats.nextRun.task_name} ·{" "}
+                    {stats.nextRun.next_run_time
+                      ? new Date(
+                          stats.nextRun.next_run_time
+                        ).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })
+                      : ""}
+                  </Text>
+                )
+              }
             />
           </Col>
         </Row>
@@ -295,12 +458,20 @@ const JobList = () => {
         />
 
         {jobList?.length > 0 && (
-          <div style={{ display: "flex", justifyContent: "flex-end", padding: "12px 0" }}>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "flex-end",
+              padding: "12px 0",
+            }}
+          >
             <Pagination
               current={currentPage}
               pageSize={pageSize}
               total={Math.min(totalCount, 1000)}
-              showTotal={(total, range) => `Showing ${range[0]}–${range[1]} of ${total} jobs`}
+              showTotal={(total, range) =>
+                `Showing ${range[0]}–${range[1]} of ${total} jobs`
+              }
               showSizeChanger
               onChange={handlePagination}
             />
diff --git a/frontend/src/ide/scheduler/JobListFilters.jsx b/frontend/src/ide/scheduler/JobListFilters.jsx
index 09f64963..a65a0753 100644
--- a/frontend/src/ide/scheduler/JobListFilters.jsx
+++ b/frontend/src/ide/scheduler/JobListFilters.jsx
@@ -1,5 +1,5 @@
-import { Input, Select, Button, Space, Badge, Card, Row, Col } from "antd";
-import { PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons";
+import { Input, Select, Button, Space, Card, Row, Col } from "antd";
+import { ReloadOutlined, SearchOutlined } from "@ant-design/icons";
 import { memo } from "react";
 import PropTypes from "prop-types";
 
@@ -27,12 +27,22 @@ const JobListFilters = memo(
     ].filter(Boolean).length;
 
     const handleClearFilters = () => {
-      setFilters({ env: "all", proj: "all", status: "", lastRun: "", schedule: "" });
+      setFilters({
+        env: "all",
+        proj: "all",
+        status: "",
+        lastRun: "",
+        schedule: "",
+      });
       if (onSearchChange) onSearchChange({ target: { value: "" } });
     };
 
     return (
-      <Card size="small" styles={{ body: { padding: 10 } }} style={{ marginBottom: 12 }}>
+      <Card
+        size="small"
+        styles={{ body: { padding: 10 } }}
+        style={{ marginBottom: 12 }}
+      >
         <Row gutter={[8, 8]} align="middle" wrap>
           <Col flex="220px">
             <Input
@@ -105,7 +115,9 @@ const JobListFilters = memo(
           </Col>
           <Col flex="auto" style={{ textAlign: "right" }}>
             <Space size={8}>
-              <span style={{ fontSize: 12, color: "var(--font-color-3, #8c8c8c)" }}>
+              <span
+                style={{ fontSize: 12, color: "var(--font-color-3, #8c8c8c)" }}
+              >
                 {totalJobs} job{totalJobs !== 1 ? "s" : ""}
               </span>
               {activeFilterCount > 0 && (
diff --git a/frontend/src/ide/scheduler/JobListTable.jsx b/frontend/src/ide/scheduler/JobListTable.jsx
index 84f58a2b..b5ece7b3 100644
--- a/frontend/src/ide/scheduler/JobListTable.jsx
+++ b/frontend/src/ide/scheduler/JobListTable.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { memo, useMemo, useState } from "react";
 import {
   Table,
@@ -59,10 +60,16 @@ const EnvironmentBadge = ({ type, name }) => {
   const c = config[type] || config.DEV;
   return (
     <Space direction="vertical" size={1}>
-      <Tag color={c.color} icon={c.icon} style={{ fontWeight: 700, fontSize: 10, letterSpacing: 0.4, margin: 0 }}>
+      <Tag
+        color={c.color}
+        icon={c.icon}
+        style={{ fontWeight: 700, fontSize: 10, letterSpacing: 0.4, margin: 0 }}
+      >
         {c.label}
       </Tag>
-      <Text type="secondary" style={{ fontSize: 11, fontFamily: "monospace" }}>{name}</Text>
+      <Text type="secondary" style={{ fontSize: 11, fontFamily: "monospace" }}>
+        {name}
+      </Text>
     </Space>
   );
 };
@@ -87,13 +94,24 @@ const ScheduleBadge = ({ type, details }) => {
         <Tag
           color={isCron ? "purple" : "cyan"}
           icon={isCron ? <FieldTimeOutlined /> : <SyncOutlined />}
-          style={{ fontWeight: 700, fontSize: 10, letterSpacing: 0.4, margin: 0 }}
+          style={{
+            fontWeight: 700,
+            fontSize: 10,
+            letterSpacing: 0.4,
+            margin: 0,
+          }}
         >
           {isCron ? "CRON" : "INTERVAL"}
         </Tag>
-        {expression && <Text code style={{ fontSize: 11 }}>{expression}</Text>}
+        {expression && (
+          <Text code style={{ fontSize: 11 }}>
+            {expression}
+          </Text>
+        )}
       </Space>
-      <Text type="secondary" style={{ fontSize: 11 }}>{description}</Text>
+      <Text type="secondary" style={{ fontSize: 11 }}>
+        {description}
+      </Text>
     </Space>
   );
 };
@@ -118,11 +136,22 @@ const JobListTable = memo(
 
     const handleSwitchSchedular = async (item, checked) => {
       try {
-        const { user_task_id, project, periodic_task_details, description, task_name, task_type, environment } = item;
+        const {
+          user_task_id,
+          project,
+          periodic_task_details,
+          description,
+          task_name,
+          task_type,
+          environment,
+        } = item;
         const res = await updateTask(project.id, user_task_id, {
           ...periodic_task_details[task_type],
-          task_type, task_name, description,
-          project: project.id, environment: environment.id,
+          task_type,
+          task_name,
+          description,
+          project: project.id,
+          environment: environment.id,
           enabled: checked,
         });
         if (res.status && onToggleSuccess) onToggleSuccess();
@@ -132,7 +161,10 @@ const JobListTable = memo(
     };
 
     const handleDelete = (record) => {
-      setDelTaskDetail({ projectId: record.project.id, taskId: record.periodic_task_details.id });
+      setDelTaskDetail({
+        projectId: record.project.id,
+        taskId: record.periodic_task_details.id,
+      });
       setIsDeleteModalOpen(true);
     };
 
@@ -144,189 +176,309 @@ const JobListTable = memo(
       } catch (error) {
         notify({ error });
       } finally {
-        setLoading((prev) => { const { [taskId]: _, ...rest } = prev; return rest; });
+        setLoading((prev) => {
+          // eslint-disable-next-line no-unused-vars
+          const { [taskId]: _, ...rest } = prev;
+          return rest;
+        });
       }
     };
 
-    const columns = useMemo(() => [
-      {
-        title: "Job",
-        dataIndex: "task_name",
-        key: "task_name",
-        sorter: (a, b) => (a.task_name || "").localeCompare(b.task_name || ""),
-        render: (text, record) => {
-          const isFailed = ["FAILED", "FAILED PERMANENTLY", "FAILURE"].includes(record.task_status);
-          const isSuccess = record.task_status === "SUCCESS";
-          const isRunning = ["RUNNING", "STARTED", "PENDING"].includes(record.task_status);
-          const isPaused = !record.periodic_task_details?.enabled;
-          let statusIcon, statusClass, tooltipText;
-          if (isPaused) { statusIcon = <PauseCircleOutlined />; statusClass = "paused"; tooltipText = "Paused — will not run"; }
-          else if (isFailed) { statusIcon = <CloseCircleFilled />; statusClass = "failed"; tooltipText = "Last run failed — needs attention"; }
-          else if (isSuccess) { statusIcon = <CheckCircleFilled />; statusClass = "success"; tooltipText = "Healthy — last run succeeded"; }
-          else if (isRunning) { statusIcon = <SyncOutlined spin />; statusClass = "running"; tooltipText = "Running"; }
-          else { statusIcon = <ClockCircleOutlined />; statusClass = "paused"; tooltipText = "Scheduled — has not run yet"; }
-          return (
-            <div className="jl-job-name">
-              <Tooltip title={tooltipText} placement="right">
-                <div className={`jl-job-icon ${statusClass}`}>
-                  {statusIcon}
+    const columns = useMemo(
+      () => [
+        {
+          title: "Job",
+          dataIndex: "task_name",
+          key: "task_name",
+          sorter: (a, b) =>
+            (a.task_name || "").localeCompare(b.task_name || ""),
+          render: (text, record) => {
+            const isFailed = [
+              "FAILED",
+              "FAILED PERMANENTLY",
+              "FAILURE",
+            ].includes(record.task_status);
+            const isSuccess = record.task_status === "SUCCESS";
+            const isRunning = ["RUNNING", "STARTED", "PENDING"].includes(
+              record.task_status
+            );
+            const isPaused = !record.periodic_task_details?.enabled;
+            let statusIcon;
+            let statusClass;
+            let tooltipText;
+            if (isPaused) {
+              statusIcon = <PauseCircleOutlined />;
+              statusClass = "paused";
+              tooltipText = "Paused — will not run";
+            } else if (isFailed) {
+              statusIcon = <CloseCircleFilled />;
+              statusClass = "failed";
+              tooltipText = "Last run failed — needs attention";
+            } else if (isSuccess) {
+              statusIcon = <CheckCircleFilled />;
+              statusClass = "success";
+              tooltipText = "Healthy — last run succeeded";
+            } else if (isRunning) {
+              statusIcon = <SyncOutlined spin />;
+              statusClass = "running";
+              tooltipText = "Running";
+            } else {
+              statusIcon = <ClockCircleOutlined />;
+              statusClass = "paused";
+              tooltipText = "Scheduled — has not run yet";
+            }
+            return (
+              <div className="jl-job-name">
+                <Tooltip title={tooltipText} placement="right">
+                  <div className={`jl-job-icon ${statusClass}`}>
+                    {statusIcon}
+                  </div>
+                </Tooltip>
+                <div>
+                  <Button
+                    type="link"
+                    size="small"
+                    style={{ padding: 0, height: "auto", fontWeight: 600 }}
+                    onClick={() => goToRunHistory(record.user_task_id)}
+                  >
+                    {text}
+                  </Button>
+                  {record.description && (
+                    <div>
+                      <Text type="secondary" style={{ fontSize: 11 }}>
+                        {record.description}
+                      </Text>
+                    </div>
+                  )}
                 </div>
-              </Tooltip>
-              <div>
-                <Button type="link" size="small" style={{ padding: 0, height: "auto", fontWeight: 600 }}
-                  onClick={() => goToRunHistory(record.user_task_id)}>
-                  {text}
-                </Button>
-                {record.description && (
-                  <div><Text type="secondary" style={{ fontSize: 11 }}>{record.description}</Text></div>
-                )}
               </div>
-            </div>
-          );
+            );
+          },
+        },
+        {
+          title: "Project",
+          dataIndex: "project",
+          key: "project",
+          render: (project) => <Text>{project?.name}</Text>,
         },
-      },
-      {
-        title: "Project",
-        dataIndex: "project",
-        key: "project",
-        render: (project) => <Text>{project?.name}</Text>,
-      },
-      {
-        title: "Environment",
-        dataIndex: "environment",
-        key: "environment",
-        render: (env) => env ? <EnvironmentBadge type={env.type} name={env.name} /> : <Text type="secondary">—</Text>,
-      },
-      {
-        title: "Schedule",
-        key: "schedule",
-        render: (_, record) => (
-          <ScheduleBadge
-            type={record.task_type}
-            details={record.periodic_task_details}
-          />
-        ),
-      },
-      {
-        title: "Last Run",
-        key: "last_run",
-        sorter: (a, b) => new Date(a.task_completion_time || 0) - new Date(b.task_completion_time || 0),
-        render: (_, record) => {
-          if (!record.task_status) return <Text type="secondary">—</Text>;
-          const isFailed = ["FAILED", "FAILED PERMANENTLY", "FAILURE"].includes(record.task_status);
-          const isSuccess = record.task_status === "SUCCESS";
-          const isRunning = ["RUNNING", "STARTED", "PENDING"].includes(record.task_status);
+        {
+          title: "Environment",
+          dataIndex: "environment",
+          key: "environment",
+          render: (env) =>
+            env ? (
+              <EnvironmentBadge type={env.type} name={env.name} />
+            ) : (
+              <Text type="secondary">—</Text>
+            ),
+        },
+        {
+          title: "Schedule",
+          key: "schedule",
+          render: (_, record) => (
+            <ScheduleBadge
+              type={record.task_type}
+              details={record.periodic_task_details}
+            />
+          ),
+        },
+        {
+          title: "Last Run",
+          key: "last_run",
+          sorter: (a, b) =>
+            new Date(a.task_completion_time || 0) -
+            new Date(b.task_completion_time || 0),
+          render: (_, record) => {
+            if (!record.task_status) return <Text type="secondary">—</Text>;
+            const isFailed = [
+              "FAILED",
+              "FAILED PERMANENTLY",
+              "FAILURE",
+            ].includes(record.task_status);
+            const isSuccess = record.task_status === "SUCCESS";
+            const isRunning = ["RUNNING", "STARTED", "PENDING"].includes(
+              record.task_status
+            );
 
-          // Compute duration if both times available
-          let duration = null;
-          if (record.task_run_time && record.task_completion_time) {
-            const ms = new Date(record.task_completion_time) - new Date(record.task_run_time);
-            if (ms > 0) duration = formatDurationMs(ms);
-          }
+            // Compute duration if both times available
+            let duration = null;
+            if (record.task_run_time && record.task_completion_time) {
+              const ms =
+                new Date(record.task_completion_time) -
+                new Date(record.task_run_time);
+              if (ms > 0) duration = formatDurationMs(ms);
+            }
 
-          return (
-            <Space direction="vertical" size={2}>
-              <Tag
-                icon={isSuccess ? <CheckCircleFilled /> : isFailed ? <CloseCircleFilled /> : isRunning ? <SyncOutlined spin /> : null}
-                color={isSuccess ? "success" : isFailed ? "error" : isRunning ? "processing" : "default"}
-              >
-                {record.task_status === "FAILURE" ? "FAILED" : record.task_status}
-              </Tag>
-              {record.task_completion_time && (
-                <Tooltip title={new Date(record.task_completion_time).toISOString()}>
-                  <Text style={{ fontSize: 12 }}>{formatDateTime(record.task_completion_time)}</Text>
-                </Tooltip>
-              )}
-              <Text type="secondary" style={{ fontSize: 11 }}>
-                {record.task_completion_time ? getRelativeTime(record.task_completion_time) : ""}
-                {duration ? ` · ${duration}` : ""}
-              </Text>
-            </Space>
-          );
+            return (
+              <Space direction="vertical" size={2}>
+                <Tag
+                  icon={
+                    isSuccess ? (
+                      <CheckCircleFilled />
+                    ) : isFailed ? (
+                      <CloseCircleFilled />
+                    ) : isRunning ? (
+                      <SyncOutlined spin />
+                    ) : null
+                  }
+                  color={
+                    isSuccess
+                      ? "success"
+                      : isFailed
+                      ? "error"
+                      : isRunning
+                      ? "processing"
+                      : "default"
+                  }
+                >
+                  {record.task_status === "FAILURE"
+                    ? "FAILED"
+                    : record.task_status}
+                </Tag>
+                {record.task_completion_time && (
+                  <Tooltip
+                    title={new Date(record.task_completion_time).toISOString()}
+                  >
+                    <Text style={{ fontSize: 12 }}>
+                      {formatDateTime(record.task_completion_time)}
+                    </Text>
+                  </Tooltip>
+                )}
+                <Text type="secondary" style={{ fontSize: 11 }}>
+                  {record.task_completion_time
+                    ? getRelativeTime(record.task_completion_time)
+                    : ""}
+                  {duration ? ` · ${duration}` : ""}
+                </Text>
+              </Space>
+            );
+          },
         },
-      },
-      {
-        title: "Next Run",
-        dataIndex: "next_run_time",
-        key: "next_run",
-        sorter: (a, b) => new Date(a.next_run_time || 0) - new Date(b.next_run_time || 0),
-        render: (text, record) => {
-          if (!text) {
-            if (!record.periodic_task_details?.enabled) {
-              return <Space size={4}><PauseCircleOutlined style={{ color: token.colorTextSecondary }} /><Text type="secondary">Paused</Text></Space>;
+        {
+          title: "Next Run",
+          dataIndex: "next_run_time",
+          key: "next_run",
+          sorter: (a, b) =>
+            new Date(a.next_run_time || 0) - new Date(b.next_run_time || 0),
+          render: (text, record) => {
+            if (!text) {
+              if (!record.periodic_task_details?.enabled) {
+                return (
+                  <Space size={4}>
+                    <PauseCircleOutlined
+                      style={{ color: token.colorTextSecondary }}
+                    />
+                    <Text type="secondary">Paused</Text>
+                  </Space>
+                );
+              }
+              return <Text type="secondary">—</Text>;
             }
-            return <Text type="secondary">—</Text>;
-          }
-          // Compute "in Xm" countdown
-          const diff = new Date(text) - new Date();
-          let countdown = null;
-          if (diff > 0) {
-            const mins = Math.floor(diff / 60000);
-            if (mins < 60) countdown = `in ${mins}m`;
-            else if (mins < 1440) countdown = `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
-            else countdown = `in ${Math.floor(mins / 1440)}d`;
-          }
-          return (
-            <Space direction="vertical" size={1}>
-              <Text style={{ fontSize: 12 }}>{formatDateTime(text)}</Text>
-              {countdown && (
-                <Tag color="blue" style={{ fontSize: 10, lineHeight: "16px", padding: "0 4px", margin: 0 }}>
-                  <ClockCircleOutlined /> {countdown}
-                </Tag>
-              )}
-            </Space>
-          );
+            // Compute "in Xm" countdown
+            const diff = new Date(text) - new Date();
+            let countdown = null;
+            if (diff > 0) {
+              const mins = Math.floor(diff / 60000);
+              if (mins < 60) countdown = `in ${mins}m`;
+              else if (mins < 1440)
+                countdown = `in ${Math.floor(mins / 60)}h ${mins % 60}m`;
+              else countdown = `in ${Math.floor(mins / 1440)}d`;
+            }
+            return (
+              <Space direction="vertical" size={1}>
+                <Text style={{ fontSize: 12 }}>{formatDateTime(text)}</Text>
+                {countdown && (
+                  <Tag
+                    color="blue"
+                    style={{
+                      fontSize: 10,
+                      lineHeight: "16px",
+                      padding: "0 4px",
+                      margin: 0,
+                    }}
+                  >
+                    <ClockCircleOutlined /> {countdown}
+                  </Tag>
+                )}
+              </Space>
+            );
+          },
+        },
+        {
+          title: "Status",
+          key: "status",
+          render: (_, record) => {
+            const enabled = record.periodic_task_details?.enabled;
+            return (
+              <Space size={8}>
+                <Switch
+                  checked={enabled}
+                  onChange={(checked) => handleSwitchSchedular(record, checked)}
+                  size="small"
+                />
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  {enabled ? "Enabled" : "Paused"}
+                </Text>
+              </Space>
+            );
+          },
         },
-      },
-      {
-        title: "Status",
-        key: "status",
-        render: (_, record) => {
-          const enabled = record.periodic_task_details?.enabled;
-          return (
-            <Space size={8}>
-              <Switch
-                checked={enabled}
-                onChange={(checked) => handleSwitchSchedular(record, checked)}
-                size="small"
-              />
-              <Text type="secondary" style={{ fontSize: 12 }}>{enabled ? "Enabled" : "Paused"}</Text>
+        {
+          title: "Actions",
+          key: "actions",
+          width: 140,
+          render: (_, record) => (
+            <Space size={4}>
+              <Tooltip title="Run now">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={
+                    loading[record.user_task_id] ? (
+                      <LoadingOutlined />
+                    ) : (
+                      <PlayCircleOutlined
+                        style={{ color: token.colorPrimary }}
+                      />
+                    )
+                  }
+                  onClick={() =>
+                    handleRun(record.project?.id, record.user_task_id)
+                  }
+                  disabled={loading[record.user_task_id]}
+                />
+              </Tooltip>
+              <Tooltip title="Run history">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<HistoryOutlined />}
+                  onClick={() => goToRunHistory(record.user_task_id)}
+                />
+              </Tooltip>
+              <Tooltip title="Edit">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<EditOutlined />}
+                  onClick={() => onRowClick(record.user_task_id)}
+                />
+              </Tooltip>
+              <Tooltip title="Delete">
+                <Button
+                  type="text"
+                  size="small"
+                  danger
+                  icon={<DeleteOutlined />}
+                  onClick={() => handleDelete(record)}
+                />
+              </Tooltip>
             </Space>
-          );
+          ),
         },
-      },
-      {
-        title: "Actions",
-        key: "actions",
-        width: 140,
-        render: (_, record) => (
-          <Space size={4}>
-            <Tooltip title="Run now">
-              <Button type="text" size="small"
-                icon={loading[record.user_task_id] ? <LoadingOutlined /> : <PlayCircleOutlined style={{ color: token.colorPrimary }} />}
-                onClick={() => handleRun(record.project?.id, record.user_task_id)}
-                disabled={loading[record.user_task_id]}
-              />
-            </Tooltip>
-            <Tooltip title="Run history">
-              <Button type="text" size="small" icon={<HistoryOutlined />}
-                onClick={() => goToRunHistory(record.user_task_id)}
-              />
-            </Tooltip>
-            <Tooltip title="Edit">
-              <Button type="text" size="small" icon={<EditOutlined />}
-                onClick={() => onRowClick(record.user_task_id)}
-              />
-            </Tooltip>
-            <Tooltip title="Delete">
-              <Button type="text" size="small" danger icon={<DeleteOutlined />}
-                onClick={() => handleDelete(record)}
-              />
-            </Tooltip>
-          </Space>
-        ),
-      },
-    ], [token, loading, onRowClick]);
+      ],
+      [token, loading, onRowClick]
+    );
 
     return (
       <Table
@@ -337,7 +489,12 @@ const JobListTable = memo(
         size="middle"
         pagination={false}
         locale={{
-          emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No jobs created yet" />,
+          emptyText: (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="No jobs created yet"
+            />
+          ),
         }}
       />
     );

From ed1e03751f23750f44fa2c599f1d58463c3f432b Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Wed, 29 Apr 2026 07:28:27 +0530
Subject: [PATCH 6/8] fix: deleted jobs reappear after clearing filters

onDelete was removing the job from jobList but not from backup.
When filters were cleared, the useEffect re-derived jobList from
the stale backup, re-populating the deleted job.
---
 frontend/src/ide/scheduler/JobList.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ide/scheduler/JobList.jsx b/frontend/src/ide/scheduler/JobList.jsx
index 3a677a97..aacb7bf6 100644
--- a/frontend/src/ide/scheduler/JobList.jsx
+++ b/frontend/src/ide/scheduler/JobList.jsx
@@ -237,8 +237,12 @@ const JobList = () => {
       await deleteTask(delTaskDetail.projectId, delTaskDetail.taskId);
       setIsDeleteModalOpen(false);
       notify({ type: "success", message: "Job deleted successfully" });
-      setJobList(
-        jobList.filter(
+      const remaining = jobList.filter(
+        (el) => el.periodic_task_details.id !== delTaskDetail.taskId
+      );
+      setJobList(remaining);
+      setBackup((prev) =>
+        prev.filter(
           (el) => el.periodic_task_details.id !== delTaskDetail.taskId
         )
       );

From 84b4722a5df088fe39798e29179141ca507400cd Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:14:50 +0530
Subject: [PATCH 7/8] fix: update totalCount on delete so pagination reflects
 correctly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

totalCount was stale after deleting jobs — pagination footer still
showed the old count. Now decremented on each successful delete.
Stats cards already re-compute from backup (fixed earlier).
---
 frontend/src/ide/scheduler/JobList.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/ide/scheduler/JobList.jsx b/frontend/src/ide/scheduler/JobList.jsx
index aacb7bf6..a44b488f 100644
--- a/frontend/src/ide/scheduler/JobList.jsx
+++ b/frontend/src/ide/scheduler/JobList.jsx
@@ -246,6 +246,7 @@ const JobList = () => {
           (el) => el.periodic_task_details.id !== delTaskDetail.taskId
         )
       );
+      setTotalCount((prev) => Math.max(0, prev - 1));
     } catch (error) {
       notify({ error });
     }

From faf8a6892d06aa6fbbacfb37ddae92190f6a11a3 Mon Sep 17 00:00:00 2001
From: wicky <130177258+wicky-zipstack@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:38:09 +0530
Subject: [PATCH 8/8] fix: append (UTC) to cron schedule description

Cron schedules are stored and executed in UTC. The description text
now shows "(UTC)" so users understand the schedule timezone context
(e.g., "At 30 minutes past the hour (UTC)").
---
 frontend/src/ide/scheduler/JobListTable.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ide/scheduler/JobListTable.jsx b/frontend/src/ide/scheduler/JobListTable.jsx
index b5ece7b3..973bef46 100644
--- a/frontend/src/ide/scheduler/JobListTable.jsx
+++ b/frontend/src/ide/scheduler/JobListTable.jsx
@@ -81,7 +81,8 @@ const ScheduleBadge = ({ type, details }) => {
   let description = "";
   try {
     if (isCron && expression) {
-      description = getTooltipText({ cron_expression: expression }, type);
+      description =
+        getTooltipText({ cron_expression: expression }, type) + " (UTC)";
     } else if (!isCron && details?.interval) {
       description = getTooltipText(details.interval, type);
     }