Dashboard Redesign (#48)

* feat: add user_template setting

* style: header

* style: page padding

* style: header

* feat: header now time

* style: login page

* feat: nav indicator

* style: button inset shadow

* style: footer text size

* feat: header show login_ip

* fix: error toast

* fix: frontend_templates setting

* fix: lint

* feat: pr auto format

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>

src/components/nat.tsx

@@ -1,3 +1,4 @@
+import { createNAT, updateNAT } from "@/api/nat"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -9,7 +10,6 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
 import {
     Form,
     FormControl,
@@ -18,21 +18,20 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { ModelNAT } from "@/types"
-import { useState } from "react"
-import { KeyedMutator } from "swr"
 import { IconButton } from "@/components/xui/icon-button"
-import { createNAT, updateNAT } from "@/api/nat"
-
-import { useTranslation } from "react-i18next";
+import { ModelNAT } from "@/types"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { KeyedMutator } from "swr"
+import { z } from "zod"
 
 interface NATCardProps {
-    data?: ModelNAT;
-    mutate: KeyedMutator<ModelNAT[]>;
+    data?: ModelNAT
+    mutate: KeyedMutator<ModelNAT[]>
 }
 
 const natFormSchema = z.object({
@@ -40,47 +39,44 @@ const natFormSchema = z.object({
     server_id: z.coerce.number().int(),
     host: z.string(),
     domain: z.string(),
-});
+})
 
 export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
-    const { t } = useTranslation();
+    const { t } = useTranslation()
     const form = useForm<z.infer<typeof natFormSchema>>({
         resolver: zodResolver(natFormSchema),
-        defaultValues: data ? data : {
-            name: "",
-            server_id: 0,
-            host: "",
-            domain: "",
-        },
+        defaultValues: data
+            ? data
+            : {
+                  name: "",
+                  server_id: 0,
+                  host: "",
+                  domain: "",
+              },
         resetOptions: {
             keepDefaultValues: false,
-        }
+        },
     })
 
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(false)
 
     const onSubmit = async (values: z.infer<typeof natFormSchema>) => {
-        data?.id ? await updateNAT(data.id, values) : await createNAT(values);
-        setOpen(false);
-        await mutate();
-        form.reset();
+        data?.id ? await updateNAT(data.id, values) : await createNAT(values)
+        setOpen(false)
+        await mutate()
+        form.reset()
     }
 
     return (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
-                {data
-                    ?
-                    <IconButton variant="outline" icon="edit" />
-                    :
-                    <IconButton icon="plus" />
-                }
+                {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>{data?t("EditNAT"):t("CreateNAT")}</DialogTitle>
+                            <DialogTitle>{data ? t("EditNAT") : t("CreateNAT")}</DialogTitle>
                             <DialogDescription />
                         </DialogHeader>
                         <Form {...form}>
@@ -92,10 +88,7 @@ export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
                                         <FormItem>
                                             <FormLabel>{t("Name")}</FormLabel>
                                             <FormControl>
-                                                <Input
-                                                    placeholder="My NAT Profile"
-                                                    {...field}
-                                                />
+                                                <Input placeholder="My NAT Profile" {...field} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -108,11 +101,7 @@ export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
                                         <FormItem>
                                             <FormLabel>{t("Server")} ID</FormLabel>
                                             <FormControl>
-                                                <Input
-                                                    type="number"
-                                                    placeholder="1"
-                                                    {...field}
-                                                />
+                                                <Input type="number" placeholder="1" {...field} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -156,7 +145,9 @@ export const NATCard: React.FC<NATCardProps> = ({ data, mutate }) => {
                                             {t("Close")}
                                         </Button>
                                     </DialogClose>
-                                    <Button type="submit" className="my-2">{t("Confirm")}</Button>
+                                    <Button type="submit" className="my-2">
+                                        {t("Confirm")}
+                                    </Button>
                                 </DialogFooter>
                             </form>
                         </Form>