From b44b8d09b2b1a8d65b650565e0f47f841e4f5af7 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Fri, 6 Dec 2024 09:54:44 +0800
Subject: [PATCH] feat(ui): new AccessList UI using antd

---
 .../certificate/CertificateDetail.tsx         |   2 +-
 .../certificate/CertificateList.tsx           |   2 +-
 .../components/certimate/AccessEditDialog.tsx |   8 +-
 .../certimate/AccessKubernetesForm.tsx        |   1 -
 .../components/certimate/AccessTypeSelect.tsx |   2 +-
 ui/src/components/certimate/EmailsEdit.tsx    |   2 +-
 ui/src/components/certimate/StringList.tsx    |   2 +-
 ui/src/components/certimate/Version.tsx       |   3 +-
 ui/src/components/ui/accordion.tsx            |   2 +-
 ui/src/components/ui/alert-dialog.tsx         |   2 +-
 ui/src/components/ui/alert.tsx                |   2 +-
 ui/src/components/ui/badge.tsx                |   2 +-
 ui/src/components/ui/breadcrumb.tsx           |   2 +-
 ui/src/components/ui/button.tsx               |   2 +-
 ui/src/components/ui/card.tsx                 |   2 +-
 ui/src/components/ui/collapsible.tsx          |   2 +-
 ui/src/components/ui/command.tsx              |   2 +-
 ui/src/components/ui/dialog.tsx               | 159 +++++---------
 ui/src/components/ui/drawer.tsx               |   2 +-
 ui/src/components/ui/dropdown-menu.tsx        |   2 +-
 ui/src/components/ui/form.tsx                 |   2 +-
 ui/src/components/ui/input.tsx                |   2 +-
 ui/src/components/ui/label.tsx                |   2 +-
 ui/src/components/ui/navigation-menu.tsx      |   2 +-
 ui/src/components/ui/pagination.tsx           |   2 +-
 ui/src/components/ui/popover.tsx              |  47 ++---
 ui/src/components/ui/progress.tsx             |   2 +-
 ui/src/components/ui/radio-group.tsx          |   2 +-
 ui/src/components/ui/scroll-area.tsx          |   2 +-
 ui/src/components/ui/select.tsx               |   2 +-
 ui/src/components/ui/separator.tsx            |   2 +-
 ui/src/components/ui/sheet.tsx                |   2 +-
 ui/src/components/ui/switch.tsx               |   2 +-
 ui/src/components/ui/table.tsx                | 138 +++---------
 ui/src/components/ui/tabs.tsx                 |   2 +-
 ui/src/components/ui/textarea.tsx             |   2 +-
 ui/src/components/ui/toast.tsx                |   2 +-
 ui/src/components/ui/tooltip.tsx              |   2 +-
 ui/src/{lib => components/ui}/utils.ts        |   0
 ui/src/i18n/locales/en/nls.access.json        |  31 +--
 ui/src/i18n/locales/en/nls.certificate.json   |  11 +-
 ui/src/i18n/locales/zh/nls.access.json        |  31 +--
 ui/src/i18n/locales/zh/nls.certificate.json   |  13 +-
 ui/src/pages/DashboardLayout.tsx              |   8 +-
 ui/src/pages/access/Access.tsx                | 150 -------------
 ui/src/pages/accesses/AccessList.tsx          | 197 ++++++++++++++++++
 ui/src/pages/certificates/CertificateList.tsx |  21 +-
 ui/src/pages/setting/SSLProvider.tsx          |   3 +-
 ui/src/pages/workflows/WorkflowDetail.tsx     |   2 +-
 ui/src/pages/workflows/WorkflowList.tsx       |  40 ++--
 ui/src/repository/access.ts                   |   2 +-
 ui/src/repository/certificate.ts              |   2 +-
 ui/src/repository/workflow.ts                 |   4 +-
 ui/src/router.tsx                             |  22 +-
 54 files changed, 429 insertions(+), 528 deletions(-)
 rename ui/src/{lib => components/ui}/utils.ts (100%)
 delete mode 100644 ui/src/pages/access/Access.tsx
 create mode 100644 ui/src/pages/accesses/AccessList.tsx

diff --git a/ui/src/components/certificate/CertificateDetail.tsx b/ui/src/components/certificate/CertificateDetail.tsx
index ec6d82ab..d58367ab 100644
--- a/ui/src/components/certificate/CertificateDetail.tsx
+++ b/ui/src/components/certificate/CertificateDetail.tsx
@@ -53,7 +53,7 @@ const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetai
             <Textarea value={certificate?.certificate} rows={10} readOnly={true} />
           </div>
           <div className="flex flex-col space-y-3">
-            <Label>{t("certificate.props.private.key")}</Label>
+            <Label>{t("certificate.props.private_key")}</Label>
             <Textarea value={certificate?.privateKey} rows={10} readOnly={true} />
           </div>
         </div>
diff --git a/ui/src/components/certificate/CertificateList.tsx b/ui/src/components/certificate/CertificateList.tsx
index bd628be7..0cf70bee 100644
--- a/ui/src/components/certificate/CertificateList.tsx
+++ b/ui/src/components/certificate/CertificateList.tsx
@@ -103,7 +103,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
     },
     {
       accessorKey: "created",
-      header: t("certificate.props.created"),
+      header: t("common.text.created_at"),
       cell: ({ row }) => {
         const date: string = row.getValue("created");
         return new Date(date).toLocaleString();
diff --git a/ui/src/components/certimate/AccessEditDialog.tsx b/ui/src/components/certimate/AccessEditDialog.tsx
index 10bede52..b2d89c12 100644
--- a/ui/src/components/certimate/AccessEditDialog.tsx
+++ b/ui/src/components/certimate/AccessEditDialog.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/ui/utils";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -273,9 +273,9 @@ const AccessEditDialog = ({ trigger, op, data, className, outConfigType }: Acces
           <DialogTitle>
             {
               {
-                ["add"]: t("access.authorization.add"),
-                ["edit"]: t("access.authorization.edit"),
-                ["copy"]: t("access.authorization.copy"),
+                ["add"]: t("access.action.add"),
+                ["edit"]: t("access.action.edit"),
+                ["copy"]: t("access.action.copy"),
               }[op]
             }
           </DialogTitle>
diff --git a/ui/src/components/certimate/AccessKubernetesForm.tsx b/ui/src/components/certimate/AccessKubernetesForm.tsx
index 23a696a9..254281e5 100644
--- a/ui/src/components/certimate/AccessKubernetesForm.tsx
+++ b/ui/src/components/certimate/AccessKubernetesForm.tsx
@@ -191,4 +191,3 @@ const AccessKubernetesForm = ({ data, op, onAfterReq }: AccessKubernetesFormProp
 };
 
 export default AccessKubernetesForm;
-
diff --git a/ui/src/components/certimate/AccessTypeSelect.tsx b/ui/src/components/certimate/AccessTypeSelect.tsx
index a2e7944c..23f60dea 100644
--- a/ui/src/components/certimate/AccessTypeSelect.tsx
+++ b/ui/src/components/certimate/AccessTypeSelect.tsx
@@ -1,6 +1,6 @@
 import { Check, ChevronsUpDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/components/ui/utils";
 import { Button } from "@/components/ui/button";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
diff --git a/ui/src/components/certimate/EmailsEdit.tsx b/ui/src/components/certimate/EmailsEdit.tsx
index d4bd5af4..40ea95f1 100644
--- a/ui/src/components/certimate/EmailsEdit.tsx
+++ b/ui/src/components/certimate/EmailsEdit.tsx
@@ -5,11 +5,11 @@ import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ClientResponseError } from "pocketbase";
 
+import { cn } from "@/components/ui/utils";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
 import { PbErrorData } from "@/domain/base";
 import { EmailsSetting } from "@/domain/settings";
 import { update } from "@/repository/settings";
diff --git a/ui/src/components/certimate/StringList.tsx b/ui/src/components/certimate/StringList.tsx
index 754f2d2b..8aa49c71 100644
--- a/ui/src/components/certimate/StringList.tsx
+++ b/ui/src/components/certimate/StringList.tsx
@@ -3,12 +3,12 @@ import { z } from "zod";
 import { useTranslation } from "react-i18next";
 import { Edit, Plus, Trash2 } from "lucide-react";
 
+import { cn } from "@/components/ui/utils";
 import Show from "@/components/Show";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { FormControl, FormItem, FormLabel } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
 
 type StringListProps = {
   className?: string;
diff --git a/ui/src/components/certimate/Version.tsx b/ui/src/components/certimate/Version.tsx
index 626e8809..9ac18efe 100644
--- a/ui/src/components/certimate/Version.tsx
+++ b/ui/src/components/certimate/Version.tsx
@@ -1,9 +1,9 @@
 import { useTranslation } from "react-i18next";
 import { BookOpen } from "lucide-react";
 
+import { cn } from "@/components/ui/utils";
 import { Separator } from "@/components/ui/separator";
 import { version } from "@/domain/version";
-import { cn } from "@/lib/utils";
 
 type VersionProps = {
   className?: string;
@@ -29,4 +29,3 @@ const Version = ({ className }: VersionProps) => {
 };
 
 export default Version;
-
diff --git a/ui/src/components/ui/accordion.tsx b/ui/src/components/ui/accordion.tsx
index 13d3fec9..1b7fcd37 100644
--- a/ui/src/components/ui/accordion.tsx
+++ b/ui/src/components/ui/accordion.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Accordion = AccordionPrimitive.Root;
 
diff --git a/ui/src/components/ui/alert-dialog.tsx b/ui/src/components/ui/alert-dialog.tsx
index 3edeed91..168887f1 100644
--- a/ui/src/components/ui/alert-dialog.tsx
+++ b/ui/src/components/ui/alert-dialog.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 import { buttonVariants } from "@/components/ui/button";
 
 const AlertDialog = AlertDialogPrimitive.Root;
diff --git a/ui/src/components/ui/alert.tsx b/ui/src/components/ui/alert.tsx
index 3e828361..e5e48af8 100644
--- a/ui/src/components/ui/alert.tsx
+++ b/ui/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
diff --git a/ui/src/components/ui/badge.tsx b/ui/src/components/ui/badge.tsx
index 8910ffb8..aaa69973 100644
--- a/ui/src/components/ui/badge.tsx
+++ b/ui/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./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",
diff --git a/ui/src/components/ui/breadcrumb.tsx b/ui/src/components/ui/breadcrumb.tsx
index c9813bda..1b173dd1 100644
--- a/ui/src/components/ui/breadcrumb.tsx
+++ b/ui/src/components/ui/breadcrumb.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index 0b9957db..28b2442d 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
diff --git a/ui/src/components/ui/card.tsx b/ui/src/components/ui/card.tsx
index 6fb1f0b3..cb0c1c0b 100644
--- a/ui/src/components/ui/card.tsx
+++ b/ui/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
diff --git a/ui/src/components/ui/collapsible.tsx b/ui/src/components/ui/collapsible.tsx
index e7822928..7d01e110 100644
--- a/ui/src/components/ui/collapsible.tsx
+++ b/ui/src/components/ui/collapsible.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Collapsible = CollapsiblePrimitive.Root;
 
diff --git a/ui/src/components/ui/command.tsx b/ui/src/components/ui/command.tsx
index 727aba4d..423dba05 100644
--- a/ui/src/components/ui/command.tsx
+++ b/ui/src/components/ui/command.tsx
@@ -3,7 +3,7 @@ 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 { cn } from "./utils";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<React.ElementRef<typeof CommandPrimitive>, React.ComponentPropsWithoutRef<typeof CommandPrimitive>>(
diff --git a/ui/src/components/ui/dialog.tsx b/ui/src/components/ui/dialog.tsx
index 01ff19c7..246d0a05 100644
--- a/ui/src/components/ui/dialog.tsx
+++ b/ui/src/components/ui/dialog.tsx
@@ -1,122 +1,77 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "./utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
+const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )}
       {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+    />
+  )
+);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(
+  ({ className, children, ...props }, ref) => (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+>(({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };
diff --git a/ui/src/components/ui/drawer.tsx b/ui/src/components/ui/drawer.tsx
index 2d9242d5..81fe4234 100644
--- a/ui/src/components/ui/drawer.tsx
+++ b/ui/src/components/ui/drawer.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
diff --git a/ui/src/components/ui/dropdown-menu.tsx b/ui/src/components/ui/dropdown-menu.tsx
index 457f743e..5f3404a9 100644
--- a/ui/src/components/ui/dropdown-menu.tsx
+++ b/ui/src/components/ui/dropdown-menu.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
diff --git a/ui/src/components/ui/form.tsx b/ui/src/components/ui/form.tsx
index d0162d9e..9ded7d14 100644
--- a/ui/src/components/ui/form.tsx
+++ b/ui/src/components/ui/form.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 
+import { cn } from "./utils";
 import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
 
 const Form = FormProvider;
 
diff --git a/ui/src/components/ui/input.tsx b/ui/src/components/ui/input.tsx
index 25a49cd4..595014fc 100644
--- a/ui/src/components/ui/input.tsx
+++ b/ui/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
diff --git a/ui/src/components/ui/label.tsx b/ui/src/components/ui/label.tsx
index b0ef9842..1887eee3 100644
--- a/ui/src/components/ui/label.tsx
+++ b/ui/src/components/ui/label.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 
diff --git a/ui/src/components/ui/navigation-menu.tsx b/ui/src/components/ui/navigation-menu.tsx
index 86921e29..cba14b92 100644
--- a/ui/src/components/ui/navigation-menu.tsx
+++ b/ui/src/components/ui/navigation-menu.tsx
@@ -3,7 +3,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { ChevronDown } from "lucide-react";
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
diff --git a/ui/src/components/ui/pagination.tsx b/ui/src/components/ui/pagination.tsx
index 8b3bbc23..474de12f 100644
--- a/ui/src/components/ui/pagination.tsx
+++ b/ui/src/components/ui/pagination.tsx
@@ -2,8 +2,8 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
+import { cn } from "./utils";
 import { ButtonProps, buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav role="navigation" aria-label="pagination" className={cn("mx-auto flex w-full justify-center", className)} {...props} />
diff --git a/ui/src/components/ui/popover.tsx b/ui/src/components/ui/popover.tsx
index bbba7e0e..3f188b41 100644
--- a/ui/src/components/ui/popover.tsx
+++ b/ui/src/components/ui/popover.tsx
@@ -1,29 +1,28 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "./utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+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
+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 }
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/ui/src/components/ui/progress.tsx b/ui/src/components/ui/progress.tsx
index d334ab32..6a9a161b 100644
--- a/ui/src/components/ui/progress.tsx
+++ b/ui/src/components/ui/progress.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>>(
   ({ className, value, ...props }, ref) => (
diff --git a/ui/src/components/ui/radio-group.tsx b/ui/src/components/ui/radio-group.tsx
index fed26af2..7712a518 100644
--- a/ui/src/components/ui/radio-group.tsx
+++ b/ui/src/components/ui/radio-group.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>>(
   ({ className, ...props }, ref) => {
diff --git a/ui/src/components/ui/scroll-area.tsx b/ui/src/components/ui/scroll-area.tsx
index 64434f2b..c6ba88af 100644
--- a/ui/src/components/ui/scroll-area.tsx
+++ b/ui/src/components/ui/scroll-area.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>>(
   ({ className, children, ...props }, ref) => (
diff --git a/ui/src/components/ui/select.tsx b/ui/src/components/ui/select.tsx
index 6d84b8ab..06b20fd6 100644
--- a/ui/src/components/ui/select.tsx
+++ b/ui/src/components/ui/select.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Select = SelectPrimitive.Root;
 
diff --git a/ui/src/components/ui/separator.tsx b/ui/src/components/ui/separator.tsx
index 1f1dc22c..57070755 100644
--- a/ui/src/components/ui/separator.tsx
+++ b/ui/src/components/ui/separator.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive.Root>, React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>>(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
diff --git a/ui/src/components/ui/sheet.tsx b/ui/src/components/ui/sheet.tsx
index 77f558f5..145732c8 100644
--- a/ui/src/components/ui/sheet.tsx
+++ b/ui/src/components/ui/sheet.tsx
@@ -3,7 +3,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Sheet = SheetPrimitive.Root;
 
diff --git a/ui/src/components/ui/switch.tsx b/ui/src/components/ui/switch.tsx
index 3ee7b8a9..6c646216 100644
--- a/ui/src/components/ui/switch.tsx
+++ b/ui/src/components/ui/switch.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>>(
   ({ className, ...props }, ref) => (
diff --git a/ui/src/components/ui/table.tsx b/ui/src/components/ui/table.tsx
index 7f3502f8..dbd959ad 100644
--- a/ui/src/components/ui/table.tsx
+++ b/ui/src/components/ui/table.tsx
@@ -1,117 +1,47 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "./utils";
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
   <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
+    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
+));
+TableHead.displayName = "TableHead";
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+));
+TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/ui/src/components/ui/tabs.tsx b/ui/src/components/ui/tabs.tsx
index 1bf49504..f7008692 100644
--- a/ui/src/components/ui/tabs.tsx
+++ b/ui/src/components/ui/tabs.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const Tabs = TabsPrimitive.Root;
 
diff --git a/ui/src/components/ui/textarea.tsx b/ui/src/components/ui/textarea.tsx
index 3865f67d..6df000eb 100644
--- a/ui/src/components/ui/textarea.tsx
+++ b/ui/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
diff --git a/ui/src/components/ui/toast.tsx b/ui/src/components/ui/toast.tsx
index f96eca98..86ad83bb 100644
--- a/ui/src/components/ui/toast.tsx
+++ b/ui/src/components/ui/toast.tsx
@@ -3,7 +3,7 @@ import * as ToastPrimitives from "@radix-ui/react-toast";
 import { X } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
diff --git a/ui/src/components/ui/tooltip.tsx b/ui/src/components/ui/tooltip.tsx
index 54f6e5bb..2390d4cd 100644
--- a/ui/src/components/ui/tooltip.tsx
+++ b/ui/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils";
+import { cn } from "./utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
diff --git a/ui/src/lib/utils.ts b/ui/src/components/ui/utils.ts
similarity index 100%
rename from ui/src/lib/utils.ts
rename to ui/src/components/ui/utils.ts
diff --git a/ui/src/i18n/locales/en/nls.access.json b/ui/src/i18n/locales/en/nls.access.json
index 13201a8e..f2514647 100644
--- a/ui/src/i18n/locales/en/nls.access.json
+++ b/ui/src/i18n/locales/en/nls.access.json
@@ -1,14 +1,13 @@
 {
   "access.page.title": "Authorization Management",
 
-  "access.authorization.tab": "Authorization",
-  "access.authorization.nodata": "Please add authorization to start deploying certificate.",
+  "access.nodata": "Please add authorization to start deploying certificate.",
 
-  "access.authorization.add": "Add Authorization",
-  "access.authorization.edit": "Edit Authorization",
-  "access.authorization.copy": "Copy Authorization",
-  "access.authorization.delete": "Delete Authorization",
-  "access.authorization.delete.confirm": "Are you sure you want to delete the deployment authorization?",
+  "access.action.add": "Create Authorization",
+  "access.action.edit": "Edit Authorization",
+  "access.action.copy": "Copy Authorization",
+  "access.action.delete": "Delete Authorization",
+  "access.action.delete.confirm": "Are you sure you want to delete the deployment authorization?",
 
   "access.authorization.form.type.label": "Provider",
   "access.authorization.form.type.placeholder": "Please select a provider",
@@ -73,21 +72,5 @@
   "access.authorization.form.webhook_url.placeholder": "Please enter Webhook URL",
   "access.authorization.form.k8s_kubeconfig.label": "KubeConfig (Null will use pod's ServiceAccount)",
   "access.authorization.form.k8s_kubeconfig.placeholder": "Please enter KubeConfig",
-  "access.authorization.form.k8s_kubeconfig_file.placeholder": "Please select file (Null will use pod's ServiceAccount)",
-
-  "access.group.tab": "Authorization Group",
-
-  "access.group.nodata": "No deployment authorization configuration yet, please add after starting use.",
-  "access.group.total": "Totally {{total}} deployment authorization configuration",
-
-  "access.group.add": "Add Group",
-  "access.group.delete": "Delete Group",
-  "access.group.delete.confirm": "Are you sure you want to delete the deployment authorization group?",
-
-  "access.group.form.name.label": "Group Name",
-  "access.group.form.name.errmsg.empty": "Please enter group name",
-
-  "access.group.domains": "All Authorizations",
-  "access.group.domains.nodata": "Please add a domain to start deploying the certificate."
+  "access.authorization.form.k8s_kubeconfig_file.placeholder": "Please select file (Null will use pod's ServiceAccount)"
 }
-
diff --git a/ui/src/i18n/locales/en/nls.certificate.json b/ui/src/i18n/locales/en/nls.certificate.json
index 37bf01ef..ca083c6c 100644
--- a/ui/src/i18n/locales/en/nls.certificate.json
+++ b/ui/src/i18n/locales/en/nls.certificate.json
@@ -1,7 +1,10 @@
 {
   "certificate.page.title": "Certificates",
 
-  "certificate.nodata": "No certificates yet, add a workflow to generate certificates!😀",
+  "certificate.nodata": "No certificates yet, create a workflow to generate certificates! 😀",
+
+  "certificate.action.view": "View Certificate",
+  "certificate.action.download": "Download Certificate",
 
   "certificate.props.domain": "Name",
   "certificate.props.expiry": "Expiry",
@@ -10,10 +13,6 @@
   "certificate.props.expiry.text.expire": "Expire",
   "certificate.props.workflow": "Workflow",
   "certificate.props.source": "Source",
-  "certificate.props.created": "Created",
   "certificate.props.certificate": "Certificate",
-  "certificate.props.private.key": "Private Key",
-
-  "certificate.action.view": "View Certificate",
-  "certificate.action.download": "Download Certificate"
+  "certificate.props.private_key": "Private Key"
 }
diff --git a/ui/src/i18n/locales/zh/nls.access.json b/ui/src/i18n/locales/zh/nls.access.json
index ed3021fd..3ddd460f 100644
--- a/ui/src/i18n/locales/zh/nls.access.json
+++ b/ui/src/i18n/locales/zh/nls.access.json
@@ -1,14 +1,13 @@
 {
   "access.page.title": "授权管理",
 
-  "access.authorization.tab": "授权",
-  "access.authorization.nodata": "请添加授权开始部署证书吧。",
+  "access.nodata": "请添加授权开始部署证书吧。",
 
-  "access.authorization.add": "新增授权",
-  "access.authorization.edit": "编辑授权",
-  "access.authorization.copy": "复制授权",
-  "access.authorization.delete": "删除授权",
-  "access.authorization.delete.confirm": "确定要删除授权吗？",
+  "access.action.add": "新建授权",
+  "access.action.edit": "编辑授权",
+  "access.action.copy": "复制授权",
+  "access.action.delete": "删除授权",
+  "access.action.delete.confirm": "确定要删除此授权吗？",
 
   "access.authorization.form.type.label": "服务商",
   "access.authorization.form.type.placeholder": "请选择服务商",
@@ -73,21 +72,5 @@
   "access.authorization.form.webhook_url.placeholder": "请输入 Webhook URL",
   "access.authorization.form.k8s_kubeconfig.label": "KubeConfig（不选将使用Pod的ServiceAccount）",
   "access.authorization.form.k8s_kubeconfig.placeholder": "请输入 KubeConfig",
-  "access.authorization.form.k8s_kubeconfig_file.placeholder": "请选择文件",
-
-  "access.group.tab": "授权组",
-
-  "access.group.nodata": "暂无部署授权配置，请添加后开始使用吧",
-  "access.group.total": "共有 {{total}} 个部署授权配置",
-
-  "access.group.add": "添加授权组",
-  "access.group.delete": "删除组",
-  "access.group.delete.confirm": "确定要删除部署授权组吗？",
-
-  "access.group.form.name.label": "组名",
-  "access.group.form.name.errmsg.empty": "请输入组名",
-
-  "access.group.domains": "所有授权",
-  "access.group.domains.nodata": "请添加域名开始部署证书吧。"
+  "access.authorization.form.k8s_kubeconfig_file.placeholder": "请选择文件"
 }
-
diff --git a/ui/src/i18n/locales/zh/nls.certificate.json b/ui/src/i18n/locales/zh/nls.certificate.json
index 249578fd..9d956b1a 100644
--- a/ui/src/i18n/locales/zh/nls.certificate.json
+++ b/ui/src/i18n/locales/zh/nls.certificate.json
@@ -1,7 +1,10 @@
 {
   "certificate.page.title": "证书管理",
 
-  "certificate.nodata": "暂无证书，添加工作流去生成证书吧😀",
+  "certificate.nodata": "暂无证书，创建一个工作流去生成证书吧 😀",
+
+  "certificate.action.view": "查看证书",
+  "certificate.action.download": "下载证书",
 
   "certificate.props.domain": "名称",
   "certificate.props.expiry": "有效期限",
@@ -10,10 +13,6 @@
   "certificate.props.expiry.text.expire": "到期",
   "certificate.props.workflow": "所属工作流",
   "certificate.props.source": "来源",
-  "certificate.props.created": "颁发时间",
-  "certificate.props.certificate": "证书",
-  "certificate.props.private.key": "私钥",
-
-  "certificate.action.view": "查看证书",
-  "certificate.action.download": "下载证书"
+  "certificate.props.certificate": "证书内容",
+  "certificate.props.private_key": "私钥内容"
 }
diff --git a/ui/src/pages/DashboardLayout.tsx b/ui/src/pages/DashboardLayout.tsx
index f577bcb4..b052ac6b 100644
--- a/ui/src/pages/DashboardLayout.tsx
+++ b/ui/src/pages/DashboardLayout.tsx
@@ -4,10 +4,10 @@ import { CircleUser, Home, Menu, Server, ShieldCheck, Workflow } from "lucide-re
 
 import LocaleToggle from "@/components/LocaleToggle";
 import { ThemeToggle } from "@/components/ThemeToggle";
+import { cn } from "@/components/ui/utils";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { cn } from "@/lib/utils";
 import { getPocketBase } from "@/repository/pocketbase";
 import { ConfigProvider } from "@/providers/config";
 
@@ -73,7 +73,7 @@ export default function Dashboard() {
                     {t("certificate.page.title")}
                   </Link>
 
-                  <Link to="/access" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/access"))}>
+                  <Link to="/accesses" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/accesses"))}>
                     <Server className="h-4 w-4" />
                     {t("access.page.title")}
                   </Link>
@@ -122,8 +122,8 @@ export default function Dashboard() {
                     </Link>
 
                     <Link
-                      to="/access"
-                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl  px-3 py-2  hover:text-foreground", getClass("/access"))}
+                      to="/accesses"
+                      className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl  px-3 py-2  hover:text-foreground", getClass("/accesses"))}
                     >
                       <Server className="h-5 w-5" />
                       {t("access.page.title")}
diff --git a/ui/src/pages/access/Access.tsx b/ui/src/pages/access/Access.tsx
deleted file mode 100644
index f9096bd5..00000000
--- a/ui/src/pages/access/Access.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useLocation, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Key } from "lucide-react";
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog.tsx";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import AccessEditDialog from "@/components/certimate/AccessEditDialog";
-import XPagination from "@/components/certimate/XPagination";
-import { convertZulu2Beijing } from "@/lib/time";
-import { Access as AccessType, accessProvidersMap } from "@/domain/access";
-import { remove } from "@/repository/access";
-import { useConfigContext } from "@/providers/config";
-
-const Access = () => {
-  const { t } = useTranslation();
-  const { config, deleteAccess } = useConfigContext();
-  const { accesses } = config;
-
-  const perPage = 10;
-
-  const totalPages = Math.ceil(accesses.length / perPage);
-
-  const navigate = useNavigate();
-  const location = useLocation();
-  const query = new URLSearchParams(location.search);
-  const page = query.get("page");
-  const pageNumber = page ? Number(page) : 1;
-
-  const startIndex = (pageNumber - 1) * perPage;
-  const endIndex = startIndex + perPage;
-
-  const handleDelete = async (data: AccessType) => {
-    const rs = await remove(data);
-    deleteAccess(rs.id);
-  };
-
-  return (
-    <div className="">
-      <div className="flex justify-between items-center">
-        <div className="text-muted-foreground">{t("access.page.title")}</div>
-        <AccessEditDialog trigger={<Button>{t("access.authorization.add")}</Button>} op="add" />
-      </div>
-
-      {accesses.length === 0 ? (
-        <div className="flex flex-col items-center mt-10">
-          <span className="bg-orange-100 p-5 rounded-full">
-            <Key size={40} className="text-primary" />
-          </span>
-
-          <div className="text-center text-sm text-muted-foreground mt-3">{t("access.authorization.nodata")}</div>
-          <AccessEditDialog trigger={<Button>{t("access.authorization.add")}</Button>} op="add" className="mt-3" />
-        </div>
-      ) : (
-        <>
-          <div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
-            <div className="w-48">{t("common.text.name")}</div>
-            <div className="w-48">{t("common.text.provider")}</div>
-
-            <div className="w-60">{t("common.text.created_at")}</div>
-            <div className="w-60">{t("common.text.updated_at")}</div>
-            <div className="grow">{t("common.text.operations")}</div>
-          </div>
-          {accesses.slice(startIndex, endIndex).map((access) => (
-            <div
-              className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
-              key={access.id}
-            >
-              <div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-start">
-                <div className="pr-3  truncate">{access.name}</div>
-              </div>
-              <div className="sm:w-48 w-full pt-1 sm:pt-0 flex  items-center space-x-2">
-                <img src={accessProvidersMap.get(access.configType)?.icon} className="w-6" />
-                <div>{t(accessProvidersMap.get(access.configType)?.name || "")}</div>
-              </div>
-
-              <div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.created && convertZulu2Beijing(access.created)}</div>
-              <div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.updated && convertZulu2Beijing(access.updated)}</div>
-              <div className="flex items-center grow justify-start pt-1 sm:pt-0">
-                <AccessEditDialog
-                  trigger={
-                    <Button variant={"link"} className="p-0">
-                      {t("common.edit")}
-                    </Button>
-                  }
-                  op="edit"
-                  data={access}
-                />
-                <Separator orientation="vertical" className="h-4 mx-2" />
-                <AccessEditDialog
-                  trigger={
-                    <Button variant={"link"} className="p-0">
-                      {t("common.copy")}
-                    </Button>
-                  }
-                  op="copy"
-                  data={access}
-                />
-                <Separator orientation="vertical" className="h-4 mx-2" />
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button variant={"link"} className="p-0">
-                      {t("common.delete")}
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle className="dark:text-gray-200">{t("access.authorization.delete")}</AlertDialogTitle>
-                      <AlertDialogDescription>{t("access.authorization.delete.confirm")}</AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel className="dark:text-gray-200">{t("common.cancel")}</AlertDialogCancel>
-                      <AlertDialogAction
-                        onClick={() => {
-                          handleDelete(access);
-                        }}
-                      >
-                        {t("common.confirm")}
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              </div>
-            </div>
-          ))}
-          <XPagination
-            totalPages={totalPages}
-            currentPage={pageNumber}
-            onPageChange={(page) => {
-              query.set("page", page.toString());
-              navigate({ search: query.toString() });
-            }}
-          />
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Access;
diff --git a/ui/src/pages/accesses/AccessList.tsx b/ui/src/pages/accesses/AccessList.tsx
new file mode 100644
index 00000000..4a0ce3d9
--- /dev/null
+++ b/ui/src/pages/accesses/AccessList.tsx
@@ -0,0 +1,197 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Avatar, Button, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
+import { PageHeader } from "@ant-design/pro-components";
+import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
+import moment from "moment";
+
+import AccessEditDialog from "@/components/certimate/AccessEditDialog";
+import { Access as AccessType, accessProvidersMap } from "@/domain/access";
+import { remove as removeAccess } from "@/repository/access";
+import { useConfigContext } from "@/providers/config";
+
+const AccessList = () => {
+  const { t } = useTranslation();
+
+  const [modalApi, ModelContextHolder] = Modal.useModal();
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const tableColumns: TableProps<AccessType>["columns"] = [
+    {
+      key: "$index",
+      align: "center",
+      title: "",
+      width: 50,
+      render: (_, __, index) => (page - 1) * pageSize + index + 1,
+    },
+    {
+      key: "name",
+      title: t("common.text.name"),
+      ellipsis: true,
+      render: (_, record) => <>{record.name}</>,
+    },
+    {
+      key: "provider",
+      title: t("common.text.provider"),
+      render: (_, record) => {
+        return (
+          <Space className="max-w-full" size={4}>
+            <Avatar src={accessProvidersMap.get(record.configType)?.icon} size="small" />
+            <Typography.Text>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
+          </Space>
+        );
+      },
+    },
+    {
+      key: "createdAt",
+      title: t("common.text.created_at"),
+      ellipsis: true,
+      render: (_, record) => {
+        return moment(record.created!).format("YYYY-MM-DD HH:mm:ss");
+      },
+    },
+    {
+      key: "updatedAt",
+      title: t("common.text.updated_at"),
+      ellipsis: true,
+      render: (_, record) => {
+        return moment(record.updated!).format("YYYY-MM-DD HH:mm:ss");
+      },
+    },
+    {
+      key: "$action",
+      align: "end",
+      fixed: "right",
+      width: 120,
+      render: (_, record) => (
+        <>
+          <Space size={0}>
+            <AccessEditDialog
+              trigger={
+                <Tooltip title={t("access.action.edit")}>
+                  <Button type="link" icon={<PencilIcon size={16} />} />
+                </Tooltip>
+              }
+              op="edit"
+              data={record}
+            />
+
+            <AccessEditDialog
+              trigger={
+                <Tooltip title={t("access.action.copy")}>
+                  <Button type="link" icon={<CopyIcon size={16} />} />
+                </Tooltip>
+              }
+              op="copy"
+              data={record}
+            />
+
+            <Tooltip title={t("access.action.delete")}>
+              <Button
+                type="link"
+                danger={true}
+                icon={<Trash2Icon size={16} />}
+                onClick={() => {
+                  handleDeleteClick(record);
+                }}
+              />
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  const [tableData, setTableData] = useState<AccessType[]>([]);
+  const [tableTotal, setTableTotal] = useState<number>(0);
+
+  const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+
+  const configContext = useConfigContext();
+
+  const fetchTableData = async () => {
+    if (loading) return;
+    setLoading(true);
+
+    try {
+      const startIndex = (page - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+      const items = configContext.config.accesses.slice(startIndex, endIndex);
+
+      setTableData(items);
+      setTableTotal(configContext.config.accesses.length);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTableData();
+  }, [page, pageSize, configContext.config.accesses]);
+
+  const handleDeleteClick = async (data: AccessType) => {
+    modalApi.confirm({
+      title: t("access.action.delete"),
+      content: t("access.action.delete.confirm"),
+      onOk: async () => {
+        try {
+          const res = await removeAccess(data);
+          configContext.deleteAccess(res.id);
+        } catch (err) {
+          notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
+        }
+      },
+    });
+  };
+
+  // TODO: Empty 样式
+  // TODO: 响应式表格
+
+  return (
+    <>
+      {ModelContextHolder}
+      {NotificationContextHolder}
+
+      <PageHeader
+        title={t("access.page.title")}
+        extra={[
+          <AccessEditDialog
+            key="create"
+            trigger={
+              <Button key="create" type="primary" icon={<PlusIcon size={16} />}>
+                {t("access.action.add")}
+              </Button>
+            }
+            op="add"
+          />,
+        ]}
+      />
+
+      <Table<AccessType>
+        columns={tableColumns}
+        dataSource={tableData}
+        loading={loading}
+        pagination={{
+          current: page,
+          pageSize: pageSize,
+          total: tableTotal,
+          onChange: (page, pageSize) => {
+            setPage(page);
+            setPageSize(pageSize);
+          },
+          onShowSizeChange: (page, pageSize) => {
+            setPage(page);
+            setPageSize(pageSize);
+          },
+        }}
+        rowKey={(record) => record.id}
+      />
+    </>
+  );
+};
+
+export default AccessList;
diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx
index fb1d67e3..4848c98e 100644
--- a/ui/src/pages/certificates/CertificateList.tsx
+++ b/ui/src/pages/certificates/CertificateList.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Button, Space, Table, Tooltip, Typography, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 import { Eye as EyeIcon } from "lucide-react";
+import moment from "moment";
 
 import { Certificate as CertificateType } from "@/domain/certificate";
 import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
@@ -27,7 +28,7 @@ const CertificateList = () => {
     },
     {
       key: "name",
-      title: t("common.text.domain"),
+      title: t("certificate.props.domain"),
       render: (_, record) => <Typography.Text>{record.san}</Typography.Text>,
     },
     {
@@ -47,7 +48,7 @@ const CertificateList = () => {
             )}
 
             <Typography.Text type="secondary">
-              {new Date(record.expireAt).toLocaleString().split(" ")[0]} {t("certificate.props.expiry.text.expire")}
+              {moment(record.expireAt).format("YYYY-MM-DD")} {t("certificate.props.expiry.text.expire")}
             </Typography.Text>
           </Space>
         );
@@ -81,7 +82,7 @@ const CertificateList = () => {
       title: t("common.text.created_at"),
       ellipsis: true,
       render: (_, record) => {
-        return new Date(record.created!).toLocaleString();
+        return moment(record.created!).format("YYYY-MM-DD HH:mm:ss");
       },
     },
     {
@@ -89,16 +90,17 @@ const CertificateList = () => {
       title: t("common.text.updated_at"),
       ellipsis: true,
       render: (_, record) => {
-        return new Date(record.updated!).toLocaleString();
+        return moment(record.updated!).format("YYYY-MM-DD HH:mm:ss");
       },
     },
     {
-      key: "$operations",
+      key: "$action",
       align: "end",
-      width: 100,
+      fixed: "right",
+      width: 120,
       render: (_, record) => (
-        <Space>
-          <Tooltip title={t("common.view")}>
+        <Space size={0}>
+          <Tooltip title={t("certificate.action.view")}>
             <Button
               type="link"
               icon={<EyeIcon size={16} />}
@@ -145,6 +147,7 @@ const CertificateList = () => {
   }, [page, pageSize]);
 
   // TODO: Empty 样式
+  // TODO: 响应式表格
 
   return (
     <>
@@ -153,7 +156,6 @@ const CertificateList = () => {
       <Table<CertificateType>
         columns={tableColumns}
         dataSource={tableData}
-        rowKey={(record) => record.id}
         loading={loading}
         pagination={{
           current: page,
@@ -168,6 +170,7 @@ const CertificateList = () => {
             setPageSize(pageSize);
           },
         }}
+        rowKey={(record) => record.id}
       />
     </>
   );
diff --git a/ui/src/pages/setting/SSLProvider.tsx b/ui/src/pages/setting/SSLProvider.tsx
index f4c07632..fd4abeab 100644
--- a/ui/src/pages/setting/SSLProvider.tsx
+++ b/ui/src/pages/setting/SSLProvider.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 
+import { cn } from "@/components/ui/utils";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
@@ -11,7 +12,6 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { useToast } from "@/components/ui/use-toast";
 import { getErrMessage } from "@/lib/error";
-import { cn } from "@/lib/utils";
 import { SSLProvider as SSLProviderType, SSLProviderSetting, Setting } from "@/domain/settings";
 import { getSetting, update } from "@/repository/settings";
 import { produce } from "immer";
@@ -443,4 +443,3 @@ const SSLProviderGtsForm = () => {
 };
 
 export default SSLProvider;
-
diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx
index fafcea6e..034db9a1 100644
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -10,10 +10,10 @@ import NodeRender from "@/components/workflow/NodeRender";
 import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
 import WorkflowLog from "@/components/workflow/WorkflowLog";
 
+import { cn } from "@/components/ui/utils";
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
 import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
 import { getErrMessage } from "@/lib/error";
-import { cn } from "@/lib/utils";
 import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
 import { ArrowLeft } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
diff --git a/ui/src/pages/workflows/WorkflowList.tsx b/ui/src/pages/workflows/WorkflowList.tsx
index 14407c39..301ac155 100644
--- a/ui/src/pages/workflows/WorkflowList.tsx
+++ b/ui/src/pages/workflows/WorkflowList.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Button, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 import { Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
+import moment from "moment";
 
 import { Workflow as WorkflowType } from "@/domain/workflow";
 import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow, type WorkflowListReq } from "@/repository/workflow";
@@ -68,7 +69,7 @@ const WorkflowList = () => {
             <Switch
               checked={enabled}
               onChange={() => {
-                handleEnabledChange(record.id);
+                handleEnabledChange(record);
               }}
             />
           </>
@@ -88,7 +89,7 @@ const WorkflowList = () => {
       title: t("common.text.created_at"),
       ellipsis: true,
       render: (_, record) => {
-        return new Date(record.created!).toLocaleString();
+        return moment(record.created!).format("YYYY-MM-DD HH:mm:ss");
       },
     },
     {
@@ -96,15 +97,16 @@ const WorkflowList = () => {
       title: t("common.text.updated_at"),
       ellipsis: true,
       render: (_, record) => {
-        return new Date(record.updated!).toLocaleString();
+        return moment(record.updated!).format("YYYY-MM-DD HH:mm:ss");
       },
     },
     {
-      key: "$operations",
+      key: "$action",
       align: "end",
-      width: 100,
+      fixed: "right",
+      width: 120,
       render: (_, record) => (
-        <Space>
+        <Space size={0}>
           <Tooltip title={t("common.edit")}>
             <Button
               type="link"
@@ -120,7 +122,7 @@ const WorkflowList = () => {
               danger={true}
               icon={<Trash2Icon size={16} />}
               onClick={() => {
-                handleDeleteClick(record.id);
+                handleDeleteClick(record);
               }}
             />
           </Tooltip>
@@ -161,13 +163,16 @@ const WorkflowList = () => {
     fetchTableData();
   }, [page, pageSize]);
 
-  const handleEnabledChange = async (id: string) => {
+  const handleEnabledChange = async (workflow: WorkflowType) => {
     try {
-      const resp = await saveWorkflow({ id, enabled: !tableData.find((item) => item.id === id)?.enabled });
+      const resp = await saveWorkflow({
+        id: workflow.id,
+        enabled: !tableData.find((item) => item.id === workflow.id)?.enabled,
+      });
       if (resp) {
         setTableData((prev) => {
           return prev.map((item) => {
-            if (item.id === id) {
+            if (item.id === workflow.id) {
               return resp;
             }
             return item;
@@ -179,15 +184,15 @@ const WorkflowList = () => {
     }
   };
 
-  const handleDeleteClick = (id: string) => {
+  const handleDeleteClick = (workflow: WorkflowType) => {
     modalApi.confirm({
       title: t("workflow.action.delete.alert.title"),
       content: t("workflow.action.delete.alert.content"),
       onOk: async () => {
         try {
-          const resp = await removeWorkflow(id);
+          const resp = await removeWorkflow(workflow);
           if (resp) {
-            setTableData((prev) => prev.filter((item) => item.id !== id));
+            setTableData((prev) => prev.filter((item) => item.id !== workflow.id));
           }
         } catch (err) {
           notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
@@ -201,9 +206,13 @@ const WorkflowList = () => {
   };
 
   // TODO: Empty 样式
+  // TODO: 响应式表格
 
   return (
     <>
+      {ModelContextHolder}
+      {NotificationContextHolder}
+
       <PageHeader
         title={t("workflow.page.title")}
         extra={[
@@ -223,7 +232,6 @@ const WorkflowList = () => {
       <Table<WorkflowType>
         columns={tableColumns}
         dataSource={tableData}
-        rowKey={(record) => record.id}
         loading={loading}
         pagination={{
           current: page,
@@ -238,10 +246,8 @@ const WorkflowList = () => {
             setPageSize(pageSize);
           },
         }}
+        rowKey={(record) => record.id}
       />
-
-      {ModelContextHolder}
-      {NotificationContextHolder}
     </>
   );
 };
diff --git a/ui/src/repository/access.ts b/ui/src/repository/access.ts
index 0f82ebcd..8586c04d 100644
--- a/ui/src/repository/access.ts
+++ b/ui/src/repository/access.ts
@@ -1,6 +1,6 @@
 import moment from "moment";
 
-import { Access } from "@/domain/access";
+import { type Access } from "@/domain/access";
 import { getPocketBase } from "./pocketbase";
 
 export const list = async () => {
diff --git a/ui/src/repository/certificate.ts b/ui/src/repository/certificate.ts
index a5c69365..9bafc0f7 100644
--- a/ui/src/repository/certificate.ts
+++ b/ui/src/repository/certificate.ts
@@ -1,6 +1,6 @@
 import { type RecordListOptions } from "pocketbase";
 
-import { Certificate } from "@/domain/certificate";
+import { type Certificate } from "@/domain/certificate";
 import { getTimeAfter } from "@/lib/time";
 import { getPocketBase } from "./pocketbase";
 
diff --git a/ui/src/repository/workflow.ts b/ui/src/repository/workflow.ts
index 8a7d2d5e..d302d9e2 100644
--- a/ui/src/repository/workflow.ts
+++ b/ui/src/repository/workflow.ts
@@ -37,8 +37,8 @@ export const save = async (data: Record<string, string | boolean | WorkflowNode>
   return await getPocketBase().collection("workflow").create<Workflow>(data);
 };
 
-export const remove = async (id: string) => {
-  return await getPocketBase().collection("workflow").delete(id);
+export const remove = async (workflow: Workflow) => {
+  return await getPocketBase().collection("workflow").delete(workflow.id);
 };
 
 type WorkflowLogsReq = {
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index 1897e29a..21c3e0cb 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -1,15 +1,15 @@
 import { createHashRouter } from "react-router-dom";
 
-import DashboardLayout from "./pages/DashboardLayout";
-import Access from "./pages/access/Access";
-import Login from "./pages/login/Login";
 import LoginLayout from "./pages/LoginLayout";
-import Password from "./pages/setting/Password";
+import DashboardLayout from "./pages/DashboardLayout";
 import SettingLayout from "./pages/SettingLayout";
-import Dashboard from "./pages/dashboard/Dashboard";
+import Login from "./pages/login/Login";
 import Account from "./pages/setting/Account";
+import Password from "./pages/setting/Password";
 import Notify from "./pages/setting/Notify";
 import SSLProvider from "./pages/setting/SSLProvider";
+import Dashboard from "./pages/dashboard/Dashboard";
+import AccessList from "./pages/accesses/AccessList";
 import WorkflowList from "./pages/workflows/WorkflowList";
 import WorkflowDetail from "./pages/workflows/WorkflowDetail";
 import CertificateList from "./pages/certificates/CertificateList";
@@ -24,17 +24,17 @@ export const router = createHashRouter([
         element: <Dashboard />,
       },
       {
-        path: "/access",
-        element: <Access />,
-      },
-      {
-        path: "/workflows",
-        element: <WorkflowList />,
+        path: "/accesses",
+        element: <AccessList />,
       },
       {
         path: "/certificates",
         element: <CertificateList />,
       },
+      {
+        path: "/workflows",
+        element: <WorkflowList />,
+      },
       {
         path: "/setting",
         element: <SettingLayout />,