From e37f30d33502671a123f2c3771a273628d6e3bcb Mon Sep 17 00:00:00 2001
From: UUBulb <35923940+uubulb@users.noreply.github.com>
Date: Wed, 20 Nov 2024 00:19:40 +0800
Subject: [PATCH] implement cron page (#7)

---
 src/api/cron.ts                       |  18 ++
 src/api/ddns.ts                       |   8 +-
 src/api/nat.ts                        |   6 +-
 src/api/notification-group.ts         |   2 +-
 src/api/server-group.ts               |   4 +-
 src/api/server.ts                     |   6 +-
 src/api/service.ts                    |   6 +-
 src/api/user.ts                       |   4 +-
 src/components/cron.tsx               | 249 ++++++++++++++++++++++++++
 src/components/header.tsx             |   7 +-
 src/components/notification-group.tsx |   4 +-
 src/components/service.tsx            |   4 +-
 src/components/xui/icon-button.tsx    |   7 +-
 src/main.tsx                          |   5 +
 src/routes/cron.tsx                   | 237 ++++++++++++++++++++++++
 src/routes/notification-group.tsx     |   2 +-
 src/routes/service.tsx                |   2 +-
 src/types/api.ts                      |   1 -
 src/types/cron.ts                     |  10 ++
 src/types/index.ts                    |   1 +
 20 files changed, 555 insertions(+), 28 deletions(-)
 create mode 100644 src/api/cron.ts
 create mode 100644 src/components/cron.tsx
 create mode 100644 src/routes/cron.tsx
 create mode 100644 src/types/cron.ts

diff --git a/src/api/cron.ts b/src/api/cron.ts
new file mode 100644
index 0000000..2eb8146
--- /dev/null
+++ b/src/api/cron.ts
@@ -0,0 +1,18 @@
+import { ModelCronForm } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const createCron = async (data: ModelCronForm): Promise<number> => {
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/cron', data);
+}
+
+export const updateCron = async (id: number, data: ModelCronForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/cron/${id}`, data);
+}
+
+export const deleteCron = async (id: number[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/cron', id);
+}
+
+export const runCron = async (id: number): Promise<void> => {
+    return fetcher<void>(FetcherMethod.GET, `/api/v1/cron/${id}/manual`, null);
+}
diff --git a/src/api/ddns.ts b/src/api/ddns.ts
index 0b74c2d..d2accd1 100644
--- a/src/api/ddns.ts
+++ b/src/api/ddns.ts
@@ -2,17 +2,17 @@ import { ModelDDNSForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 export const createDDNSProfile = async (data: ModelDDNSForm): Promise<number> => {
-    return fetcher<number>(FetcherMethod.POST, '/api/v1/ddns', data)
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/ddns', data);
 }
 
 export const updateDDNSProfile = async (id: number, data: ModelDDNSForm): Promise<void> => {
-    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/ddns/${id}`, data)
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/ddns/${id}`, data);
 }
 
 export const deleteDDNSProfiles = async (id: number[]): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/ddns', id)
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/ddns', id);
 }
 
 export const getDDNSProviders = async (): Promise<string[]> => {
-    return fetcher<string[]>(FetcherMethod.GET, '/api/v1/ddns/providers', null)
+    return fetcher<string[]>(FetcherMethod.GET, '/api/v1/ddns/providers', null);
 }
diff --git a/src/api/nat.ts b/src/api/nat.ts
index 524a02e..81d7809 100644
--- a/src/api/nat.ts
+++ b/src/api/nat.ts
@@ -2,13 +2,13 @@ import { ModelNATForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 export const createNAT = async (data: ModelNATForm): Promise<number> => {
-    return fetcher<number>(FetcherMethod.POST, '/api/v1/nat', data)
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/nat', data);
 }
 
 export const updateNAT = async (id: number, data: ModelNATForm): Promise<void> => {
-    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/nat/${id}`, data)
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/nat/${id}`, data);
 }
 
 export const deleteNAT = async (id: number[]): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/nat', id)
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/nat', id);
 }
diff --git a/src/api/notification-group.ts b/src/api/notification-group.ts
index 23c102a..8ffc501 100644
--- a/src/api/notification-group.ts
+++ b/src/api/notification-group.ts
@@ -10,5 +10,5 @@ export const updateNotificationGroup = async (id: number, data: ModelNotificatio
 }
 
 export const deleteNotificationGroups = async (id: number[]): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, `/api/v1/batch-delete/notification-group`, id)
+    return fetcher<void>(FetcherMethod.POST, `/api/v1/batch-delete/notification-group`, id);
 }
diff --git a/src/api/server-group.ts b/src/api/server-group.ts
index e38418c..b482711 100644
--- a/src/api/server-group.ts
+++ b/src/api/server-group.ts
@@ -10,9 +10,9 @@ export const updateServerGroup = async (id: number, data: ModelServerGroupForm):
 }
 
 export const deleteServerGroups = async (id: number[]): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, `/api/v1/batch-delete/server-group`, id)
+    return fetcher<void>(FetcherMethod.POST, `/api/v1/batch-delete/server-group`, id);
 }
 
 export const getServerGroups = async (): Promise<ModelServerGroupResponseItem[]> => {
-    return fetcher<ModelServerGroupResponseItem[]>(FetcherMethod.GET, '/api/v1/server-group', null)
+    return fetcher<ModelServerGroupResponseItem[]>(FetcherMethod.GET, '/api/v1/server-group', null);
 }
diff --git a/src/api/server.ts b/src/api/server.ts
index 470f00d..d87381b 100644
--- a/src/api/server.ts
+++ b/src/api/server.ts
@@ -2,13 +2,13 @@ import { ModelServer, ModelServerForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 export const updateServer = async (id: number, data: ModelServerForm): Promise<void> => {
-    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/server/${id}`, data)
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/server/${id}`, data);
 }
 
 export const deleteServer = async (id: number[]): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/server', id)
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/server', id);
 }
 
 export const getServers = async (): Promise<ModelServer[]> => {
-    return fetcher<ModelServer[]>(FetcherMethod.GET, '/api/v1/server', null)
+    return fetcher<ModelServer[]>(FetcherMethod.GET, '/api/v1/server', null);
 }
diff --git a/src/api/service.ts b/src/api/service.ts
index e96280f..1b7efe3 100644
--- a/src/api/service.ts
+++ b/src/api/service.ts
@@ -2,13 +2,13 @@ import { ModelServiceForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 export const createService = async (data: ModelServiceForm): Promise<number> => {
-    return fetcher<number>(FetcherMethod.POST, '/api/v1/service', data)
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/service', data);
 }
 
 export const updateService = async (id: number, data: ModelServiceForm): Promise<void> => {
-    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/service/${id}`, data)
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/service/${id}`, data);
 }
 
 export const deleteService = async (id: number[]): Promise<void> => {
-    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/service', id)
+    return fetcher<void>(FetcherMethod.POST, '/api/v1/batch-delete/service', id);
 }
diff --git a/src/api/user.ts b/src/api/user.ts
index e6c0409..6c031cf 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -2,9 +2,9 @@ import { ModelUser } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 export const getProfile = async (): Promise<ModelUser> => {
-    return fetcher<ModelUser>(FetcherMethod.GET, '/api/v1/profile', null)
+    return fetcher<ModelUser>(FetcherMethod.GET, '/api/v1/profile', null);
 }
 
 export const login = async (username: string, password: string): Promise<any> => {
-    return fetcher<any>(FetcherMethod.POST, '/api/v1/login', { username, password })
+    return fetcher<any>(FetcherMethod.POST, '/api/v1/login', { username, password });
 }
diff --git a/src/components/cron.tsx b/src/components/cron.tsx
new file mode 100644
index 0000000..be4cf57
--- /dev/null
+++ b/src/components/cron.tsx
@@ -0,0 +1,249 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelCron } from "@/types"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { IconButton } from "@/components/xui/icon-button"
+import { createCron, updateCron } from "@/api/cron"
+import { asOptionalField } from "@/lib/utils"
+import { cronTypes, cronCoverageTypes } from "@/types"
+import { Textarea } from "./ui/textarea"
+import { conv } from "@/lib/utils"
+
+interface CronCardProps {
+    data?: ModelCron;
+    mutate: KeyedMutator<ModelCron[]>;
+}
+
+const cronFormSchema = z.object({
+    task_type: z.coerce.number(),
+    name: z.string().min(1),
+    scheduler: z.string(),
+    command: asOptionalField(z.string()),
+    servers: z.array(z.string()).transform((v => {
+        return v.filter(Boolean).map(Number);
+    })),
+    cover: z.coerce.number().int(),
+    push_successful: asOptionalField(z.boolean()),
+    notification_group_id: z.coerce.number().int(),
+});
+
+export const CronCard: React.FC<CronCardProps> = ({ data, mutate }) => {
+    const form = useForm<z.infer<typeof cronFormSchema>>({
+        resolver: zodResolver(cronFormSchema),
+        defaultValues: data ? data : {
+            name: "",
+            task_type: 0,
+            scheduler: "",
+            servers: [],
+            cover: 0,
+            notification_group_id: 0,
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof cronFormSchema>) => {
+        data?.id ? await updateCron(data.id, values) : await createCron(values);
+        setOpen(false);
+        await mutate();
+        form.reset();
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                {data
+                    ?
+                    <IconButton variant="outline" icon="edit" />
+                    :
+                    <IconButton icon="plus" />
+                }
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-xl">
+                <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
+                    <div className="items-center mx-1">
+                        <DialogHeader>
+                            <DialogTitle>New Task</DialogTitle>
+                            <DialogDescription />
+                        </DialogHeader>
+                        <Form {...form}>
+                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2 my-2">
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Name</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="My Task"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="task_type"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Task Type</FormLabel>
+                                            <Select onValueChange={field.onChange} defaultValue={`${field.value}`}>
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue placeholder="Select task type" />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {Object.entries(cronTypes).map(([k, v]) => (
+                                                        <SelectItem key={k} value={k}>{v}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="scheduler"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Cron expression</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="0 0 0 3 * * (At 3 AM)"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="command"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Command</FormLabel>
+                                            <FormControl>
+                                                <Textarea
+                                                    className="resize-y"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="cover"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Coverage</FormLabel>
+                                            <Select onValueChange={field.onChange} defaultValue={`${field.value}`}>
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    {Object.entries(cronCoverageTypes).map(([k, v]) => (
+                                                        <SelectItem key={k} value={k}>{v}</SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="servers"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Specific Servers (Separate with comma)</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="1,2,3"
+                                                    {...field}
+                                                    value={conv.arrToStr(field.value ?? [])}
+                                                    onChange={e => {
+                                                        const arr = conv.strToArr(e.target.value);
+                                                        field.onChange(arr);
+                                                    }}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="notification_group_id"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Notifier Group ID</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    type="number"
+                                                    placeholder="0"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <DialogFooter className="justify-end">
+                                    <DialogClose asChild>
+                                        <Button type="button" className="my-2" variant="secondary">
+                                            Close
+                                        </Button>
+                                    </DialogClose>
+                                    <Button type="submit" className="my-2">Submit</Button>
+                                </DialogFooter>
+                            </form>
+                        </Form>
+                    </div>
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3a30dc3..81f2779 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -42,6 +42,11 @@ export default function Header() {
                                 <Link to="/dashboard/service">Service</Link>
                             </NzNavigationMenuLink>
                         </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <NzNavigationMenuLink asChild active={location.pathname === "/dashboard/cron"} className={navigationMenuTriggerStyle()}>
+                                <Link to="/dashboard/cron">Task</Link>
+                            </NzNavigationMenuLink>
+                        </NavigationMenuItem>
                         <NavigationMenuItem>
                             <NzNavigationMenuLink asChild active={location.pathname === "/dashboard/ddns"} className={navigationMenuTriggerStyle()}>
                                 <Link to="/dashboard/ddns">Dynamic DNS</Link>
@@ -54,7 +59,7 @@ export default function Header() {
                         </NavigationMenuItem>
                         <NavigationMenuItem>
                             <NzNavigationMenuLink asChild active={location.pathname === "/dashboard/server-group" || location.pathname === "/dashboard/notification-group"} className={navigationMenuTriggerStyle()}>
-                                <Link to="/dashboard/server-group">Groups</Link>
+                                <Link to="/dashboard/server-group">Group</Link>
                             </NzNavigationMenuLink>
                         </NavigationMenuItem>
                     </>
diff --git a/src/components/notification-group.tsx b/src/components/notification-group.tsx
index 3a6825d..e884365 100644
--- a/src/components/notification-group.tsx
+++ b/src/components/notification-group.tsx
@@ -76,7 +76,7 @@ export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ da
                 <ScrollArea className="max-h-[calc(100dvh-5rem)] p-3">
                     <div className="items-center mx-1">
                         <DialogHeader>
-                            <DialogTitle>New Server Group</DialogTitle>
+                            <DialogTitle>New Notifier Group</DialogTitle>
                             <DialogDescription />
                         </DialogHeader>
                         <Form {...form}>
@@ -102,7 +102,7 @@ export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ da
                                     name="notifications"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>Notification Methods</FormLabel>
+                                            <FormLabel>Notifiers</FormLabel>
                                             <FormControl>
                                                 <Input
                                                     placeholder="1,2,3"
diff --git a/src/components/service.tsx b/src/components/service.tsx
index 111cdd4..bfbb8d6 100644
--- a/src/components/service.tsx
+++ b/src/components/service.tsx
@@ -214,7 +214,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
                                             <Select onValueChange={field.onChange} defaultValue={`${field.value}`}>
                                                 <FormControl>
                                                     <SelectTrigger>
-                                                        <SelectValue placeholder="Select service type" />
+                                                        <SelectValue />
                                                     </SelectTrigger>
                                                 </FormControl>
                                                 <SelectContent>
@@ -253,7 +253,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({ data, mutate }) => {
                                     name="notification_group_id"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>Notification Group ID</FormLabel>
+                                            <FormLabel>Notifier Group ID</FormLabel>
                                             <FormControl>
                                                 <Input
                                                     type="number"
diff --git a/src/components/xui/icon-button.tsx b/src/components/xui/icon-button.tsx
index 7606328..0227608 100644
--- a/src/components/xui/icon-button.tsx
+++ b/src/components/xui/icon-button.tsx
@@ -1,9 +1,9 @@
-import { Plus, Edit2, Trash2, Terminal, CircleArrowUp, Clipboard, Check, FolderClosed } from "lucide-react"
+import { Plus, Edit2, Trash2, Terminal, CircleArrowUp, Clipboard, Check, FolderClosed, Play } from "lucide-react"
 import { Button, ButtonProps } from "@/components/ui/button"
 import { forwardRef } from "react";
 
 export interface IconButtonProps extends ButtonProps {
-    icon: "clipboard" | "check" | "edit" | "trash" | "plus" | "terminal" | "update" | "folder-closed";
+    icon: "clipboard" | "check" | "edit" | "trash" | "plus" | "terminal" | "update" | "folder-closed" | "play";
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
@@ -35,6 +35,9 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props,
                     case "folder-closed": {
                         return <FolderClosed />;
                     }
+                    case "play": {
+                        return <Play />;
+                    }
                 }
             })()}
         </Button>
diff --git a/src/main.tsx b/src/main.tsx
index a5d5e50..709066a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -20,6 +20,7 @@ import NATPage from './routes/nat';
 import ServerGroupPage from './routes/server-group';
 import NotificationGroupPage from './routes/notification-group';
 import { ServerProvider } from './hooks/useServer';
+import CronPage from './routes/cron';
 
 const router = createBrowserRouter([
   {
@@ -39,6 +40,10 @@ const router = createBrowserRouter([
         path: "/dashboard/service",
         element: <ServicePage />,
       },
+      {
+        path: "/dashboard/cron",
+        element: <CronPage />,
+      },
       {
         path: "/dashboard/ddns",
         element: <DDNSPage />,
diff --git a/src/routes/cron.tsx b/src/routes/cron.tsx
new file mode 100644
index 0000000..78ea6f5
--- /dev/null
+++ b/src/routes/cron.tsx
@@ -0,0 +1,237 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ModelCron } from "@/types"
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import useSWR from "swr"
+import { useEffect } from "react"
+import { ActionButtonGroup } from "@/components/action-button-group"
+import { HeaderButtonGroup } from "@/components/header-button-group"
+import { Skeleton } from "@/components/ui/skeleton"
+import { toast } from "sonner"
+import { deleteCron, runCron } from "@/api/cron"
+import { CronCard } from "@/components/cron"
+import { cronTypes } from "@/types"
+import { IconButton } from "@/components/xui/icon-button"
+
+export default function CronPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelCron[]>('/api/v1/cron', swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelCron>[] = [
+        {
+            id: "select",
+            header: ({ table }) => (
+                <Checkbox
+                    checked={
+                        table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && "indeterminate")
+                    }
+                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+                    aria-label="Select all"
+                />
+            ),
+            cell: ({ row }) => (
+                <Checkbox
+                    checked={row.getIsSelected()}
+                    onCheckedChange={(value) => row.toggleSelected(!!value)}
+                    aria-label="Select row"
+                />
+            ),
+            enableSorting: false,
+            enableHiding: false,
+        },
+        {
+            header: "ID",
+            accessorKey: "id",
+            accessorFn: row => row.id,
+        },
+        {
+            header: "Name",
+            accessorKey: "name",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-32 whitespace-normal break-words">
+                        {s.name}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Task Type",
+            accessorKey: "taskType",
+            accessorFn: row => cronTypes[row.task_type] || '',
+        },
+        {
+            header: "Cron Expression",
+            accessorKey: "scheduler",
+            accessorFn: row => row.scheduler,
+        },
+        {
+            header: "Command",
+            accessorKey: "command",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-48 whitespace-normal break-words">
+                        {s.command}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Notifier Group",
+            accessorKey: "ngroup",
+            accessorFn: row => row.notification_group_id,
+        },
+        {
+            header: "Send Success Notification",
+            accessorKey: "pushSuccessful",
+            accessorFn: row => row.push_successful ?? false,
+        },
+        {
+            header: "Coverage",
+            accessorKey: "cover",
+            accessorFn: row => {
+                switch (row.cover) {
+                    case 0: {
+                        return "Ignore All"
+                    }
+                    case 1: {
+                        return "Cover All"
+                    }
+                    case 2: {
+                        return "On alert"
+                    }
+                }
+            },
+        },
+        {
+            header: "Specific Servers",
+            accessorKey: "servers",
+            accessorFn: row => row.servers,
+        },
+        {
+            header: "Last Execution",
+            accessorKey: "lastExecution",
+            accessorFn: row => row.last_executed_at
+        },
+        {
+            header: "Last Result",
+            accessorKey: "lastResult",
+            accessorFn: row => row.last_result ?? false,
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{ fn: deleteCron, id: s.id, mutate: mutate }}>
+                        <>
+                            <IconButton variant="outline" icon="play" onClick={
+                                async () => {
+                                    try {
+                                        await runCron(s.id);
+                                    } catch (e) {
+                                        console.log(e);
+                                        toast("Error executing task", {
+                                            description: "Please see the console for details.",
+                                        })
+                                        await mutate()
+                                    }
+                                    toast("Success", {
+                                        description: "The task triggered successfully.",
+                                    })
+                                    await mutate()
+                                }} />
+                            <CronCard mutate={mutate} data={s} />
+                        </>
+                    </ActionButtonGroup>
+                )
+            },
+        },
+    ]
+
+    const table = useReactTable({
+        data: data ?? [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    const selectedRows = table.getSelectedRowModel().rows;
+
+    return (
+        <div className="px-8">
+            <div className="flex mt-6 mb-4">
+                <h1 className="flex-1 text-3xl font-bold tracking-tight">
+                    Task
+                </h1>
+                <HeaderButtonGroup className="flex-2 flex ml-auto gap-2" delete={{
+                    fn: deleteCron,
+                    id: selectedRows.map(r => r.original.id),
+                    mutate: mutate,
+                }}>
+                    <CronCard mutate={mutate} />
+                </HeaderButtonGroup>
+            </div>
+            {isLoading ? (
+                <div className="flex flex-col items-center space-y-4">
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                    <Skeleton className="h-[60px] w-[100%] rounded-lg" />
+                </div>
+            ) : (
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext()
+                                                )}
+                                        </TableHead>
+                                    )
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            )}
+        </div >
+    )
+}
diff --git a/src/routes/notification-group.tsx b/src/routes/notification-group.tsx
index 1260530..048b812 100644
--- a/src/routes/notification-group.tsx
+++ b/src/routes/notification-group.tsx
@@ -64,7 +64,7 @@ export default function NotificationGroupPage() {
             }
         },
         {
-            header: "Notification methods (ID)",
+            header: "Notifiers (ID)",
             accessorKey: "notifications",
             accessorFn: row => row.notifications,
         },
diff --git a/src/routes/service.tsx b/src/routes/service.tsx
index 8aca0c2..9c97fe3 100644
--- a/src/routes/service.tsx
+++ b/src/routes/service.tsx
@@ -106,7 +106,7 @@ export default function ServicePage() {
             accessorFn: row => row.service.duration,
         },
         {
-            header: "Notification Group ID",
+            header: "Notifier Group ID",
             accessorKey: "service.ngroup",
             accessorFn: row => row.service.notification_group_id,
         },
diff --git a/src/types/api.ts b/src/types/api.ts
index 387fe67..eb0c20c 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -216,7 +216,6 @@ export interface ModelCronForm {
   command?: string;
   /** @default 0 */
   cover: number;
-  id: number;
   /** @minLength 1 */
   name: string;
   notification_group_id: number;
diff --git a/src/types/cron.ts b/src/types/cron.ts
new file mode 100644
index 0000000..213e04c
--- /dev/null
+++ b/src/types/cron.ts
@@ -0,0 +1,10 @@
+export const cronTypes: Record<number, string> = {
+    0: "Scheduled",
+    1: "Trigger",
+}
+
+export const cronCoverageTypes: Record<number, string> = {
+    0: "Only specific servers",
+    1: "All excludes specific servers",
+    2: "The alarmed servers"
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 3bb57bc..d765bf0 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -5,3 +5,4 @@ export * from './service';
 export * from './ddns';
 export * from './serverStore';
 export * from './serverContext';
+export * from './cron';