implement group page (#6)

* implement group page

* group state, search box

* rename some field

* update api types

src/api/notification-group.ts

@@ -0,0 +1,14 @@
+import { ModelNotificationGroupForm } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const createNotificationGroup = async (data: ModelNotificationGroupForm): Promise<number> => {
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/notification-group', data);
+}
+
+export const updateNotificationGroup = async (id: number, data: ModelNotificationGroupForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/notification-group/${id}`, data);
+}
+
+export const deleteNotificationGroups = async (id: number[]): Promise<void> => {
+    return fetcher<void>(FetcherMethod.POST, `/api/v1/batch-delete/notification-group`, id)
+}

src/api/server-group.ts

@@ -0,0 +1,18 @@
+import { ModelServerGroupForm, ModelServerGroupResponseItem } from "@/types"
+import { fetcher, FetcherMethod } from "./api"
+
+export const createServerGroup = async (data: ModelServerGroupForm): Promise<number> => {
+    return fetcher<number>(FetcherMethod.POST, '/api/v1/server-group', data);
+}
+
+export const updateServerGroup = async (id: number, data: ModelServerGroupForm): Promise<void> => {
+    return fetcher<void>(FetcherMethod.PATCH, `/api/v1/server-group/${id}`, data);
+}
+
+export const deleteServerGroups = async (id: number[]): Promise<void> => {
+    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)
+}

src/api/server.ts

@@ -1,4 +1,4 @@
-import { ModelServerForm } from "@/types"
+import { ModelServer, ModelServerForm } from "@/types"
 import { fetcher, FetcherMethod } from "./api"
 
 export const updateServer = async (id: number, data: ModelServerForm): Promise<void> => {
@@ -8,3 +8,7 @@ export const updateServer = async (id: number, data: ModelServerForm): Promise<v
 export const deleteServer = async (id: number[]): Promise<void> => {
     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)
+}

src/components/group-tab.tsx

@@ -0,0 +1,23 @@
+import {
+    Tabs,
+    TabsList,
+    TabsTrigger,
+} from "@/components/ui/tabs"
+import { Link, useLocation } from "react-router-dom"
+
+export const GroupTab = () => {
+    const location = useLocation();
+
+    return (
+        <Tabs defaultValue={location.pathname}>
+            <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="/dashboard/server-group" asChild>
+                    <Link to="/dashboard/server-group">Server</Link>
+                </TabsTrigger>
+                <TabsTrigger value="/dashboard/notification-group" asChild>
+                    <Link to="/dashboard/notification-group">Notification</Link>
+                </TabsTrigger>
+            </TabsList>
+        </Tabs>
+    )
+}

src/components/header.tsx

@@ -21,8 +21,8 @@ export default function Header() {
 
     const location = useLocation();
 
-    return <header className="h-16 flex items-center border-b-2 px-4">
-        <NavigationMenu className="max-w-full">
+    return <header className="h-16 flex items-center border-b-2 px-4 overflow-x-auto">
+        <NavigationMenu className="sm:max-w-full">
             <NavigationMenuList>
                 <Card>
                     <NavigationMenuLink asChild className={navigationMenuTriggerStyle() + ' !text-foreground'}>
@@ -52,6 +52,11 @@ export default function Header() {
                                 <Link to="/dashboard/nat">NAT Traversal</Link>
                             </NzNavigationMenuLink>
                         </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <NzNavigationMenuLink asChild active={location.pathname === "/dashboard/server-group" || location.pathname === "/dashboard/notification-group"} className={navigationMenuTriggerStyle()}>
+                                <Link to="/dashboard/server-group">Groups</Link>
+                            </NzNavigationMenuLink>
+                        </NavigationMenuItem>
                     </>
                 }
             </NavigationMenuList>

src/components/notification-group.tsx

@@ -0,0 +1,136 @@
+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 { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelNotificationGroupResponseItem } from "@/types"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { IconButton } from "@/components/xui/icon-button"
+import { createNotificationGroup, updateNotificationGroup } from "@/api/notification-group"
+import { conv } from "@/lib/utils"
+
+interface NotificationGroupCardProps {
+    data?: ModelNotificationGroupResponseItem;
+    mutate: KeyedMutator<ModelNotificationGroupResponseItem[]>;
+}
+
+const notificationGroupFormSchema = z.object({
+    name: z.string().min(1),
+    notifications: z.array(z.string()).transform((v => {
+        return v.filter(Boolean).map(Number);
+    })),
+});
+
+export const NotificationGroupCard: React.FC<NotificationGroupCardProps> = ({ data, mutate }) => {
+    const form = useForm<z.infer<typeof notificationGroupFormSchema>>({
+        resolver: zodResolver(notificationGroupFormSchema),
+        defaultValues: data ? data : {
+            name: "",
+            notifications: [],
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof notificationGroupFormSchema>) => {
+        data?.group.id ? await updateNotificationGroup(data.group.id, values) : await createNotificationGroup(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 Server Group</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="Group Name"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="notifications"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Notification Methods</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>
+                                    )}
+                                />
+                                <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>
+    )
+}

src/components/server-group.tsx

@@ -0,0 +1,142 @@
+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 { ScrollArea } from "@/components/ui/scroll-area"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ModelServerGroupResponseItem } from "@/types"
+import { useState } from "react"
+import { KeyedMutator } from "swr"
+import { IconButton } from "@/components/xui/icon-button"
+import { createServerGroup, updateServerGroup } from "@/api/server-group"
+import { MultiSelect } from "@/components/xui/multi-select";
+import { useServer } from "@/hooks/useServer"
+
+interface ServerGroupCardProps {
+    data?: ModelServerGroupResponseItem;
+    mutate: KeyedMutator<ModelServerGroupResponseItem[]>;
+}
+
+const serverGroupFormSchema = z.object({
+    name: z.string().min(1),
+    servers: z.array(z.string()).transform((v => {
+        return v.filter(Boolean).map(Number);
+    })),
+});
+
+export const ServerGroupCard: React.FC<ServerGroupCardProps> = ({ data, mutate }) => {
+    const form = useForm<z.infer<typeof serverGroupFormSchema>>({
+        resolver: zodResolver(serverGroupFormSchema),
+        defaultValues: data ? {
+            name: data.group.name,
+            servers: data.servers,
+        } : {
+            name: "",
+            servers: [],
+        },
+        resetOptions: {
+            keepDefaultValues: false,
+        }
+    })
+
+    const [open, setOpen] = useState(false);
+
+    const onSubmit = async (values: z.infer<typeof serverGroupFormSchema>) => {
+        data?.group.id ? await updateServerGroup(data.group.id, values) : await createServerGroup(values);
+        setOpen(false);
+        await mutate();
+        form.reset();
+    }
+
+    const { servers } = useServer();
+    const serverList = servers?.map(s => ({
+        value: `${s.id}`,
+        label: s.name,
+    })) || [{ value: "", label: "" }];
+
+    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 Server Group</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="Group Name"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="servers"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Servers</FormLabel>
+                                            <FormControl>
+                                                <MultiSelect
+                                                    options={serverList}
+                                                    onValueChange={field.onChange}
+                                                    defaultValue={field.value?.map(String)}
+                                                />
+                                            </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>
+    )
+}

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/command.tsx

@@ -0,0 +1,151 @@
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

src/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/xui/multi-select.tsx

@@ -0,0 +1,403 @@
+/**
+  * SPDX-License-Identifier: MIT
+  * MIT License
+
+  * Copyright (c) 2024 sersavan
+
+  * Permission is hereby granted, free of charge, to any person obtaining a copy
+  * of this software and associated documentation files (the "Software"), to deal
+  * in the Software without restriction, including without limitation the rights
+  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  * copies of the Software, and to permit persons to whom the Software is
+  * furnished to do so, subject to the following conditions:
+
+  * The above copyright notice and this permission notice shall be included in all
+  * copies or substantial portions of the Software.
+ 
+  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  * SOFTWARE.
+  */
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  CheckIcon,
+  ChevronDown,
+  XIcon,
+  WandSparkles,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+const multiSelectVariants = cva(
+  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+        secondary:
+          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof multiSelectVariants> {
+  /**
+   * An array of option objects to be displayed in the multi-select component.
+   * Each option object has a label, value, and an optional icon.
+   */
+  options: {
+    /** The text to display for the option. */
+    label: string;
+    /** The unique value associated with the option. */
+    value: string;
+    /** Optional icon component to display alongside the option. */
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+
+  /**
+   * Callback function triggered when the selected values change.
+   * Receives an array of the new selected values.
+   */
+  onValueChange: (value: string[]) => void;
+
+  /** The default selected values when the component mounts. */
+  defaultValue?: string[];
+
+  /**
+   * Placeholder text to be displayed when no values are selected.
+   * Optional, defaults to "Select options".
+   */
+  placeholder?: string;
+
+  /**
+   * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+   * Optional, defaults to 0 (no animation).
+   */
+  animation?: number;
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number;
+
+  /**
+   * The modality of the popover. When set to true, interaction with outside elements
+   * will be disabled and only popover content will be visible to screen readers.
+   * Optional, defaults to false.
+   */
+  modalPopover?: boolean;
+
+  /**
+   * If true, renders the multi-select component as a child of another component.
+   * Optional, defaults to false.
+   */
+  asChild?: boolean;
+
+  /**
+   * Additional class names to apply custom styles to the multi-select component.
+   * Optional, can be used to add custom styles.
+   */
+  className?: string;
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options,
+      onValueChange,
+      variant,
+      defaultValue = [],
+      placeholder = "Select options",
+      animation = 0,
+      maxCount = 3,
+      modalPopover = false,
+      asChild = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [selectedValues, setSelectedValues] =
+      React.useState<string[]>(defaultValue);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+
+    const handleInputKeyDown = (
+      event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      if (event.key === "Enter") {
+        setIsPopoverOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues];
+        newSelectedValues.pop();
+        setSelectedValues(newSelectedValues);
+        onValueChange(newSelectedValues);
+      }
+    };
+
+    const toggleOption = (option: string) => {
+      const newSelectedValues = selectedValues.includes(option)
+        ? selectedValues.filter((value) => value !== option)
+        : [...selectedValues, option];
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    const handleClear = () => {
+      setSelectedValues([]);
+      onValueChange([]);
+    };
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        onValueChange(allValues);
+      }
+    };
+
+    return (
+      <Popover
+        open={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        modal={modalPopover}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={handleTogglePopover}
+            className={cn(
+              "flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto",
+              className
+            )}
+          >
+            {selectedValues.length > 0 ? (
+              <div className="flex justify-between items-center w-full">
+                <div className="flex flex-wrap items-center">
+                  {selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    const IconComponent = option?.icon;
+                    return (
+                      <Badge
+                        key={value}
+                        className={cn(
+                          isAnimating ? "animate-bounce" : "",
+                          multiSelectVariants({ variant })
+                        )}
+                        style={{ animationDuration: `${animation}s` }}
+                      >
+                        {IconComponent && (
+                          <IconComponent className="h-4 w-4 mr-2" />
+                        )}
+                        {option?.label}
+                        <XIcon
+                          className="ml-2 h-2 w-2 cursor-pointer"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            toggleOption(value);
+                          }}
+                        />
+                      </Badge>
+                    );
+                  })}
+                  {selectedValues.length > maxCount && (
+                    <Badge
+                      className={cn(
+                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
+                        isAnimating ? "animate-bounce" : "",
+                        multiSelectVariants({ variant })
+                      )}
+                      style={{ animationDuration: `${animation}s` }}
+                    >
+                      {`+ ${selectedValues.length - maxCount} more`}
+                      <XIcon
+                        className="ml-2 h-2 w-2 cursor-pointer"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          clearExtraOptions();
+                        }}
+                      />
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <XIcon
+                    className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleClear();
+                    }}
+                  />
+                  <Separator
+                    orientation="vertical"
+                    className="flex min-h-6 h-full"
+                  />
+                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between w-full mx-auto">
+                <span className="text-sm text-muted-foreground mx-3">
+                  {placeholder}
+                </span>
+                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0"
+          align="start"
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+        >
+          <Command>
+            <CommandInput
+              placeholder="Search..."
+              onKeyDown={handleInputKeyDown}
+            />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  key="all"
+                  onSelect={toggleAll}
+                  className="cursor-pointer"
+                >
+                  <div
+                    className={cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      selectedValues.length === options.length
+                        ? "bg-primary text-primary-foreground"
+                        : "opacity-50 [&_svg]:invisible"
+                    )}
+                  >
+                    <CheckIcon className="h-4 w-4" />
+                  </div>
+                  <span>(Select All)</span>
+                </CommandItem>
+                {options.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      onSelect={() => toggleOption(option.value)}
+                      className="cursor-pointer"
+                    >
+                      <div
+                        className={cn(
+                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                          isSelected
+                            ? "bg-primary text-primary-foreground"
+                            : "opacity-50 [&_svg]:invisible"
+                        )}
+                      >
+                        <CheckIcon className="h-4 w-4" />
+                      </div>
+                      {option.icon && (
+                        <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                      )}
+                      <span>{option.label}</span>
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <div className="flex items-center justify-between">
+                  {selectedValues.length > 0 && (
+                    <>
+                      <CommandItem
+                        onSelect={handleClear}
+                        className="flex-1 justify-center cursor-pointer"
+                      >
+                        Clear
+                      </CommandItem>
+                      <Separator
+                        orientation="vertical"
+                        className="flex min-h-6 h-full"
+                      />
+                    </>
+                  )}
+                  <CommandItem
+                    onSelect={() => setIsPopoverOpen(false)}
+                    className="flex-1 justify-center cursor-pointer max-w-full"
+                  >
+                    Close
+                  </CommandItem>
+                </div>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+        {animation > 0 && selectedValues.length > 0 && (
+          <WandSparkles
+            className={cn(
+              "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
+              isAnimating ? "" : "text-muted-foreground"
+            )}
+            onClick={() => setIsAnimating(!isAnimating)}
+          />
+        )}
+      </Popover>
+    );
+  }
+);
+
+MultiSelect.displayName = "MultiSelect";

src/hooks/useMainStore.ts

@@ -1,4 +1,4 @@
-import { MainStore, ModelUser as User } from '@/types'
+import { MainStore } from '@/types'
 import { create } from 'zustand'
 import { persist, createJSONStorage } from 'zustand/middleware'
 
@@ -6,7 +6,7 @@ export const useMainStore = create<MainStore, [['zustand/persist', MainStore]]>(
     persist(
         (set, get) => ({
             profile: get()?.profile,
-            setProfile: (profile: User | undefined) => set({ profile }),
+            setProfile: profile => set({ profile }),
         }),
         {
             name: 'mainStore',

src/hooks/useServer.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useEffect, useMemo } from "react"
+import { useServerStore } from "./useServerStore"
+import { getServerGroups } from "@/api/server-group"
+import { getServers } from "@/api/server"
+import { ServerContextProps } from "@/types"
+
+const ServerContext = createContext<ServerContextProps>({});
+
+interface ServerProviderProps {
+    children: React.ReactNode;
+    withServer?: boolean;
+    withServerGroup?: boolean;
+}
+
+export const ServerProvider: React.FC<ServerProviderProps> = ({ children, withServer, withServerGroup }) => {
+    const serverGroup = useServerStore(store => store.serverGroup);
+    const setServerGroup = useServerStore(store => store.setServerGroup);
+
+    const server = useServerStore(store => store.server);
+    const setServer = useServerStore(store => store.setServer);
+
+    useEffect(() => {
+        if (withServerGroup)
+            (async () => {
+                try {
+                    const sg = await getServerGroups();
+                    setServerGroup(sg);
+                } catch (error) {
+                    setServerGroup(undefined);
+                }
+            })();
+        if (withServer)
+            (async () => {
+                try {
+                    const s = await getServers();
+                    setServer(s);
+                } catch (error) {
+                    setServer(undefined);
+                }
+            })();
+    }, [])
+
+    const value: ServerContextProps = useMemo(() => ({
+        servers: server,
+        serverGroups: serverGroup,
+    }), [server, serverGroup]);
+    return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
+}
+
+export const useServer = () => {
+    return useContext(ServerContext);
+};

src/hooks/useServerStore.ts

@@ -0,0 +1,18 @@
+import { ServerStore } from '@/types'
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+export const useServerStore = create<ServerStore, [['zustand/persist', ServerStore]]>(
+    persist(
+        (set, get) => ({
+            server: get()?.server,
+            serverGroup: get()?.serverGroup,
+            setServer: server => set({ server }),
+            setServerGroup: serverGroup => set({ serverGroup }),
+        }),
+        {
+            name: 'serverStore',
+            storage: createJSONStorage(() => localStorage),
+        },
+    ),
+)

src/main.tsx

@@ -17,6 +17,9 @@ import { AuthProvider } from './hooks/useAuth';
 import { TerminalPage } from './components/terminal';
 import DDNSPage from './routes/ddns';
 import NATPage from './routes/nat';
+import ServerGroupPage from './routes/server-group';
+import NotificationGroupPage from './routes/notification-group';
+import { ServerProvider } from './hooks/useServer';
 
 const router = createBrowserRouter([
   {
@@ -30,7 +33,7 @@ const router = createBrowserRouter([
       },
       {
         path: "/dashboard",
-        element: <ServerPage />,
+        element: <ServerProvider withServerGroup><ServerPage /></ServerProvider>,
       },
       {
         path: "/dashboard/service",
@@ -44,6 +47,14 @@ const router = createBrowserRouter([
         path: "/dashboard/nat",
         element: <NATPage />,
       },
+      {
+        path: "/dashboard/server-group",
+        element: <ServerProvider withServer><ServerGroupPage /></ServerProvider>,
+      },
+      {
+        path: "/dashboard/notification-group",
+        element: <NotificationGroupPage />,
+      },
       {
         path: "/dashboard/terminal/:id",
         element: <TerminalPage />,

src/routes/notification-group.tsx

@@ -0,0 +1,161 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+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 { ModelNotificationGroupResponseItem } from "@/types"
+import { deleteNotificationGroups } from "@/api/notification-group"
+import { GroupTab } from "@/components/group-tab"
+import { NotificationGroupCard } from "@/components/notification-group"
+
+export default function NotificationGroupPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelNotificationGroupResponseItem[]>("/api/v1/notification-group", swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelNotificationGroupResponseItem>[] = [
+        {
+            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.group.id,
+        },
+        {
+            header: "Name",
+            accessorKey: "name",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-48 whitespace-normal break-words">
+                        {s.group.name}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Notification methods (ID)",
+            accessorKey: "notifications",
+            accessorFn: row => row.notifications,
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{
+                        fn: deleteNotificationGroups,
+                        id: s.group.id,
+                        mutate: mutate,
+                    }}>
+                        <NotificationGroupCard 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">
+                <GroupTab />
+                <HeaderButtonGroup className="flex gap-2 ml-auto" delete={{
+                    fn: deleteNotificationGroups,
+                    id: selectedRows.map(r => r.original.group.id),
+                    mutate: mutate
+                }}>
+                    <NotificationGroupCard 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>
+    )
+}

src/routes/server-group.tsx

@@ -0,0 +1,161 @@
+import { swrFetcher } from "@/api/api"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+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 { ModelServerGroupResponseItem } from "@/types"
+import { deleteServerGroups } from "@/api/server-group"
+import { GroupTab } from "@/components/group-tab"
+import { ServerGroupCard } from "@/components/server-group"
+
+export default function ServerGroupPage() {
+    const { data, mutate, error, isLoading } = useSWR<ModelServerGroupResponseItem[]>("/api/v1/server-group", swrFetcher);
+
+    useEffect(() => {
+        if (error)
+            toast("Error", {
+                description: `Error fetching resource: ${error.message}.`,
+            })
+    }, [error])
+
+    const columns: ColumnDef<ModelServerGroupResponseItem>[] = [
+        {
+            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.group.id,
+        },
+        {
+            header: "Name",
+            accessorKey: "name",
+            cell: ({ row }) => {
+                const s = row.original;
+                return (
+                    <div className="max-w-48 whitespace-normal break-words">
+                        {s.group.name}
+                    </div>
+                )
+            }
+        },
+        {
+            header: "Servers (ID)",
+            accessorKey: "servers",
+            accessorFn: row => row.servers,
+        },
+        {
+            id: "actions",
+            header: "Actions",
+            cell: ({ row }) => {
+                const s = row.original
+                return (
+                    <ActionButtonGroup className="flex gap-2" delete={{
+                        fn: deleteServerGroups,
+                        id: s.group.id,
+                        mutate: mutate,
+                    }}>
+                        <ServerGroupCard 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">
+                <GroupTab />
+                <HeaderButtonGroup className="flex ml-auto gap-2" delete={{
+                    fn: deleteServerGroups,
+                    id: selectedRows.map(r => r.original.group.id),
+                    mutate: mutate
+                }}>
+                    <ServerGroupCard 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>
+    )
+}

src/routes/server.tsx

@@ -15,9 +15,11 @@ import { IconButton } from "@/components/xui/icon-button"
 import { InstallCommandsMenu } from "@/components/install-commands"
 import { NoteMenu } from "@/components/note-menu"
 import { TerminalButton } from "@/components/terminal"
+import { useServer } from "@/hooks/useServer"
 
 export default function ServerPage() {
     const { data, mutate, error, isLoading } = useSWR<Server[]>('/api/v1/server', swrFetcher);
+    const { serverGroups } = useServer();
 
     useEffect(() => {
         if (error)
@@ -69,7 +71,11 @@ export default function ServerPage() {
         {
             header: "Groups",
             accessorKey: "groups",
-            accessorFn: row => "stub",
+            accessorFn: row => {
+                return serverGroups?.filter(sg => sg.servers.includes(row.id))
+                    .map(sg => sg.group.id)
+                    || [];
+            },
         },
         {
             id: "ip",

src/types/api.ts

@@ -117,15 +117,8 @@ export interface GithubComNaibaNezhaModelCommonResponseUint64 {
   success: boolean;
 }
 
-export interface GormDeletedAt {
-  time?: string;
-  /** Valid is true if Time is not NULL */
-  valid?: boolean;
-}
-
 export interface ModelAlertRule {
   created_at: string;
-  deleted_at: GormDeletedAt;
   enable: boolean;
   /** 失败时执行的触发任务id */
   fail_trigger_tasks: number[];
@@ -201,7 +194,6 @@ export interface ModelCron {
   cover: number;
   created_at: string;
   cron_job_id: number;
-  deleted_at: GormDeletedAt;
   id: number;
   /** 最后一次执行时间 */
   last_executed_at: string;
@@ -273,7 +265,6 @@ export interface ModelDDNSProfile {
   access_id: string;
   access_secret: string;
   created_at: string;
-  deleted_at: GormDeletedAt;
   domains: string[];
   enable_ipv4: boolean;
   enable_ipv6: boolean;
@@ -337,7 +328,6 @@ export interface ModelLoginResponse {
 
 export interface ModelNAT {
   created_at: string;
-  deleted_at: GormDeletedAt;
   domain: string;
   host: string;
   id: number;
@@ -356,7 +346,6 @@ export interface ModelNATForm {
 
 export interface ModelNotification {
   created_at: string;
-  deleted_at: GormDeletedAt;
   id: number;
   name: string;
   request_body: string;
@@ -382,7 +371,6 @@ export interface ModelNotificationForm {
 
 export interface ModelNotificationGroup {
   created_at: string;
-  deleted_at: GormDeletedAt;
   id: number;
   name: string;
   updated_at: string;
@@ -433,7 +421,6 @@ export interface ModelServer {
   created_at: string;
   /** DDNS配置 */
   ddns_profiles: number[];
-  deleted_at: GormDeletedAt;
   /** 展示排序，越大越靠前 */
   display_index: number;
   /** 启用DDNS */
@@ -474,7 +461,6 @@ export interface ModelServerForm {
 
 export interface ModelServerGroup {
   created_at: string;
-  deleted_at: GormDeletedAt;
   id: number;
   name: string;
   updated_at: string;
@@ -494,7 +480,6 @@ export interface ModelServerGroupResponseItem {
 export interface ModelService {
   cover: number;
   created_at: string;
-  deleted_at: GormDeletedAt;
   duration: number;
   enable_show_in_service: boolean;
   enable_trigger_task: boolean;
@@ -601,7 +586,6 @@ export interface ModelTerminalForm {
 
 export interface ModelUser {
   created_at: string;
-  deleted_at: GormDeletedAt;
   id: number;
   password: string;
   updated_at: string;

src/types/index.ts

@@ -3,3 +3,5 @@ export * from './authContext';
 export * from './api';
 export * from './service';
 export * from './ddns';
+export * from './serverStore';
+export * from './serverContext';

src/types/serverContext.ts

@@ -0,0 +1,6 @@
+import { ModelServerGroupResponseItem, ModelServer } from "@/types";
+
+export interface ServerContextProps {
+    servers?: ModelServer[];
+    serverGroups?: ModelServerGroupResponseItem[];
+}

src/types/serverStore.ts

@@ -0,0 +1,8 @@
+import { ModelServer, ModelServerGroupResponseItem } from "@/types";
+
+export interface ServerStore {
+    server?: ModelServer[];
+    serverGroup?: ModelServerGroupResponseItem[];
+    setServer: (server?: ModelServer[]) => void;
+    setServerGroup: (serverGroup?: ModelServerGroupResponseItem[]) => void;
+}