feat(tasks): replace card layout with table interface for better UX (#3804)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx

@@ -1,284 +0,0 @@
-"use client";
-
-import React, { useState, useTransition } from "react";
-import { ActionIcon, Badge, Button, Card, Group, Select, Stack, Text } from "@mantine/core";
-import { useMap } from "@mantine/hooks";
-import { IconPlayerPlay, IconPower, IconSettings } from "@tabler/icons-react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { getMantineColor, useTimeAgo } from "@homarr/common";
-import type { TaskStatus } from "@homarr/cron-job-status";
-import { useForm } from "@homarr/form";
-import { createModal, useModalAction } from "@homarr/modals";
-import { TranslationFunction } from "@homarr/translation";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import { IconPowerOff } from "@homarr/ui/icons";
-
-interface JobsListProps {
-  initialJobs: RouterOutputs["cronJobs"]["getJobs"];
-}
-
-type JobName = RouterOutputs["cronJobs"]["getJobs"][number]["name"];
-
-export const JobsList = ({ initialJobs }: JobsListProps) => {
-  const [jobs] = clientApi.cronJobs.getJobs.useSuspenseQuery(undefined, {
-    initialData: initialJobs,
-    refetchOnMount: false,
-  });
-
-  const jobStatusMap = useMap<string, TaskStatus | null>(initialJobs.map(({ name }) => [name, null] as const));
-
-  clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
-    onData: (data) => {
-      jobStatusMap.set(data.name, data);
-    },
-  });
-
-  return (
-    <Stack>
-      {jobs.map((job) => {
-        const status = jobStatusMap.get(job.name);
-
-        return <JobCard key={job.name} job={job} status={status ?? null} />;
-      })}
-    </Stack>
-  );
-};
-
-const cronExpressions = [
-  {
-    value: "*/5 * * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.seconds", { interval: 5 }),
-  },
-  {
-    value: "*/10 * * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.seconds", { interval: 10 }),
-  },
-  {
-    value: "*/20 * * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.seconds", { interval: 20 }),
-  },
-  {
-    value: "* * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.minutes", { interval: 1 }),
-  },
-  {
-    value: "*/5 * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.minutes", { interval: 5 }),
-  },
-  {
-    value: "*/10 * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.minutes", { interval: 10 }),
-  },
-  {
-    value: "*/15 * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.minutes", { interval: 15 }),
-  },
-  {
-    value: "0 * * * *",
-    label: (t) => t("management.page.tool.tasks.interval.hours", { interval: 1 }),
-  },
-  {
-    value: "0 0 * * */1",
-    label: (t) => t("management.page.tool.tasks.interval.midnight"),
-  },
-  {
-    value: "0 0 * * 1",
-    label: (t) => t("management.page.tool.tasks.interval.weeklyMonday"),
-  },
-] satisfies { value: string; label: (t: TranslationFunction) => string }[];
-
-interface JobCardProps {
-  job: RouterOutputs["cronJobs"]["getJobs"][number];
-  status: TaskStatus | null;
-}
-
-const JobCard = ({ job, status }: JobCardProps) => {
-  const t = useI18n();
-  const tTasks = useScopedI18n("management.page.tool.tasks");
-  const triggerMutation = clientApi.cronJobs.triggerJob.useMutation();
-  const handleJobTrigger = React.useCallback(
-    async (name: JobName) => {
-      if (status?.status === "running") return;
-      await triggerMutation.mutateAsync(name);
-    },
-    [triggerMutation, status],
-  );
-
-  const { openModal } = useModalAction(TaskConfigurationModal);
-  const [isEnabled, setEnabled] = useState(job.isEnabled);
-  const disableMutation = clientApi.cronJobs.disableJob.useMutation();
-  const enableMutation = clientApi.cronJobs.enableJob.useMutation();
-
-  const [activeStatePending, startActiveTransition] = useTransition();
-  const handleActiveChange = () =>
-    startActiveTransition(async () => {
-      if (isEnabled) {
-        await disableMutation.mutateAsync(job.name, {
-          onSuccess() {
-            setEnabled(false);
-          },
-        });
-      } else {
-        await enableMutation.mutateAsync(job.name, {
-          onSuccess() {
-            setEnabled(true);
-          },
-        });
-      }
-    });
-
-  return (
-    <Card key={job.name} withBorder>
-      <Group justify={"space-between"} gap={"md"}>
-        <Stack gap={0}>
-          <Group>
-            <Text>{tTasks(`job.${job.name}.label`)}</Text>
-            <StatusBadge isEnabled={isEnabled} status={status} />
-            {status?.lastExecutionStatus === "error" && <Badge color="red">{tTasks("status.error")}</Badge>}
-          </Group>
-          <Group gap="xs">
-            {status && (
-              <>
-                <TimeAgo timestamp={status.lastExecutionTimestamp} />
-                <Text size="sm" c="dimmed">
-                  •
-                </Text>
-                <Text size="sm" c="dimmed">
-                  {cronExpressions.find((expression) => expression.value === job.cron)?.label(t) ?? job.cron}
-                </Text>
-              </>
-            )}
-          </Group>
-        </Stack>
-
-        <Group>
-          {!job.preventManualExecution && (
-            <ActionIcon
-              onClick={() => handleJobTrigger(job.name)}
-              disabled={status?.status === "running"}
-              loading={triggerMutation.isPending}
-              variant="default"
-              size="xl"
-              radius="xl"
-            >
-              <IconPlayerPlay color={getMantineColor("green", 6)} stroke={1.5} />
-            </ActionIcon>
-          )}
-          <ActionIcon onClick={handleActiveChange} loading={activeStatePending} variant="default" size="xl" radius="xl">
-            {isEnabled ? (
-              <IconPower color={getMantineColor("green", 6)} stroke={1.5} />
-            ) : (
-              <IconPowerOff color={getMantineColor("gray", 6)} stroke={1.5} />
-            )}
-          </ActionIcon>
-          <ActionIcon
-            onClick={() =>
-              openModal(
-                { job },
-                {
-                  title: tTasks("settings.title", {
-                    jobName: tTasks(`job.${job.name}.label`),
-                  }),
-                },
-              )
-            }
-            variant={"default"}
-            size={"xl"}
-            radius={"xl"}
-          >
-            <IconSettings stroke={1.5} />
-          </ActionIcon>
-        </Group>
-      </Group>
-    </Card>
-  );
-};
-
-interface StatusBadgeProps {
-  isEnabled: boolean;
-  status: TaskStatus | null;
-}
-
-const StatusBadge = ({ isEnabled, status }: StatusBadgeProps) => {
-  const t = useScopedI18n("management.page.tool.tasks");
-  if (!isEnabled) return <Badge color="yellow">{t("status.disabled")}</Badge>;
-
-  if (!status) return null;
-
-  if (status.status === "running") return <Badge color="green">{t("status.running")}</Badge>;
-  return <Badge variant="default">{t("status.idle")}</Badge>;
-};
-
-const TimeAgo = ({ timestamp }: { timestamp: string }) => {
-  const timeAgo = useTimeAgo(new Date(timestamp));
-
-  return (
-    <Text size={"sm"} c={"dimmed"}>
-      {timeAgo}
-    </Text>
-  );
-};
-
-const TaskConfigurationModal = createModal<{
-  job: RouterOutputs["cronJobs"]["getJobs"][number];
-}>(({ actions, innerProps }) => {
-  const t = useI18n();
-  const form = useForm({
-    initialValues: {
-      cron: innerProps.job.cron,
-    },
-  });
-  const { mutateAsync, isPending } = clientApi.cronJobs.updateJobInterval.useMutation();
-  const utils = clientApi.useUtils();
-
-  return (
-    <form
-      onSubmit={form.onSubmit(async (values) => {
-        utils.cronJobs.getJobs.setData(undefined, (data) =>
-          data?.map((job) =>
-            job.name === innerProps.job.name
-              ? {
-                  ...job,
-                  cron: values.cron,
-                }
-              : job,
-          ),
-        );
-        await mutateAsync(
-          {
-            name: innerProps.job.name,
-            cron: values.cron,
-          },
-          {
-            onSuccess() {
-              actions.closeModal();
-            },
-            async onSettled() {
-              await utils.cronJobs.getJobs.invalidate();
-            },
-          },
-        );
-      })}
-    >
-      <Stack gap="sm">
-        <Select
-          label={t("management.page.tool.tasks.field.interval.label")}
-          {...form.getInputProps("cron")}
-          data={cronExpressions.map(({ value, label }) => ({ value, label: label(t) }))}
-        />
-        <Group justify="end">
-          <Button variant="subtle" color="gray" disabled={isPending} onClick={actions.closeModal}>
-            {t("common.action.cancel")}
-          </Button>
-          <Button type="submit" loading={isPending}>
-            {t("common.action.save")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  defaultTitle: "",
-});

apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/tasks-table.tsx

@@ -0,0 +1,451 @@
+"use client";
+
+import { ActionIcon, Badge, Button, Group, Select, Text } from "@mantine/core";
+import { useMap } from "@mantine/hooks";
+import { IconPlayerPlay, IconPower, IconRefresh } from "@tabler/icons-react";
+import type { MRT_ColumnDef } from "mantine-react-table";
+import { MantineReactTable } from "mantine-react-table";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { useTimeAgo } from "@homarr/common";
+import type { TaskStatus } from "@homarr/cron-job-status";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
+import type { ScopedTranslationFunction, TranslationFunction } from "@homarr/translation";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
+import { IconPowerOff } from "@homarr/ui/icons";
+
+const cronExpressions = [
+  {
+    value: "*/5 * * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 5 }),
+  },
+  {
+    value: "*/10 * * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 10 }),
+  },
+  {
+    value: "*/20 * * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 20 }),
+  },
+  {
+    value: "*/30 * * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.seconds", { interval: 30 }),
+  },
+  {
+    value: "* * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 1 }),
+  },
+  {
+    value: "*/5 * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 5 }),
+  },
+  {
+    value: "*/10 * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 10 }),
+  },
+  {
+    value: "*/15 * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.minutes", { interval: 15 }),
+  },
+  // Every hour
+  {
+    value: "0 * * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.hours", { interval: 1 }),
+  },
+  // Every two hours
+  {
+    value: "0 */2 * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.hours", { interval: 2 }),
+  },
+  // Every four hours
+  {
+    value: "0 */4 * * *",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.hours", { interval: 4 }),
+  },
+  // Every midnight
+  {
+    value: "0 0 * * */1",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.midnight"),
+  },
+  {
+    value: "0 0 * * 1",
+    label: (t: TranslationFunction) => t("management.page.tool.tasks.interval.weeklyMonday"),
+  },
+] satisfies { value: string; label: (t: TranslationFunction) => string }[];
+
+type JobData = RouterOutputs["cronJobs"]["getJobs"][number] & {
+  status?: TaskStatus | null;
+  lastExecutionTime?: string;
+};
+
+const createColumns = (
+  t: TranslationFunction,
+  tTasks: ScopedTranslationFunction<"management.page.tool.tasks">,
+  jobStatusMap: Map<string, TaskStatus | null>,
+  triggerMutation: ReturnType<typeof clientApi.cronJobs.triggerJob.useMutation>,
+  updateIntervalMutation: ReturnType<typeof clientApi.cronJobs.updateJobInterval.useMutation>,
+  enableMutation: ReturnType<typeof clientApi.cronJobs.enableJob.useMutation>,
+  disableMutation: ReturnType<typeof clientApi.cronJobs.disableJob.useMutation>,
+  loadingStates: Map<string, { toggle: boolean; trigger: boolean; interval: boolean }>,
+): MRT_ColumnDef<JobData>[] => [
+  {
+    accessorKey: "name",
+    header: tTasks("field.name.label"),
+    Cell({ row }) {
+      const status = jobStatusMap.get(row.original.name);
+      return (
+        <Group gap="xs">
+          <Text fw={500}>{tTasks(`job.${row.original.name}.label`)}</Text>
+          <StatusBadge isEnabled={row.original.isEnabled} status={status ?? null} />
+          {status?.lastExecutionStatus === "error" && (
+            <Badge color="red" size="sm">
+              {tTasks("status.error")}
+            </Badge>
+          )}
+        </Group>
+      );
+    },
+  },
+  {
+    accessorKey: "cron",
+    header: tTasks("field.interval.label"),
+    size: 200,
+    Cell({ row }) {
+      const handleIntervalChange = (newCron: string | null) => {
+        if (!newCron || newCron === row.original.cron) return;
+
+        const currentStates = loadingStates.get(row.original.name) ?? {
+          toggle: false,
+          trigger: false,
+          interval: false,
+        };
+        loadingStates.set(row.original.name, {
+          ...currentStates,
+          interval: true,
+        });
+
+        try {
+          updateIntervalMutation.mutate({
+            name: row.original.name,
+            cron: newCron,
+          });
+        } finally {
+          const updatedStates = loadingStates.get(row.original.name) ?? {
+            toggle: false,
+            trigger: false,
+            interval: false,
+          };
+          loadingStates.set(row.original.name, {
+            ...updatedStates,
+            interval: false,
+          });
+        }
+      };
+
+      return (
+        <Select
+          value={row.original.cron}
+          onChange={handleIntervalChange}
+          data={cronExpressions.map(({ value, label }) => ({
+            value,
+            label: label(t),
+          }))}
+          size="sm"
+          disabled={loadingStates.get(row.original.name)?.interval ?? false}
+          style={{ minWidth: 180 }}
+        />
+      );
+    },
+  },
+  {
+    accessorKey: "lastExecutionTime",
+    header: tTasks("field.lastExecution.label"),
+    size: 150,
+    Cell({ row }) {
+      const status = jobStatusMap.get(row.original.name);
+      if (!status?.lastExecutionTimestamp) {
+        return (
+          <Text size="sm" c="dimmed">
+            —
+          </Text>
+        );
+      }
+      return <TimeAgo timestamp={status.lastExecutionTimestamp} />;
+    },
+  },
+  {
+    id: "actions",
+    header: tTasks("field.actions.label"),
+    size: 120,
+    enableSorting: false,
+    Cell({ row }) {
+      const status = jobStatusMap.get(row.original.name);
+
+      const handleToggleEnabled = () => {
+        const currentStates = loadingStates.get(row.original.name) ?? {
+          toggle: false,
+          trigger: false,
+          interval: false,
+        };
+        loadingStates.set(row.original.name, {
+          ...currentStates,
+          toggle: true,
+        });
+        try {
+          if (row.original.isEnabled) {
+            disableMutation.mutate(row.original.name);
+          } else {
+            enableMutation.mutate(row.original.name);
+          }
+        } finally {
+          const updatedStates = loadingStates.get(row.original.name) ?? {
+            toggle: false,
+            trigger: false,
+            interval: false,
+          };
+          loadingStates.set(row.original.name, {
+            ...updatedStates,
+            toggle: false,
+          });
+        }
+      };
+
+      const handleTrigger = () => {
+        if (status?.status === "running") return;
+
+        const currentStates = loadingStates.get(row.original.name) ?? {
+          toggle: false,
+          trigger: false,
+          interval: false,
+        };
+        loadingStates.set(row.original.name, {
+          ...currentStates,
+          trigger: true,
+        });
+        try {
+          triggerMutation.mutate(row.original.name);
+        } finally {
+          const updatedStates = loadingStates.get(row.original.name) ?? {
+            toggle: false,
+            trigger: false,
+            interval: false,
+          };
+          loadingStates.set(row.original.name, {
+            ...updatedStates,
+            trigger: false,
+          });
+        }
+      };
+
+      return (
+        <Group gap="xs">
+          {!row.original.preventManualExecution && (
+            <ActionIcon
+              onClick={handleTrigger}
+              disabled={status?.status === "running"}
+              loading={loadingStates.get(row.original.name)?.trigger ?? false}
+              variant="light"
+              color="green"
+              size="md"
+            >
+              <IconPlayerPlay size={16} />
+            </ActionIcon>
+          )}
+          <ActionIcon
+            onClick={handleToggleEnabled}
+            loading={loadingStates.get(row.original.name)?.toggle ?? false}
+            variant="light"
+            color={row.original.isEnabled ? "green" : "gray"}
+            size="md"
+          >
+            {row.original.isEnabled ? <IconPower size={16} /> : <IconPowerOff size={16} />}
+          </ActionIcon>
+        </Group>
+      );
+    },
+  },
+];
+
+interface TasksTableProps {
+  initialJobs: RouterOutputs["cronJobs"]["getJobs"];
+}
+
+export const TasksTable = ({ initialJobs }: TasksTableProps) => {
+  const t = useI18n();
+  const tTasks = useScopedI18n("management.page.tool.tasks");
+
+  const { data: jobs } = clientApi.cronJobs.getJobs.useQuery(undefined, {
+    initialData: initialJobs,
+    refetchOnMount: false,
+  });
+
+  const jobStatusMap = useMap<string, TaskStatus | null>(initialJobs.map(({ name }) => [name, null] as const));
+
+  const loadingStates = useMap<string, { toggle: boolean; trigger: boolean; interval: boolean }>();
+
+  clientApi.cronJobs.subscribeToStatusUpdates.useSubscription(undefined, {
+    onData: (data) => {
+      jobStatusMap.set(data.name, data);
+    },
+  });
+
+  const triggerMutation = clientApi.cronJobs.triggerJob.useMutation({
+    onError() {
+      showErrorNotification({
+        title: t("common.error"),
+        message: tTasks("trigger.error.message"),
+      });
+    },
+    onSuccess() {
+      showSuccessNotification({
+        title: t("common.success"),
+        message: tTasks("trigger.success.message"),
+      });
+    },
+  });
+  const updateIntervalMutation = clientApi.cronJobs.updateJobInterval.useMutation({
+    onError() {
+      showErrorNotification({
+        title: t("common.error"),
+        message: tTasks("interval.update.error.message"),
+      });
+    },
+    onSuccess: async () => {
+      await utils.cronJobs.getJobs.invalidate();
+      showSuccessNotification({
+        title: t("common.success"),
+        message: tTasks("interval.update.success.message"),
+      });
+    },
+  });
+  const enableMutation = clientApi.cronJobs.enableJob.useMutation({
+    onError() {
+      showErrorNotification({
+        title: t("common.error"),
+        message: tTasks("toggle.error.message"),
+      });
+    },
+    onSuccess: async () => {
+      await utils.cronJobs.getJobs.invalidate();
+      showSuccessNotification({
+        title: t("common.success"),
+        message: tTasks("enable.success.message"),
+      });
+    },
+  });
+  const disableMutation = clientApi.cronJobs.disableJob.useMutation({
+    onError() {
+      showErrorNotification({
+        title: t("common.error"),
+        message: tTasks("toggle.error.message"),
+      });
+    },
+    onSuccess: async () => {
+      await utils.cronJobs.getJobs.invalidate();
+      showSuccessNotification({
+        title: t("common.success"),
+        message: tTasks("disable.success.message"),
+      });
+    },
+  });
+
+  // Utils for refresh functionality
+  const utils = clientApi.useUtils();
+  const handleRefreshAsync = async () => {
+    try {
+      await utils.cronJobs.getJobs.invalidate();
+      showSuccessNotification({
+        title: t("common.success"),
+        message: tTasks("refresh.success.message"),
+      });
+    } catch {
+      showErrorNotification({
+        title: t("common.error"),
+        message: tTasks("refresh.error.message"),
+      });
+    }
+  };
+
+  const table = useTranslatedMantineReactTable({
+    data: jobs,
+    enableDensityToggle: false,
+    enableColumnActions: false,
+    enableColumnFilters: false,
+    enablePagination: false,
+    enableRowSelection: false,
+    enableTableFooter: false,
+    enableBottomToolbar: false,
+    enableRowActions: false,
+    enableColumnOrdering: false,
+    enableSorting: false,
+    enableSortingRemoval: false,
+    positionGlobalFilter: "right",
+    mantineSearchTextInputProps: {
+      placeholder: tTasks("table.search", { count: String(jobs.length) }),
+      style: { minWidth: 300 },
+    },
+    initialState: { density: "xs", showGlobalFilter: true },
+    renderTopToolbarCustomActions: () => (
+      <Button variant="default" rightSection={<IconRefresh size="1rem" />} onClick={handleRefreshAsync}>
+        {tTasks("action.refresh.label")}
+      </Button>
+    ),
+    columns: createColumns(
+      t,
+      tTasks,
+      jobStatusMap,
+      triggerMutation,
+      updateIntervalMutation,
+      enableMutation,
+      disableMutation,
+      loadingStates,
+    ),
+  });
+
+  return <MantineReactTable table={table} />;
+};
+
+interface StatusBadgeProps {
+  isEnabled: boolean;
+  status: TaskStatus | null;
+}
+
+const StatusBadge = ({ isEnabled, status }: StatusBadgeProps) => {
+  const tTasks = useScopedI18n("management.page.tool.tasks");
+
+  if (!isEnabled) {
+    return (
+      <Badge color="yellow" size="sm">
+        {tTasks("status.disabled")}
+      </Badge>
+    );
+  }
+
+  if (!status) return null;
+
+  if (status.status === "running") {
+    return (
+      <Badge color="green" size="sm">
+        {tTasks("status.running")}
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge variant="default" size="sm">
+      {tTasks("status.idle")}
+    </Badge>
+  );
+};
+
+const TimeAgo = ({ timestamp }: { timestamp: string }) => {
+  const timeAgo = useTimeAgo(new Date(timestamp));
+
+  return (
+    <Text size="sm" c="dimmed">
+      {timeAgo}
+    </Text>
+  );
+};

apps/nextjs/src/app/[locale]/manage/tools/tasks/page.tsx

@@ -1,12 +1,13 @@
 import { notFound } from "next/navigation";
-import { Box, Title } from "@mantine/core";
+import { Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
-import { JobsList } from "./_components/jobs-list";
+import { TasksTable } from "./_components/tasks-table";
 
 export async function generateMetadata() {
   const session = await auth();
@@ -27,10 +28,15 @@ export default async function TasksPage() {
   }
 
   const jobs = await api.cronJobs.getJobs();
+  const tTasks = await getScopedI18n("management.page.tool.tasks");
+
   return (
-    <Box>
-      <Title mb={"md"}>Tasks</Title>
-      <JobsList initialJobs={jobs} />
-    </Box>
+    <>
+      <DynamicBreadcrumb />
+      <Stack>
+        <Title order={1}>{tTasks("title")}</Title>
+        <TasksTable initialJobs={jobs} />
+      </Stack>
+    </>
   );
 }

packages/translation/src/lang/en.json

@@ -1003,6 +1003,7 @@
     }
   },
   "common": {
+    "success": "Success",
     "beta": "Beta",
     "error": "Error",
     "action": {
@@ -3260,14 +3261,70 @@
             "minutes": "Every {interval, plural, =1 {minute} other {# minutes}}",
             "hours": "Every {interval, plural, =1 {hour} other {# hours}}",
             "midnight": "Every day at midnight",
-            "weeklyMonday": "Every week on monday"
+            "weeklyMonday": "Every week on monday",
+            "update": {
+              "success": {
+                "message": "Interval updated successfully"
+              },
+              "error": {
+                "message": "Failed to update interval"
+              }
+            }
           },
           "settings": {
             "title": "Task settings for {jobName}"
           },
           "field": {
+            "name": {
+              "label": "Name"
+            },
             "interval": {
               "label": "Schedule interval"
+            },
+            "lastExecution": {
+              "label": "Last Execution"
+            },
+            "actions": {
+              "label": "Actions"
+            }
+          },
+          "table": {
+            "search": "Search {count} tasks..."
+          },
+          "action": {
+            "refresh": {
+              "label": "Refresh"
+            }
+          },
+          "refresh": {
+            "success": {
+              "message": "Tasks refreshed successfully"
+            },
+            "error": {
+              "message": "Failed to refresh tasks"
+            }
+          },
+          "trigger": {
+            "success": {
+              "message": "Task triggered successfully"
+            },
+            "error": {
+              "message": "Failed to trigger task"
+            }
+          },
+          "enable": {
+            "success": {
+              "message": "Task enabled successfully"
+            }
+          },
+          "disable": {
+            "success": {
+              "message": "Task disabled successfully"
+            }
+          },
+          "toggle": {
+            "error": {
+              "message": "Failed to toggle task status"
             }
           }
         },
@@ -3776,6 +3833,9 @@
       },
       "tools": {
         "label": "Tools",
+        "tasks": {
+          "label": "Tasks"
+        },
         "docker": {
           "label": "Docker"
         },