Change i18n package to paraglideJs

also refactor auth provider
2026-01-07 22:26:48 +07:00
parent 391acd282b
commit d49c37848f
47 changed files with 887 additions and 1060 deletions
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,7 @@
-import { useSession } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
 import { Separator } from '@base-ui/react/separator';
 import { BellIcon } from '@phosphor-icons/react';
-import { useTranslation } from 'react-i18next';
+import { useAuth } from './auth/auth-provider';
 import RouterBreadcrumb from './sidebar/RouterBreadcrumb';
 import { Badge } from './ui/badge';
 import { Button } from './ui/button';
@@ -17,8 +17,7 @@ import {
 import { SidebarTrigger } from './ui/sidebar';

 export default function Header() {
-  const { t } = useTranslation();
-  const { data: session } = useSession();
+  const { data: session } = useAuth();

  return (
    <>
@@ -50,7 +49,7 @@ export default function Header() {
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-sm min-w-56 rounded-lg">
                <DropdownMenuLabel className="font-bold text-black">
-                  {t('ui.label_notifications')}
+                  {m.ui_label_notifications()}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
@@ -66,7 +65,7 @@ export default function Header() {
                <DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
-                    {t('ui.view_all_notifications')}
+                    {m.ui_view_all_notifications()}
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
--- a/src/components/auth/auth-provider.tsx
+++ b/src/components/auth/auth-provider.tsx
@@ -0,0 +1,40 @@
+import { ClientSession, useSession } from '@/lib/auth-client';
+import { BetterFetchError } from 'better-auth/client';
+import { createContext, useContext, useMemo } from 'react';
+
+export type UserContext = {
+  data: ClientSession;
+  isAuth: boolean;
+  isAdmin: boolean;
+  isPending: boolean;
+  error: BetterFetchError | null;
+};
+
+const AuthContext = createContext<UserContext | null>(null);
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const { data: session, isPending, error } = useSession();
+
+  const contextSession: UserContext = useMemo(
+    () => ({
+      data: session as ClientSession,
+      isPending,
+      error,
+      isAuth: !!session,
+      isAdmin: session?.user?.role ? session.user.role === 'admin' : false,
+    }),
+    [session],
+  );
+
+  return (
+    <AuthContext.Provider value={contextSession}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return ctx;
+}
--- a/src/components/avatar/AvatarUser.tsx
+++ b/src/components/avatar/AvatarUser.tsx
@@ -1,5 +1,5 @@
-import { useSession } from '@/lib/auth-client';
 import { cn } from '@/lib/utils';
+import { useAuth } from '../auth/auth-provider';
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import RoleRing from './RoleRing';

@@ -9,10 +9,12 @@ interface AvatarUserProps {
 }

 const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
-  const { data: session } = useSession();
+  const { data: session } = useAuth();
  const imagePath = session?.user?.image
-    ? `./data/avatar/${session?.user?.image}`
+    ? new URL(`../../../data/avatar/${session?.user?.image}`, import.meta.url)
+        .href
    : undefined;
+
  const shortName = session?.user?.name
    ?.split(' ')
    .slice(0, 2)
--- a/src/components/avatar/RoleBadge.tsx
+++ b/src/components/avatar/RoleBadge.tsx
@@ -1,5 +1,5 @@
+import { m } from '@/paraglide/messages';
 import { VariantProps } from 'class-variance-authority';
-import { useTranslation } from 'react-i18next';
 import { Badge, badgeVariants } from '../ui/badge';

 type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
@@ -10,8 +10,6 @@ type RoleProps = {
 };

 const RoleBadge = ({ type, className }: RoleProps) => {
-  const { t } = useTranslation();
-
  // List all valid badge variant keys
  const validBadgeVariants: BadgeVariant[] = [
    'default',
@@ -27,10 +25,10 @@ const RoleBadge = ({ type, className }: RoleProps) => {
  ];

  const LABEL_VALUE = {
-    admin: t('roleTags.admin'),
-    user: t('roleTags.user'),
-    member: t('roleTags.member'),
-    owner: t('roleTags.owner'),
+    admin: m.role_tags_admin(),
+    user: m.role_tags_user(),
+    member: m.role_tags_member(),
+    owner: m.role_tags_owner(),
  };

  // Determine the actual variant to apply.
--- a/src/components/form/change-password-form.tsx
+++ b/src/components/form/change-password-form.tsx
@@ -1,30 +1,30 @@
-import { authClient } from '@/lib/auth-client'
-import i18n from '@/lib/i18n'
-import { KeyIcon } from '@phosphor-icons/react'
-import { useForm } from '@tanstack/react-form'
-import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
-import z from 'zod'
-import { Button } from '../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'
-import { Input } from '../ui/input'
+import { authClient } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
+import { KeyIcon } from '@phosphor-icons/react';
+import { useForm } from '@tanstack/react-form';
+import i18next from 'i18next';
+import { toast } from 'sonner';
+import z from 'zod';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';

 const ChangePasswordFormSchema = z
  .object({
    currentPassword: z.string().nonempty(
-      i18n.t('changePassword.messages.is_required', {
-        field: i18n.t('changePassword.form.current_password'),
+      m.common_is_required({
+        field: m.change_password_form_current_password(),
      }),
    ),
    newPassword: z.string().nonempty(
-      i18n.t('changePassword.messages.is_required', {
-        field: i18n.t('changePassword.form.new_password'),
+      m.common_is_required({
+        field: m.change_password_form_new_password(),
      }),
    ),
    confirmPassword: z.string().nonempty(
-      i18n.t('changePassword.messages.is_required', {
-        field: i18n.t('changePassword.form.confirm_password'),
+      m.common_is_required({
+        field: m.change_password_form_confirm_password(),
      }),
    ),
  })
@@ -33,22 +33,20 @@ const ChangePasswordFormSchema = z
      ctx.addIssue({
        path: ['confirmPassword'],
        code: z.ZodIssueCode.custom,
-        message: i18n.t('changePassword.messages.password_not_match'),
-      })
+        message: m.change_password_messages_password_not_match(),
+      });
    }
-  })
+  });

-type ChangePassword = z.infer<typeof ChangePasswordFormSchema>
+type ChangePassword = z.infer<typeof ChangePasswordFormSchema>;

 const defaultValues: ChangePassword = {
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
-}
+};

 const ChangePasswordForm = () => {
-  const { t } = useTranslation()
-
  const form = useForm({
    defaultValues,
    validators: {
@@ -64,33 +62,40 @@ const ChangePasswordForm = () => {
        },
        {
          onSuccess: () => {
-            form.reset()
-            toast.success(t('changePassword.messages.change_password_success'))
+            form.reset();
+            toast.success(
+              m.change_password_messages_change_password_success(),
+              {
+                richColors: true,
+              },
+            );
          },
          onError: (ctx) => {
-            console.log(ctx.error.code)
-            toast.error(t(`backend.${ctx.error.code}` as any))
+            console.log(ctx.error.code);
+            toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
+              richColors: true,
+            });
          },
        },
-      )
+      );
    },
-  })
+  });

  return (
    <Card className="@container/card">
      <CardHeader>
        <CardTitle className="text-xl flex items-center gap-2">
          <KeyIcon size={20} />
-          {t('changePassword.ui.title')}
+          {m.change_password_ui_title()}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <form
          id="change-password-form"
          onSubmit={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            form.handleSubmit()
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
          }}
        >
          <FieldGroup>
@@ -98,11 +103,11 @@ const ChangePasswordForm = () => {
              name="currentPassword"
              children={(field) => {
                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid
+                  field.state.meta.isTouched && !field.state.meta.isValid;
                return (
                  <Field data-invalid={isInvalid}>
                    <FieldLabel htmlFor={field.name}>
-                      {t('changePassword.form.current_password')}:
+                      {m.change_password_form_current_password()}:
                    </FieldLabel>
                    <Input
                      id={field.name}
@@ -117,18 +122,18 @@ const ChangePasswordForm = () => {
                      <FieldError errors={field.state.meta.errors} />
                    )}
                  </Field>
-                )
+                );
              }}
            />
            <form.Field
              name="newPassword"
              children={(field) => {
                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid
+                  field.state.meta.isTouched && !field.state.meta.isValid;
                return (
                  <Field data-invalid={isInvalid}>
                    <FieldLabel htmlFor={field.name}>
-                      {t('changePassword.form.new_password')}:
+                      {m.change_password_form_new_password()}:
                    </FieldLabel>
                    <Input
                      id={field.name}
@@ -143,18 +148,18 @@ const ChangePasswordForm = () => {
                      <FieldError errors={field.state.meta.errors} />
                    )}
                  </Field>
-                )
+                );
              }}
            />
            <form.Field
              name="confirmPassword"
              children={(field) => {
                const isInvalid =
-                  field.state.meta.isTouched && !field.state.meta.isValid
+                  field.state.meta.isTouched && !field.state.meta.isValid;
                return (
                  <Field data-invalid={isInvalid}>
                    <FieldLabel htmlFor={field.name}>
-                      {t('changePassword.form.confirm_password')}:
+                      {m.change_password_form_confirm_password()}:
                    </FieldLabel>
                    <Input
                      id={field.name}
@@ -169,17 +174,17 @@ const ChangePasswordForm = () => {
                      <FieldError errors={field.state.meta.errors} />
                    )}
                  </Field>
-                )
+                );
              }}
            />
            <Field>
-              <Button type="submit">{t('ui.change_password_btn')}</Button>
+              <Button type="submit">{m.ui_change_password_btn()}</Button>
            </Field>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
-  )
-}
+  );
+};

-export default ChangePasswordForm
+export default ChangePasswordForm;
--- a/src/components/form/profile-form.tsx
+++ b/src/components/form/profile-form.tsx
@@ -1,12 +1,14 @@
-import { authClient, useSession } from '@/lib/auth-client';
+import { authClient } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
 import { uploadProfileImage } from '@/service/profile.api';
 import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
 import { UserCircleIcon } from '@phosphor-icons/react';
 import { useForm } from '@tanstack/react-form';
 import { useQueryClient } from '@tanstack/react-query';
+import i18next from 'i18next';
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
+import { useAuth } from '../auth/auth-provider';
 import AvatarUser from '../avatar/AvatarUser';
 import RoleBadge from '../avatar/RoleBadge';
 import { Button } from '../ui/button';
@@ -20,9 +22,8 @@ const defaultValues: ProfileInput = {
 };

 const ProfileForm = () => {
-  const { t } = useTranslation();
  const fileInputRef = useRef<HTMLInputElement>(null);
-  const { data: session, isPending } = useSession();
+  const { data: session, isPending } = useAuth();
  const queryClient = useQueryClient();

  const form = useForm({
@@ -61,10 +62,14 @@ const ProfileForm = () => {
              queryClient.refetchQueries({
                queryKey: ['auth', 'session'],
              });
-              toast.success(t('profile.messages.update_success'));
+              toast.success(m.profile_messages_update_success(), {
+                richColors: true,
+              });
            },
            onError: (ctx) => {
-              toast.error(t(`backend.${ctx.error.code}` as any));
+              toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
+                richColors: true,
+              });
            },
          },
        );
@@ -80,7 +85,7 @@ const ProfileForm = () => {
      <CardHeader>
        <CardTitle className="text-xl flex items-center gap-2">
          <UserCircleIcon size={20} />
-          {t('profile.ui.title')}
+          {m.profile_ui_title()}
        </CardTitle>
      </CardHeader>
      <CardContent>
@@ -130,7 +135,7 @@ const ProfileForm = () => {
                return (
                  <Field data-invalid={isInvalid}>
                    <FieldLabel htmlFor={field.name}>
-                      {t('profile.form.name')}
+                      {m.profile_form_name()}
                    </FieldLabel>
                    <Input
                      id={field.name}
@@ -148,7 +153,7 @@ const ProfileForm = () => {
              }}
            />
            <Field>
-              <FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel>
+              <FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
              <Input
                id="email"
                name="email"
@@ -158,13 +163,13 @@ const ProfileForm = () => {
              />
            </Field>
            <Field>
-              <FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
+              <FieldLabel htmlFor="name">{m.profile_form_role()}</FieldLabel>
              <div className="flex gap-2">
                <RoleBadge type={session?.user?.role} />
              </div>
            </Field>
            <Field>
-              <Button type="submit">{t('ui.update_btn')}</Button>
+              <Button type="submit">{m.ui_update_btn()}</Button>
            </Field>
          </FieldGroup>
        </form>
--- a/src/components/form/settings-form.tsx
+++ b/src/components/form/settings-form.tsx
@@ -1,33 +1,24 @@
+import { m } from '@/paraglide/messages';
 import { settingQueries } from '@/service/queries';
 import { updateSettings } from '@/service/setting.api';
 import { settingSchema, SettingsInput } from '@/service/setting.schema';
 import { GearIcon } from '@phosphor-icons/react';
 import { useForm } from '@tanstack/react-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
 import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
 import { Input } from '../ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select';
 import { Textarea } from '../ui/textarea';

 const defaultValues: SettingsInput = {
-  site_language: '',
  site_name: '',
  site_description: '',
  site_keywords: '',
 };

 const SettingsForm = () => {
-  const { t } = useTranslation();
  const queryClient = useQueryClient();

  const { data: settings } = useQuery(settingQueries.list());
@@ -35,8 +26,11 @@ const SettingsForm = () => {
  const updateMutation = useMutation({
    mutationFn: updateSettings,
    onSuccess: () => {
+      // setLocale(variables.data.site_language as Locale);
      queryClient.invalidateQueries({ queryKey: settingQueries.all });
-      toast.success(t('settings.messages.update_success'));
+      toast.success(m.settings_messages_update_success(), {
+        richColors: true,
+      });
    },
  });

@@ -46,7 +40,6 @@ const SettingsForm = () => {
      site_name: settings?.site_name?.value || '',
      site_description: settings?.site_description?.value || '',
      site_keywords: settings?.site_keywords?.value || '',
-      site_language: settings?.site_language?.value || '',
    },
    validators: {
      onSubmit: settingSchema,
@@ -62,7 +55,7 @@ const SettingsForm = () => {
      <CardHeader>
        <CardTitle className="text-xl flex items-center gap-2">
          <GearIcon size={20} />
-          {t('settings.ui.title')}
+          {m.settings_ui_title()}
        </CardTitle>
      </CardHeader>
      <CardContent>
@@ -83,7 +76,7 @@ const SettingsForm = () => {
                return (
                  <Field data-invalid={isInvalid} className="col-span-2">
                    <FieldLabel htmlFor={field.name}>
-                      {t('settings.form.name')}
+                      {m.settings_form_name()}
                    </FieldLabel>
                    <Input
                      id={field.name}
@@ -108,7 +101,7 @@ const SettingsForm = () => {
                return (
                  <Field data-invalid={isInvalid} className="col-span-2">
                    <FieldLabel htmlFor={field.name}>
-                      {t('settings.form.description')}
+                      {m.settings_form_description()}
                    </FieldLabel>
                    <Textarea
                      id={field.name}
@@ -134,7 +127,7 @@ const SettingsForm = () => {
                return (
                  <Field data-invalid={isInvalid} className="col-span-2">
                    <FieldLabel htmlFor={field.name}>
-                      {t('settings.form.keywords')}
+                      {m.settings_form_keywords()}
                    </FieldLabel>
                    <Textarea
                      id={field.name}
@@ -152,7 +145,7 @@ const SettingsForm = () => {
                );
              }}
            />
-            <form.Field
+            {/* <form.Field
              name="site_language"
              children={(field) => {
                const isInvalid =
@@ -160,7 +153,7 @@ const SettingsForm = () => {
                return (
                  <Field data-invalid={isInvalid} className="col-span-2">
                    <FieldLabel htmlFor={field.name}>
-                      {t('settings.form.language')}
+                      {m.settings_form_language()}
                    </FieldLabel>
                    <Select
                      name={field.name}
@@ -182,9 +175,9 @@ const SettingsForm = () => {
                  </Field>
                );
              }}
-            />
+            /> */}
            <Field>
-              <Button type="submit">{t('ui.update_btn')}</Button>
+              <Button type="submit">{m.ui_update_btn()}</Button>
            </Field>
          </FieldGroup>
        </form>
--- a/src/components/form/signin-form.tsx
+++ b/src/components/form/signin-form.tsx
@@ -1,38 +1,33 @@
-import { authClient } from '@/lib/auth-client'
-import i18n from '@/lib/i18n'
-import { useForm } from '@tanstack/react-form'
-import { useQueryClient } from '@tanstack/react-query'
-import { createLink, useNavigate } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
-import z from 'zod'
-import { Button } from '../ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
-import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field'
-import { Input } from '../ui/input'
+import { authClient } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
+import { useForm } from '@tanstack/react-form';
+import { useQueryClient } from '@tanstack/react-query';
+import { createLink, useNavigate } from '@tanstack/react-router';
+import i18next from 'i18next';
+import { toast } from 'sonner';
+import z from 'zod';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';

 const SignInFormSchema = z.object({
  email: z
    .string()
-    .nonempty(
-      i18n.t('loginPage.messages.is_required', {
-        field: i18n.t('loginPage.form.email'),
-      }),
-    )
-    .email(i18n.t('loginPage.messages.email_invalid')),
+    .nonempty(m.common_is_required({ field: m.login_page_form_email }))
+    .email(m.login_page_messages_email_invalid()),
  password: z.string().nonempty(
-    i18n.t('loginPage.messages.is_required', {
-      field: i18n.t('loginPage.form.password'),
+    m.common_is_required({
+      field: m.login_page_form_password(),
    }),
  ),
-})
+});

-const ButtonLink = createLink(Button)
+const ButtonLink = createLink(Button);

 const SignInForm = () => {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
  const form = useForm({
    defaultValues: {
      email: '',
@@ -50,24 +45,28 @@ const SignInForm = () => {
        },
        {
          onSuccess: () => {
-            navigate({ to: '/' })
+            navigate({ to: '/' });
            queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
-            toast.success(t('loginPage.messages.login_success'))
+            toast.success(m.login_page_messages_login_success(), {
+              richColors: true,
+            });
          },
          onError: (ctx) => {
-            toast.error(t(`backend.${ctx.error.code}` as any))
+            toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
+              richColors: true,
+            });
          },
        },
-      )
+      );
    },
-  })
+  });

  return (
    <div className="flex flex-col gap-6">
      <Card>
        <CardHeader className="text-center">
          <CardTitle className="text-xl">
-            {t('loginPage.ui.welcome_back')}
+            {m.login_page_ui_welcome_back()}
          </CardTitle>
          {/* <CardDescription>Login with your Google account</CardDescription> */}
        </CardHeader>
@@ -75,8 +74,8 @@ const SignInForm = () => {
          <form
            id="sign-in-form"
            onSubmit={(e) => {
-              e.preventDefault()
-              form.handleSubmit()
+              e.preventDefault();
+              form.handleSubmit();
            }}
          >
            <FieldGroup>
@@ -96,11 +95,11 @@ const SignInForm = () => {
                name="email"
                children={(field) => {
                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
+                    field.state.meta.isTouched && !field.state.meta.isValid;
                  return (
                    <Field data-invalid={isInvalid}>
                      <FieldLabel htmlFor={field.name}>
-                        {t('loginPage.form.email')}
+                        {m.login_page_form_email()}
                      </FieldLabel>
                      <Input
                        id={field.name}
@@ -117,18 +116,18 @@ const SignInForm = () => {
                        <FieldError errors={field.state.meta.errors} />
                      )}
                    </Field>
-                  )
+                  );
                }}
              />
              <form.Field
                name="password"
                children={(field) => {
                  const isInvalid =
-                    field.state.meta.isTouched && !field.state.meta.isValid
+                    field.state.meta.isTouched && !field.state.meta.isValid;
                  return (
                    <Field data-invalid={isInvalid}>
                      <FieldLabel htmlFor={field.name}>
-                        {t('loginPage.form.password')}
+                        {m.login_page_form_password()}
                      </FieldLabel>
                      <Input
                        id={field.name}
@@ -143,13 +142,13 @@ const SignInForm = () => {
                        <FieldError errors={field.state.meta.errors} />
                      )}
                    </Field>
-                  )
+                  );
                }}
              />
              <Field>
-                <Button type="submit">{t('ui.login_btn')}</Button>
+                <Button type="submit">{m.ui_login_btn()}</Button>
                <ButtonLink to="/" variant="outline">
-                  {t('ui.cancel_btn')}
+                  {m.ui_cancel_btn()}
                </ButtonLink>
                {/* <FieldDescription className="text-center">
                  {t('loginPage.ui.not_have_account')}{' '}
@@ -165,7 +164,7 @@ const SignInForm = () => {
        and <a href="#">Privacy Policy</a>.
      </FieldDescription> */}
    </div>
-  )
-}
+  );
+};

-export default SignInForm
+export default SignInForm;
--- a/src/components/form/signup-form.tsx
+++ b/src/components/form/signup-form.tsx
@@ -1,20 +1,19 @@
-import { createLink, Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { Button } from '../ui/button'
+import { m } from '@/paraglide/messages';
+import { createLink, Link } from '@tanstack/react-router';
+import { Button } from '../ui/button';
 import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
-} from '../ui/card'
-import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field'
-import { Input } from '../ui/input'
+} from '../ui/card';
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';

-const ButtonLink = createLink(Button)
+const ButtonLink = createLink(Button);

 const SignupForm = () => {
-  const { t } = useTranslation()
  return (
    <div className="flex flex-col gap-6">
      <Card>
@@ -59,11 +58,11 @@ const SignupForm = () => {
              <Field>
                <Button type="submit">Create Account</Button>
                <ButtonLink to="/" variant="outline">
-                  {t('ui.cancel_btn')}
+                  {m.ui_cancel_btn()}
                </ButtonLink>
                <FieldDescription className="text-center">
                  Already have an account?{' '}
-                  <Link to="/sign-in">{t('ui.login_btn')}</Link>
+                  <Link to="/sign-in">{m.ui_login_btn()}</Link>
                </FieldDescription>
              </Field>
            </FieldGroup>
@@ -75,7 +74,7 @@ const SignupForm = () => {
        and <a href="#">Privacy Policy</a>.
      </FieldDescription> */}
    </div>
-  )
-}
+  );
+};

-export default SignupForm
+export default SignupForm;
--- a/src/components/sidebar/RouterBreadcrumb.tsx
+++ b/src/components/sidebar/RouterBreadcrumb.tsx
@@ -17,24 +17,27 @@ export type BreadcrumbValue =
 const RouterBreadcrumb = () => {
  const matches = useMatches()

+  console.log(matches);
+
  const breadcrumbs = matches.flatMap((match) => {
-    const staticData = match.staticData
-    if (!staticData?.breadcrumb) return []
+    const staticData = match.staticData;
+    console.log(staticData);
+    if (!staticData?.breadcrumb) return [];

    const breadcrumbValue =
      typeof staticData.breadcrumb === 'function'
        ? staticData.breadcrumb(match)
-        : staticData.breadcrumb
+        : staticData.breadcrumb;

    const items = Array.isArray(breadcrumbValue)
      ? breadcrumbValue
-      : [breadcrumbValue]
+      : [breadcrumbValue];

    return items.map((item) => ({
      label: item,
      path: match.pathname,
-    }))
-  })
+    }));
+  });

  return (
    <Breadcrumb>
--- a/src/components/sidebar/nav-main.tsx
+++ b/src/components/sidebar/nav-main.tsx
@@ -1,6 +1,6 @@
+import { m } from '@/paraglide/messages';
 import { GaugeIcon, GearIcon, HouseIcon } from '@phosphor-icons/react';
 import { createLink } from '@tanstack/react-router';
-import { useTranslation } from 'react-i18next';
 import AdminShow from '../auth/AdminShow';
 import AuthShow from '../auth/AuthShow';
 import {
@@ -13,8 +13,6 @@ import {
 const SidebarMenuButtonLink = createLink(SidebarMenuButton);

 const NavMain = () => {
-  const { t } = useTranslation();
-
  return (
    <SidebarGroup>
      <SidebarMenu>
@@ -22,28 +20,28 @@ const NavMain = () => {
          <SidebarMenuButtonLink
            to="/"
            className="cursor-pointer"
-            tooltip={t('nav.home')}
+            tooltip={m.nav_home()}
          >
            <HouseIcon size={24} />
-            {t('nav.home')}
+            {m.nav_home()}
          </SidebarMenuButtonLink>
          <AuthShow>
            <SidebarMenuButtonLink
              to="/dashboard"
              className="cursor-pointer"
-              tooltip={t('nav.dashboard')}
+              tooltip={m.nav_dashboard()}
            >
              <GaugeIcon size={24} />
-              {t('nav.dashboard')}
+              {m.nav_dashboard()}
            </SidebarMenuButtonLink>
            <AdminShow>
              <SidebarMenuButtonLink
                to="/settings"
                className="cursor-pointer"
-                tooltip={t('nav.settings')}
+                tooltip={m.nav_settings()}
              >
                <GearIcon size={24} />
-                {t('nav.settings')}
+                {m.nav_settings()}
              </SidebarMenuButtonLink>
            </AdminShow>
          </AuthShow>
--- a/src/components/sidebar/nav-user.tsx
+++ b/src/components/sidebar/nav-user.tsx
@@ -1,4 +1,5 @@
-import { authClient, useSession } from '@/lib/auth-client';
+import { authClient } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
 import {
  DotsThreeVerticalIcon,
  KeyIcon,
@@ -8,8 +9,9 @@ import {
 } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { createLink, Link, useNavigate } from '@tanstack/react-router';
-import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import { toast } from 'sonner';
+import { useAuth } from '../auth/auth-provider';
 import AvatarUser from '../avatar/AvatarUser';
 import RoleBadge from '../avatar/RoleBadge';
 import {
@@ -31,11 +33,10 @@ import {
 const SidebarMenuButtonLink = createLink(SidebarMenuButton);

 const NavUser = () => {
-  const { t } = useTranslation();
  const navigate = useNavigate();
  const { isMobile } = useSidebar();
  const queryClient = useQueryClient();
-  const { data: session } = useSession();
+  const { data: session } = useAuth();

  const signout = async () => {
    await authClient.signOut({
@@ -43,10 +44,14 @@ const NavUser = () => {
        onSuccess: () => {
          navigate({ to: '/' });
          queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
-          toast.success(t('loginPage.messages.logout_success'));
+          toast.success(m.login_page_messages_login_success(), {
+            richColors: true,
+          });
        },
        onError: (ctx) => {
-          toast.error(t(`backend.${ctx.error.code}` as any));
+          toast.error(i18next.t(`backend_${ctx.error.code}` as any), {
+            richColors: true,
+          });
        },
      },
    });
@@ -62,7 +67,7 @@ const NavUser = () => {
            tooltip="Sign In"
          >
            <SignInIcon size={28} />
-            {t('ui.login_btn')}
+            {m.ui_login_btn()}
          </SidebarMenuButtonLink>
        </SidebarMenuItem>
      </SidebarMenu>
@@ -76,14 +81,14 @@ const NavUser = () => {
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground cursor-pointer"
-              tooltip={session?.user?.name}
+              tooltip={session.user.name}
            >
              <AvatarUser className="h-8 w-8" />
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">
-                  {session?.user?.name}
+                  {session.user.name}
                </span>
-                <span className="truncate text-xs">{session?.user?.email}</span>
+                <span className="truncate text-xs">{session.user.email}</span>
              </div>
              <DotsThreeVerticalIcon size={28} />
            </SidebarMenuButton>
@@ -101,31 +106,38 @@ const NavUser = () => {
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <div className="flex gap-2 items-center">
                    <span className="truncate font-medium">
-                      {session?.user?.name}
+                      {session.user.name}
                    </span>
                    <RoleBadge
-                      type={session?.user?.role}
+                      type={session.user.role}
                      className="text-[10px] px-2 py-0 leading-0.5 h-4"
                    />
                  </div>
-                  <span className="truncate text-xs">
-                    {session?.user?.email}
-                  </span>
+                  <span className="truncate text-xs">{session.user.email}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem className="cursor-pointer" asChild>
-                <Link to="/profile">
+                <Link to="/account/profile">
                  <UserCircleIcon size={28} />
-                  {t('nav.account')}
+                  {m.nav_account()}
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem className="cursor-pointer" asChild>
-                <Link to="/change-password">
+                <Link to="/account/change-password">
                  <KeyIcon size={28} />
-                  {t('nav.change_password')}
+                  {m.nav_change_password()}
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="cursor-pointer" asChild>
+                <Link to="/account/settings">
+                  <UserCircleIcon size={28} />
+                  {m.nav_settings()}
                </Link>
              </DropdownMenuItem>
            </DropdownMenuGroup>
@@ -133,7 +145,7 @@ const NavUser = () => {
            <DropdownMenuGroup>
              <DropdownMenuItem onSelect={signout} className="cursor-pointer">
                <SignOutIcon size={28} />
-                {t('ui.logout_btn')}
+                {m.ui_logout_btn()}
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,10 +1,10 @@
-import * as React from "react"
-import { Slot } from "radix-ui"
+import { Slot } from 'radix-ui';
+import * as React from 'react';

-import { cn } from "@/lib/utils"
-import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react"
+import { cn } from '@/lib/utils';
+import { CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react';

-function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
  return (
    <nav
      aria-label="breadcrumb"
@@ -12,112 +12,108 @@ function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
      className={cn(className)}
      {...props}
    />
-  )
+  );
 }

-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
-        "text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words",
-        className
+        'text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center wrap-break-word',
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-item"
-      className={cn("gap-1 inline-flex items-center", className)}
+      className={cn('gap-1 inline-flex items-center', className)}
      {...props}
    />
-  )
+  );
 }

 function BreadcrumbLink({
  asChild,
  className,
  ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : "a"
+  const Comp = asChild ? Slot.Root : 'a';

  return (
    <Comp
      data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn('hover:text-foreground transition-colors', className)}
      {...props}
    />
-  )
+  );
 }

-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn('text-foreground font-normal', className)}
      {...props}
    />
-  )
+  );
 }

 function BreadcrumbSeparator({
  children,
  className,
  ...props
-}: React.ComponentProps<"li">) {
+}: React.ComponentProps<'li'>) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
+      className={cn('[&>svg]:size-3.5', className)}
      {...props}
    >
-      {children ?? (
-        <CaretRightIcon
-        />
-      )}
+      {children ?? <CaretRightIcon />}
    </li>
-  )
+  );
 }

 function BreadcrumbEllipsis({
  className,
  ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn(
-        "size-4 [&>svg]:size-3.5 flex items-center justify-center",
-        className
+        'size-4 [&>svg]:size-3.5 flex items-center justify-center',
+        className,
      )}
      {...props}
    >
-      <DotsThreeIcon
-      />
+      <DotsThreeIcon />
      <span className="sr-only">More</span>
    </span>
-  )
+  );
 }

 export {
  Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
+  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
+};
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -74,7 +74,7 @@ function DropdownMenuItem({
      data-inset={inset}
      data-variant={variant}
      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        className,
      )}
      {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        className,
      )}
      checked={checked}
@@ -131,7 +131,7 @@ function DropdownMenuRadioItem({
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        className,
      )}
      {...props}
@@ -161,7 +161,7 @@ function DropdownMenuLabel({
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
-        'text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8',
+        'text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-8',
        className,
      )}
      {...props}
@@ -217,7 +217,7 @@ function DropdownMenuSubTrigger({
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        className,
      )}
      {...props}
--- a/src/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -1,69 +1,77 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from 'class-variance-authority';
+import { useMemo } from 'react';

-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';

-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot="field-set"
-      className={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
+      className={cn(
+        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
+        className,
+      )}
      {...props}
    />
-  )
+  );
 }

 function FieldLegend({
  className,
-  variant = "legend",
+  variant = 'legend',
  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot="field-legend"
      data-variant={variant}
-      className={cn("mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm", className)}
+      className={cn(
+        'mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm',
+        className,
+      )}
      {...props}
    />
-  )
+  );
 }

-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-group"
      className={cn(
-        "gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
-        className
+        'gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
-  variants: {
-    orientation: {
-      vertical:
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-      horizontal:
-        "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      responsive:
-        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+const fieldVariants = cva(
+  'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+        horizontal:
+          'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        responsive:
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
    },
  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-})
+);

 function Field({
  className,
-  orientation = "vertical",
+  orientation = 'vertical',
  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
  return (
    <div
      role="group"
@@ -72,20 +80,20 @@ function Field({
      className={cn(fieldVariants({ orientation }), className)}
      {...props}
    />
-  )
+  );
 }

-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-content"
      className={cn(
-        "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
-        className
+        'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function FieldLabel({
@@ -96,55 +104,58 @@ function FieldLabel({
    <Label
      data-slot="field-label"
      className={cn(
-        "has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
-        className
+        'has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="field-label"
      className={cn(
-        "gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
-        className
+        'gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return (
    <p
      data-slot="field-description"
      className={cn(
-        "text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        'text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className,
      )}
      {...props}
    />
-  )
+  );
 }

 function FieldSeparator({
  children,
  className,
  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode;
 }) {
  return (
    <div
      data-slot="field-separator"
      data-content={!!children}
-      className={cn("-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+      className={cn(
+        '-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative',
+        className,
+      )}
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
@@ -157,7 +168,7 @@ function FieldSeparator({
        </span>
      )}
    </div>
-  )
+  );
 }

 function FieldError({
@@ -165,61 +176,61 @@ function FieldError({
  children,
  errors,
  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>;
 }) {
  const content = useMemo(() => {
    if (children) {
-      return children
+      return children;
    }

    if (!errors?.length) {
-      return null
+      return null;
    }

    const uniqueErrors = [
      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    ];

    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
    }

    return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {uniqueErrors.map(
          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+            error?.message && <li key={index}>{error.message}</li>,
        )}
      </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);

  if (!content) {
-    return null
+    return null;
  }

  return (
    <div
      role="alert"
      data-slot="field-error"
-      className={cn("text-destructive text-xs/relaxed font-normal", className)}
+      className={cn('text-destructive text-xs/relaxed font-normal', className)}
      {...props}
    >
      {content}
    </div>
-  )
+  );
 }

 export {
  Field,
-  FieldLabel,
+  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
+  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
-  FieldContent,
  FieldTitle,
-}
+};
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -288,7 +288,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full',
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -1,44 +0,0 @@
-import { createIsomorphicFn } from '@tanstack/react-start';
-import { getCookie } from '@tanstack/react-start/server';
-import i18n from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18next } from 'react-i18next';
-import enTranslations from '../locales/en.json';
-import viTranslations from '../locales/vi.json';
-
-export const resources = {
-  en: {
-    translation: enTranslations,
-  },
-  vi: {
-    translation: viTranslations,
-  },
-} as const;
-
-export const defaultNS = 'translation';
-
-const i18nCookieName = 'i18nextLng';
-
-i18n
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    resources,
-    defaultNS,
-    fallbackLng: 'vi',
-    supportedLngs: ['en', 'vi'],
-    detection: {
-      order: ['cookie'],
-      lookupCookie: i18nCookieName,
-      caches: ['cookie'],
-      cookieMinutes: 60 * 24 * 365,
-    },
-    interpolation: { escapeValue: false },
-  });
-
-export const setSSRLanguage = createIsomorphicFn().server(async () => {
-  const language = getCookie(i18nCookieName);
-  await i18n.changeLanguage(language || 'vi');
-});
-
-export default i18n;
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,273 +0,0 @@
-{
-  "common": {
-    "page_show": "{count, selectordinal, =1 {Hiện chỉ có # dữ liệu} other {Hiển thị {start} tới {end} của # dữ liệu}}",
-    "no_list": "Hiện tại chưa có dữ liệu nào!"
-  },
-  "roleTags": {
-    "admin": "Administrator",
-    "user": "User",
-    "member": "Member",
-    "owner": "Owner"
-  },
-  "ui": {
-    "login_btn": "Sign in",
-    "logout_btn": "Sign out",
-    "cancel_btn": "Cancel",
-    "close_btn": "Close",
-    "confirm_btn": "Confirm",
-    "view_btn": "View",
-    "signup_btn": "Sign up",
-    "save_btn": "Save",
-    "update_btn": "Update",
-    "view_all_notifications": "View All Notifications",
-    "label_notifications": "Notifications",
-    "change_password_btn": "Change password"
-  },
-  "nav": {
-    "home": "Home",
-    "dashboard": "Dashboard",
-    "settings": "Settings",
-    "add_new": "Add new",
-    "edit": "Edit",
-    "change_password": "Change password",
-    "log": "Audit log",
-    "roles": "Vai trò & quyền hạn",
-    "box": "Box",
-    "account": "Account",
-    "profile": "Profile"
-  },
-  "loginPage": {
-    "form": {
-      "email": "Email",
-      "password": "Password"
-    },
-    "ui": {
-      "welcome_back": "Welcome back",
-      "forgot_password": "Forgot your password?",
-      "not_have_account": "Don&apos;t have an account?"
-    },
-    "messages": {
-      "logout_success": "logout successfully!",
-      "login_success": "Sign in successfully!",
-      "is_required": "{{field}} is required.",
-      "email_invalid": "Email invalid!"
-    }
-  },
-  "signUpPage": {
-    "form": {},
-    "ui": {
-      "title": "Sign up",
-      "create_account": "Create account"
-    },
-    "messages": {}
-  },
-  "changePassword": {
-    "form": {
-      "current_password": "Current password",
-      "new_password": "New password",
-      "confirm_password": "Confirm password"
-    },
-    "ui": {
-      "title": "Change password"
-    },
-    "messages": {
-      "is_required": "{{field}} is required.",
-      "password_not_match": "Password not match",
-      "change_password_success": "Password changed successfully!"
-    }
-  },
-  "profile": {
-    "form": {
-      "name": "Name",
-      "email": "Email",
-      "role": "Role"
-    },
-    "ui": {
-      "title": "Profile"
-    },
-    "messages": {
-      "is_required": "{{field}} is required.",
-      "update_success": "Updated successfully!"
-    }
-  },
-  "settings": {
-    "form": {
-      "name": "Website name",
-      "description": "Description",
-      "keywords": "keywords",
-      "language": "Language"
-    },
-    "ui": {
-      "title": "Settings"
-    },
-    "messages": {
-      "is_required": "{{field}} is required.",
-      "update_success": "Updated successfully!",
-      "update_fail": "Update fail!"
-    }
-  },
-  "kanri": {
-    "settings": "Cài đặt",
-    "settings_desc": "Cài đặt hệ thống.",
-    "users": "Người dùng",
-    "users_desc": "Quản lý người dùng!",
-    "change_password": "Đổi mật khẩu",
-    "change_password_desc": "Thay đổi mật khẩu của bạn.",
-    "log": "Lịch sử",
-    "log_desc": "Ghi lại lịch sử hoạt động của người dùng.",
-    "access": "Truy cập",
-    "admin_panel": "Quản lý dữ liệu",
-    "roles": "Vai trò & quyền hạn",
-    "roles_desc": "Quản lý vai trò và quyền hạn",
-    "box": "Hộp chứa",
-    "box_desc": "Quản lý hộp chứa"
-  },
-  "users": {
-    "users": "Người dùng",
-    "add_new": "Thêm người dùng",
-    "edit_user": "Chỉnh sửa người dùng",
-    "change_password_user": "Đổi mật khẩu",
-    "search_user": "Tìm kiếm người dùng",
-    "form_role": "Vai trò",
-    "form_current_pass": "Mật khẩu hiện tại",
-    "form_password": "Mật khẩu",
-    "form_password_confirm": "Nhập lại mật khẩu",
-    "is_required": "{field} là bắt buộc.",
-    "email_invalid": "Email không đúng định dạng!",
-    "option_user": "Người dùng",
-    "option_admin": "Quản Lý",
-    "btn_add": "Thêm",
-    "btn_update": "Cập nhật",
-    "saving": "Đang lưu....",
-    "cancel": "Hủy",
-    "table_username": "Tên",
-    "table_email": "Email",
-    "table_banned": "Đã khóa?",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-    "tip_edit": "Chỉnh sửa",
-    "tip_change_pass": "Đổi mật khẩu",
-    "tip_ban": "Khóa người dùng",
-    "tip_unban": "Mở khóa Người dùng",
-    "banned": "Khóa",
-    "unbanned": "Mở Khóa",
-    "success_unbanned": "Mở khóa người dùng thành công!",
-    "success_banned": "Khóa người dùng thành công!",
-    "unban_failed": "Mở khóa người dùng không thành công",
-    "ban_failed": "Khóa người dùng không thành công",
-    "warning_message": "Bạn có muốn <important>{type}</important> người dùng tên <important>\"{name}\"</important> không?",
-    "added": "Đã thêm",
-    "added_success": "Thêm thành công!",
-    "add_fail": "Thêm thất bại!",
-    "password_not_match": "Mật khẩu không khớp",
-    "updated": "Đã cập nhật",
-    "update_success": "Cập nhật thành công!",
-    "update_fail": "Cập nhật thất bại!"
-  },
-  "audit": {
-    "title": "Lịch sử hoạt động",
-    "view_detail_title": "Xem chi tiết lịch sử",
-    "search_log": "Tìm kiếm lịch sử",
-    "table_user": "Người tác động",
-    "table_table": "Bảng",
-    "table_action": "Hành động",
-    "table_old_value": "Giá trị cũ",
-    "table_new_value": "Giá trị mới",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-    "tip_view": "Xem",
-    "enum_action": "{action, select, create {Thêm mới} update {Cập nhật} delete {Xóa} login {Đăng nhập} logout {Đăng xuất} ban {Khóa} unban {Mở khóa} other {chưa rõ}}"
-  },
-  "roles": {
-    "title": "Vai trò & quyền hạn",
-    "title_add_type": "Thêm {type}",
-    "title_edit_type": "Chỉnh sửa {type}",
-    "title_view_detail_type": "Xem chi tiết {type}",
-    "tab_roles": "Vai trò",
-    "tab_permissions": "Quyền hạn",
-    "role": "vai trò",
-    "permission": "quyền hạn",
-    "add_new_type": "Thêm mới {type}",
-    "search_keyword": "Tìm kiếm {keyword}...",
-    "table_name": "Tên",
-    "table_desc": "Mô Tả",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-    "tip_view": "Xem",
-    "tip_edit": "Sửa",
-    "tip_delete": "Xóa",
-    "label_page": "Trang",
-    "label_action": "Hành động",
-    "is_required": "{field} là bắt buộc.",
-    "form_name": "Tên",
-    "form_color": "Màu sắc",
-    "form_description": "Mô Tả",
-    "form_permissions": "Quyền hạn",
-    "form_select_all": "Chọn tất cả",
-    "btn_add": "Thêm",
-    "btn_update": "Cập nhật",
-    "saving": "Đang lưu....",
-    "cancel": "Hủy",
-    "place_name": "Nhâp tên {type}...",
-    "place_desc": "Nhập mô tả {type}...",
-    "delete_confirm_title": "Cảnh báo khi xóa vai trò",
-    "invalid_color_code": "Mã màu không hợp lệ!",
-    "warning_message": "Bạn có muốn <important>Xóa</important> {type} tên là <important>\"{name}\"</important> không?",
-    "added": "Đã thêm",
-    "added_success": "Thêm thành công!",
-    "add_fail": "Thêm thất bại!",
-    "updated": "Đã cập nhật",
-    "update_success": "Cập nhật thành công!",
-    "update_fail": "Cập nhật thất bại!",
-    "no_unique_type": "{type} phải là duy nhất.",
-    "deleted": "Xóa",
-    "success_deleted": "Xóa thành công!",
-    "deleted_failed": "Xóa thất bại!"
-  },
-  "box": {
-    "title": "Hộp chứa",
-    "title_add": "Thêm hộp chứa",
-    "title_edit": "Chỉnh sửa hộp chứa",
-    "title_view_detail": "Xem chi tiết hộp chứa",
-    "tab_info": "Thông tin",
-    "tab_permissions": "Quyền hạn",
-    "add_new": "Thêm mới hộp chứa",
-    "search_keyword": "Tìm kiếm hộp chứa...",
-
-    "table_name": "Tên",
-    "table_desc": "Mô Tả",
-    "table_count": "Đồ trong hộp",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-
-    "tip_view": "Xem",
-    "tip_edit": "Sửa",
-    "tip_delete": "Xóa",
-    "label_page": "Trang",
-    "label_action": "Hành động",
-
-    "label_detail_list": "Danh sách đồ trong hộp",
-    "label_detail_qrcode": "QR Code",
-    "label_detail_print": "In ra",
-
-    "is_required": "{field} là bắt buộc.",
-    "form_name": "Tên",
-    "form_color": "Màu sắc",
-    "form_description": "Mô Tả",
-    "form_permissions": "Quyền hạn",
-    "form_select_all": "Chọn tất cả",
-    "btn_add": "Thêm",
-    "btn_update": "Cập nhật",
-    "saving": "Đang lưu....",
-    "cancel": "Hủy",
-    "place_name": "Nhâp tên hộp chứa...",
-    "place_desc": "Nhập mô tả hộp chứa...",
-    "delete_confirm_title": "Cảnh báo khi xóa hộp chứa",
-    "invalid_color_code": "Mã màu không hợp lệ!",
-    "page_show": "{count, selectordinal, =1 {Hiện chỉ có # vai trò} other {Hiển thị {start} tới {end} của # hộp}}"
-  },
-  "backend": {
-    "INVALID_EMAIL_OR_PASSWORD": "Email or password incorrect!",
-    "INVALID_PASSWORD": "Password incorrect!"
-  }
-}
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -1,273 +0,0 @@
-{
-  "common": {
-    "page_show": "{count, selectordinal, =1 {Hiện chỉ có # dữ liệu} other {Hiển thị {start} tới {end} của # dữ liệu}}",
-    "no_list": "Hiện tại chưa có dữ liệu nào!"
-  },
-  "roleTags": {
-    "admin": "Quản lý",
-    "user": "Người dùng",
-    "member": "Thành viên",
-    "owner": "Người sở hữu"
-  },
-  "ui": {
-    "login_btn": "Đăng nhập",
-    "logout_btn": "Đăng xuất",
-    "cancel_btn": "Hủy",
-    "close_btn": "Đóng",
-    "confirm_btn": "Xác nhận",
-    "signup_btn": "Đăng ký",
-    "view_btn": "Xem",
-    "save_btn": "Lưu",
-    "update_btn": "Cập nhật",
-    "view_all_notifications": "Xem tất cả thông báo",
-    "label_notifications": "Thông báo",
-    "change_password_btn": "Đổi mật khẩu"
-  },
-  "nav": {
-    "home": "Trang chủ",
-    "dashboard": "Bảng điều khiển",
-    "settings": "Cài đặt",
-    "add_new": "Thêm mới",
-    "edit": "Chỉnh sửa",
-    "change_password": "Đổi mật khẩu",
-    "log": "Lịch sử",
-    "roles": "Vai trò & quyền hạn",
-    "box": "Hộp chứa",
-    "account": "Tài khoản",
-    "profile": "Hồ sơ"
-  },
-  "loginPage": {
-    "form": {
-      "email": "Email",
-      "password": "Mật khẩu"
-    },
-    "ui": {
-      "welcome_back": "Chào mừng trở lại",
-      "forgot_password": "Quên mật khẩu?",
-      "not_have_account": "Chưa có tài khoản!?"
-    },
-    "messages": {
-      "logout_success": "Đăng xuất thành công!",
-      "login_success": "Đăng nhập thành công!",
-      "is_required": "{{field}} là bắt buộc.",
-      "email_invalid": "Email không đúng định dạng!"
-    }
-  },
-  "signUpPage": {
-    "form": {},
-    "ui": {
-      "title": "Đăng ký",
-      "create_account": "Tạo tài khoản"
-    },
-    "messages": {}
-  },
-  "changePassword": {
-    "form": {
-      "current_password": "Mật khẩu hiện tại",
-      "new_password": "Mật khẩu mới",
-      "confirm_password": "Nhập lại mật khẩu mới"
-    },
-    "ui": {
-      "title": "Đổi mật khẩu"
-    },
-    "messages": {
-      "is_required": "{{field}} là bắt buộc.",
-      "password_not_match": "Mật khẩu không khớp",
-      "change_password_success": "Đổi mật khẩu thành công!"
-    }
-  },
-  "profile": {
-    "form": {
-      "name": "Tên",
-      "email": "Email",
-      "role": "Vai trò"
-    },
-    "ui": {
-      "title": "Hồ sơ"
-    },
-    "messages": {
-      "is_required": "{{field}} là bắt buộc.",
-      "update_success": "Cập nhật thành công!"
-    }
-  },
-  "settings": {
-    "form": {
-      "name": "Tên website",
-      "description": "Mô tả website",
-      "keywords": "Từ khóa",
-      "language": "Ngôn ngữ"
-    },
-    "ui": {
-      "title": "Cài đặt"
-    },
-    "messages": {
-      "is_required": "{{field}} là bắt buộc.",
-      "update_success": "Cập nhật thành công!",
-      "update_fail": "Cập nhật thất bại!"
-    }
-  },
-  "kanri": {
-    "settings": "Cài đặt",
-    "settings_desc": "Cài đặt hệ thống.",
-    "users": "Người dùng",
-    "users_desc": "Quản lý người dùng!",
-    "change_password": "Đổi mật khẩu",
-    "change_password_desc": "Thay đổi mật khẩu của bạn.",
-    "log": "Lịch sử",
-    "log_desc": "Ghi lại lịch sử hoạt động của người dùng.",
-    "access": "Truy cập",
-    "admin_panel": "Quản lý dữ liệu",
-    "roles": "Vai trò & quyền hạn",
-    "roles_desc": "Quản lý vai trò và quyền hạn",
-    "box": "Hộp chứa",
-    "box_desc": "Quản lý hộp chứa"
-  },
-  "users": {
-    "users": "Người dùng",
-    "add_new": "Thêm người dùng",
-    "edit_user": "Chỉnh sửa người dùng",
-    "change_password_user": "Đổi mật khẩu",
-    "search_user": "Tìm kiếm người dùng",
-    "form_role": "Vai trò",
-    "form_current_pass": "Mật khẩu hiện tại",
-    "form_password": "Mật khẩu",
-    "form_password_confirm": "Nhập lại mật khẩu",
-    "is_required": "{field} là bắt buộc.",
-    "email_invalid": "Email không đúng định dạng!",
-    "option_user": "Người dùng",
-    "option_admin": "Quản Lý",
-    "btn_add": "Thêm",
-    "btn_update": "Cập nhật",
-    "saving": "Đang lưu....",
-    "cancel": "Hủy",
-    "table_username": "Tên",
-    "table_email": "Email",
-    "table_banned": "Đã khóa?",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-    "tip_edit": "Chỉnh sửa",
-    "tip_change_pass": "Đổi mật khẩu",
-    "tip_ban": "Khóa người dùng",
-    "tip_unban": "Mở khóa Người dùng",
-    "banned": "Khóa",
-    "unbanned": "Mở Khóa",
-    "success_unbanned": "Mở khóa người dùng thành công!",
-    "success_banned": "Khóa người dùng thành công!",
-    "unban_failed": "Mở khóa người dùng không thành công",
-    "ban_failed": "Khóa người dùng không thành công",
-    "warning_message": "Bạn có muốn <important>{type}</important> người dùng tên <important>\"{name}\"</important> không?",
-    "added": "Đã thêm",
-    "added_success": "Thêm thành công!",
-    "add_fail": "Thêm thất bại!",
-    "password_not_match": "Mật khẩu không khớp",
-    "updated": "Đã cập nhật",
-    "update_success": "Cập nhật thành công!",
-    "update_fail": "Cập nhật thất bại!"
-  },
-  "audit": {
-    "title": "Lịch sử hoạt động",
-    "view_detail_title": "Xem chi tiết lịch sử",
-    "search_log": "Tìm kiếm lịch sử",
-    "table_user": "Người tác động",
-    "table_table": "Bảng",
-    "table_action": "Hành động",
-    "table_old_value": "Giá trị cũ",
-    "table_new_value": "Giá trị mới",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-    "tip_view": "Xem",
-    "enum_action": "{action, select, create {Thêm mới} update {Cập nhật} delete {Xóa} login {Đăng nhập} logout {Đăng xuất} ban {Khóa} unban {Mở khóa} other {chưa rõ}}"
-  },
-  "roles": {
-    "title": "Vai trò & quyền hạn",
-    "title_add_type": "Thêm {type}",
-    "title_edit_type": "Chỉnh sửa {type}",
-    "title_view_detail_type": "Xem chi tiết {type}",
-    "tab_roles": "Vai trò",
-    "tab_permissions": "Quyền hạn",
-    "role": "vai trò",
-    "permission": "quyền hạn",
-    "add_new_type": "Thêm mới {type}",
-    "search_keyword": "Tìm kiếm {keyword}...",
-    "table_name": "Tên",
-    "table_desc": "Mô Tả",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-    "tip_view": "Xem",
-    "tip_edit": "Sửa",
-    "tip_delete": "Xóa",
-    "label_page": "Trang",
-    "label_action": "Hành động",
-    "is_required": "{field} là bắt buộc.",
-    "form_name": "Tên",
-    "form_color": "Màu sắc",
-    "form_description": "Mô Tả",
-    "form_permissions": "Quyền hạn",
-    "form_select_all": "Chọn tất cả",
-    "btn_add": "Thêm",
-    "btn_update": "Cập nhật",
-    "saving": "Đang lưu....",
-    "cancel": "Hủy",
-    "place_name": "Nhâp tên {type}...",
-    "place_desc": "Nhập mô tả {type}...",
-    "delete_confirm_title": "Cảnh báo khi xóa vai trò",
-    "invalid_color_code": "Mã màu không hợp lệ!",
-    "warning_message": "Bạn có muốn <important>Xóa</important> {type} tên là <important>\"{name}\"</important> không?",
-    "added": "Đã thêm",
-    "added_success": "Thêm thành công!",
-    "add_fail": "Thêm thất bại!",
-    "updated": "Đã cập nhật",
-    "update_success": "Cập nhật thành công!",
-    "update_fail": "Cập nhật thất bại!",
-    "no_unique_type": "{type} phải là duy nhất.",
-    "deleted": "Xóa",
-    "success_deleted": "Xóa thành công!",
-    "deleted_failed": "Xóa thất bại!"
-  },
-  "box": {
-    "title": "Hộp chứa",
-    "title_add": "Thêm hộp chứa",
-    "title_edit": "Chỉnh sửa hộp chứa",
-    "title_view_detail": "Xem chi tiết hộp chứa",
-    "tab_info": "Thông tin",
-    "tab_permissions": "Quyền hạn",
-    "add_new": "Thêm mới hộp chứa",
-    "search_keyword": "Tìm kiếm hộp chứa...",
-
-    "table_name": "Tên",
-    "table_desc": "Mô Tả",
-    "table_count": "Đồ trong hộp",
-    "table_created_at": "Ngày tạo",
-    "table_actions": "Tương tác",
-
-    "tip_view": "Xem",
-    "tip_edit": "Sửa",
-    "tip_delete": "Xóa",
-    "label_page": "Trang",
-    "label_action": "Hành động",
-
-    "label_detail_list": "Danh sách đồ trong hộp",
-    "label_detail_qrcode": "QR Code",
-    "label_detail_print": "In ra",
-
-    "is_required": "{field} là bắt buộc.",
-    "form_name": "Tên",
-    "form_color": "Màu sắc",
-    "form_description": "Mô Tả",
-    "form_permissions": "Quyền hạn",
-    "form_select_all": "Chọn tất cả",
-    "btn_add": "Thêm",
-    "btn_update": "Cập nhật",
-    "saving": "Đang lưu....",
-    "cancel": "Hủy",
-    "place_name": "Nhâp tên hộp chứa...",
-    "place_desc": "Nhập mô tả hộp chứa...",
-    "delete_confirm_title": "Cảnh báo khi xóa hộp chứa",
-    "invalid_color_code": "Mã màu không hợp lệ!",
-    "page_show": "{count, selectordinal, =1 {Hiện chỉ có # vai trò} other {Hiển thị {start} tới {end} của # hộp}}"
-  },
-  "backend": {
-    "INVALID_EMAIL_OR_PASSWORD": "Email hoặc mật khẩu không đúng!",
-    "INVALID_PASSWORD": "Mật khẩu hiện tại không đúng!"
-  }
-}
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -16,9 +16,12 @@ import { Route as authSignInRouteImport } from './routes/(auth)/sign-in'
 import { Route as appauthRouteRouteImport } from './routes/(app)/(auth)/route'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth.$'
 import { Route as appauthSettingsRouteImport } from './routes/(app)/(auth)/settings'
-import { Route as appauthProfileRouteImport } from './routes/(app)/(auth)/profile'
 import { Route as appauthDashboardRouteImport } from './routes/(app)/(auth)/dashboard'
-import { Route as appauthChangePasswordRouteImport } from './routes/(app)/(auth)/change-password'
+import { Route as appauthAccountRouteRouteImport } from './routes/(app)/(auth)/account/route'
+import { Route as appauthAccountIndexRouteImport } from './routes/(app)/(auth)/account/index'
+import { Route as appauthAccountSettingsRouteImport } from './routes/(app)/(auth)/account/settings'
+import { Route as appauthAccountProfileRouteImport } from './routes/(app)/(auth)/account/profile'
+import { Route as appauthAccountChangePasswordRouteImport } from './routes/(app)/(auth)/account/change-password'

 const appRouteRoute = appRouteRouteImport.update({
  id: '/(app)',
@@ -53,41 +56,62 @@ const appauthSettingsRoute = appauthSettingsRouteImport.update({
  path: '/settings',
  getParentRoute: () => appauthRouteRoute,
 } as any)
-const appauthProfileRoute = appauthProfileRouteImport.update({
-  id: '/profile',
-  path: '/profile',
-  getParentRoute: () => appauthRouteRoute,
-} as any)
 const appauthDashboardRoute = appauthDashboardRouteImport.update({
  id: '/dashboard',
  path: '/dashboard',
  getParentRoute: () => appauthRouteRoute,
 } as any)
-const appauthChangePasswordRoute = appauthChangePasswordRouteImport.update({
-  id: '/change-password',
-  path: '/change-password',
+const appauthAccountRouteRoute = appauthAccountRouteRouteImport.update({
+  id: '/account',
+  path: '/account',
  getParentRoute: () => appauthRouteRoute,
 } as any)
+const appauthAccountIndexRoute = appauthAccountIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => appauthAccountRouteRoute,
+} as any)
+const appauthAccountSettingsRoute = appauthAccountSettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => appauthAccountRouteRoute,
+} as any)
+const appauthAccountProfileRoute = appauthAccountProfileRouteImport.update({
+  id: '/profile',
+  path: '/profile',
+  getParentRoute: () => appauthAccountRouteRoute,
+} as any)
+const appauthAccountChangePasswordRoute =
+  appauthAccountChangePasswordRouteImport.update({
+    id: '/change-password',
+    path: '/change-password',
+    getParentRoute: () => appauthAccountRouteRoute,
+  } as any)

 export interface FileRoutesByFullPath {
  '/sign-in': typeof authSignInRoute
  '/sign-up': typeof authSignUpRoute
  '/': typeof appIndexRoute
-  '/change-password': typeof appauthChangePasswordRoute
+  '/account': typeof appauthAccountRouteRouteWithChildren
  '/dashboard': typeof appauthDashboardRoute
-  '/profile': typeof appauthProfileRoute
  '/settings': typeof appauthSettingsRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
+  '/account/change-password': typeof appauthAccountChangePasswordRoute
+  '/account/profile': typeof appauthAccountProfileRoute
+  '/account/settings': typeof appauthAccountSettingsRoute
+  '/account/': typeof appauthAccountIndexRoute
 }
 export interface FileRoutesByTo {
  '/sign-in': typeof authSignInRoute
  '/sign-up': typeof authSignUpRoute
  '/': typeof appIndexRoute
-  '/change-password': typeof appauthChangePasswordRoute
  '/dashboard': typeof appauthDashboardRoute
-  '/profile': typeof appauthProfileRoute
  '/settings': typeof appauthSettingsRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
+  '/account/change-password': typeof appauthAccountChangePasswordRoute
+  '/account/profile': typeof appauthAccountProfileRoute
+  '/account/settings': typeof appauthAccountSettingsRoute
+  '/account': typeof appauthAccountIndexRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
@@ -96,11 +120,14 @@ export interface FileRoutesById {
  '/(auth)/sign-in': typeof authSignInRoute
  '/(auth)/sign-up': typeof authSignUpRoute
  '/(app)/': typeof appIndexRoute
-  '/(app)/(auth)/change-password': typeof appauthChangePasswordRoute
+  '/(app)/(auth)/account': typeof appauthAccountRouteRouteWithChildren
  '/(app)/(auth)/dashboard': typeof appauthDashboardRoute
-  '/(app)/(auth)/profile': typeof appauthProfileRoute
  '/(app)/(auth)/settings': typeof appauthSettingsRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
+  '/(app)/(auth)/account/change-password': typeof appauthAccountChangePasswordRoute
+  '/(app)/(auth)/account/profile': typeof appauthAccountProfileRoute
+  '/(app)/(auth)/account/settings': typeof appauthAccountSettingsRoute
+  '/(app)/(auth)/account/': typeof appauthAccountIndexRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
@@ -108,21 +135,26 @@ export interface FileRouteTypes {
    | '/sign-in'
    | '/sign-up'
    | '/'
-    | '/change-password'
+    | '/account'
    | '/dashboard'
-    | '/profile'
    | '/settings'
    | '/api/auth/$'
+    | '/account/change-password'
+    | '/account/profile'
+    | '/account/settings'
+    | '/account/'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/sign-in'
    | '/sign-up'
    | '/'
-    | '/change-password'
    | '/dashboard'
-    | '/profile'
    | '/settings'
    | '/api/auth/$'
+    | '/account/change-password'
+    | '/account/profile'
+    | '/account/settings'
+    | '/account'
  id:
    | '__root__'
    | '/(app)'
@@ -130,11 +162,14 @@ export interface FileRouteTypes {
    | '/(auth)/sign-in'
    | '/(auth)/sign-up'
    | '/(app)/'
-    | '/(app)/(auth)/change-password'
+    | '/(app)/(auth)/account'
    | '/(app)/(auth)/dashboard'
-    | '/(app)/(auth)/profile'
    | '/(app)/(auth)/settings'
    | '/api/auth/$'
+    | '/(app)/(auth)/account/change-password'
+    | '/(app)/(auth)/account/profile'
+    | '/(app)/(auth)/account/settings'
+    | '/(app)/(auth)/account/'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -195,13 +230,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof appauthSettingsRouteImport
      parentRoute: typeof appauthRouteRoute
    }
-    '/(app)/(auth)/profile': {
-      id: '/(app)/(auth)/profile'
-      path: '/profile'
-      fullPath: '/profile'
-      preLoaderRoute: typeof appauthProfileRouteImport
-      parentRoute: typeof appauthRouteRoute
-    }
    '/(app)/(auth)/dashboard': {
      id: '/(app)/(auth)/dashboard'
      path: '/dashboard'
@@ -209,27 +237,70 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof appauthDashboardRouteImport
      parentRoute: typeof appauthRouteRoute
    }
-    '/(app)/(auth)/change-password': {
-      id: '/(app)/(auth)/change-password'
-      path: '/change-password'
-      fullPath: '/change-password'
-      preLoaderRoute: typeof appauthChangePasswordRouteImport
+    '/(app)/(auth)/account': {
+      id: '/(app)/(auth)/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof appauthAccountRouteRouteImport
      parentRoute: typeof appauthRouteRoute
    }
+    '/(app)/(auth)/account/': {
+      id: '/(app)/(auth)/account/'
+      path: '/'
+      fullPath: '/account/'
+      preLoaderRoute: typeof appauthAccountIndexRouteImport
+      parentRoute: typeof appauthAccountRouteRoute
+    }
+    '/(app)/(auth)/account/settings': {
+      id: '/(app)/(auth)/account/settings'
+      path: '/settings'
+      fullPath: '/account/settings'
+      preLoaderRoute: typeof appauthAccountSettingsRouteImport
+      parentRoute: typeof appauthAccountRouteRoute
+    }
+    '/(app)/(auth)/account/profile': {
+      id: '/(app)/(auth)/account/profile'
+      path: '/profile'
+      fullPath: '/account/profile'
+      preLoaderRoute: typeof appauthAccountProfileRouteImport
+      parentRoute: typeof appauthAccountRouteRoute
+    }
+    '/(app)/(auth)/account/change-password': {
+      id: '/(app)/(auth)/account/change-password'
+      path: '/change-password'
+      fullPath: '/account/change-password'
+      preLoaderRoute: typeof appauthAccountChangePasswordRouteImport
+      parentRoute: typeof appauthAccountRouteRoute
+    }
  }
 }

+interface appauthAccountRouteRouteChildren {
+  appauthAccountChangePasswordRoute: typeof appauthAccountChangePasswordRoute
+  appauthAccountProfileRoute: typeof appauthAccountProfileRoute
+  appauthAccountSettingsRoute: typeof appauthAccountSettingsRoute
+  appauthAccountIndexRoute: typeof appauthAccountIndexRoute
+}
+
+const appauthAccountRouteRouteChildren: appauthAccountRouteRouteChildren = {
+  appauthAccountChangePasswordRoute: appauthAccountChangePasswordRoute,
+  appauthAccountProfileRoute: appauthAccountProfileRoute,
+  appauthAccountSettingsRoute: appauthAccountSettingsRoute,
+  appauthAccountIndexRoute: appauthAccountIndexRoute,
+}
+
+const appauthAccountRouteRouteWithChildren =
+  appauthAccountRouteRoute._addFileChildren(appauthAccountRouteRouteChildren)
+
 interface appauthRouteRouteChildren {
-  appauthChangePasswordRoute: typeof appauthChangePasswordRoute
+  appauthAccountRouteRoute: typeof appauthAccountRouteRouteWithChildren
  appauthDashboardRoute: typeof appauthDashboardRoute
-  appauthProfileRoute: typeof appauthProfileRoute
  appauthSettingsRoute: typeof appauthSettingsRoute
 }

 const appauthRouteRouteChildren: appauthRouteRouteChildren = {
-  appauthChangePasswordRoute: appauthChangePasswordRoute,
+  appauthAccountRouteRoute: appauthAccountRouteRouteWithChildren,
  appauthDashboardRoute: appauthDashboardRoute,
-  appauthProfileRoute: appauthProfileRoute,
  appauthSettingsRoute: appauthSettingsRoute,
 }

--- a/src/routes/(app)/(auth)/account/change-password.tsx
+++ b/src/routes/(app)/(auth)/account/change-password.tsx
@@ -1,16 +1,16 @@
 import ChangePasswordForm from '@/components/form/change-password-form';
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';

-export const Route = createFileRoute('/(app)/(auth)/change-password')({
+export const Route = createFileRoute('/(app)/(auth)/account/change-password')({
  component: RouteComponent,
-  staticData: { breadcrumb: i18n.t('nav.change_password') },
+  staticData: { breadcrumb: () => m.nav_change_password() },
 });

 function RouteComponent() {
  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
        <ChangePasswordForm />
      </div>
    </div>
--- a/src/routes/(app)/(auth)/account/index.tsx
+++ b/src/routes/(app)/(auth)/account/index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/account/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/(app)/(auth)/account/"!</div>;
+}
--- a/src/routes/(app)/(auth)/account/profile.tsx
+++ b/src/routes/(app)/(auth)/account/profile.tsx
@@ -1,16 +1,16 @@
 import ProfileForm from '@/components/form/profile-form';
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';

-export const Route = createFileRoute('/(app)/(auth)/profile')({
+export const Route = createFileRoute('/(app)/(auth)/account/profile')({
  component: RouteComponent,
-  staticData: { breadcrumb: i18n.t('nav.profile') },
+  staticData: { breadcrumb: () => m.nav_profile() },
 });

 function RouteComponent() {
  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
        <ProfileForm />
      </div>
    </div>
--- a/src/routes/(app)/(auth)/account/route.tsx
+++ b/src/routes/(app)/(auth)/account/route.tsx
@@ -0,0 +1,6 @@
+import { m } from '@/paraglide/messages';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/account')({
+  staticData: { breadcrumb: () => m.nav_account() },
+});
--- a/src/routes/(app)/(auth)/account/settings.tsx
+++ b/src/routes/(app)/(auth)/account/settings.tsx
@@ -0,0 +1,11 @@
+import { m } from '@/paraglide/messages';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/account/settings')({
+  component: RouteComponent,
+  staticData: { breadcrumb: () => m.nav_settings() },
+});
+
+function RouteComponent() {
+  return <div>Hello "account/settings"!</div>;
+}
--- a/src/routes/(app)/(auth)/dashboard.tsx
+++ b/src/routes/(app)/(auth)/dashboard.tsx
@@ -1,9 +1,11 @@
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';

 export const Route = createFileRoute('/(app)/(auth)/dashboard')({
  component: RouteComponent,
+  staticData: { breadcrumb: () => m.nav_dashboard() },
 });

 function RouteComponent() {
-  return <div>Hello "/(app)/dashboard"!</div>;
+  return <div>Hello "dashboard"!</div>;
 }
--- a/src/routes/(app)/(auth)/settings.tsx
+++ b/src/routes/(app)/(auth)/settings.tsx
@@ -1,16 +1,16 @@
 import SettingsForm from '@/components/form/settings-form';
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';

 export const Route = createFileRoute('/(app)/(auth)/settings')({
  component: RouteComponent,
-  staticData: { breadcrumb: i18n.t('nav.settings') },
+  staticData: { breadcrumb: () => m.nav_settings() },
 });

 function RouteComponent() {
  return (
    <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
        <SettingsForm />
      </div>
    </div>
--- a/src/routes/(app)/index.tsx
+++ b/src/routes/(app)/index.tsx
@@ -1,11 +1,11 @@
-import i18n from '@/lib/i18n'
-import { createFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages';
+import { createFileRoute } from '@tanstack/react-router';

 export const Route = createFileRoute('/(app)/')({
  component: App,
-  staticData: { breadcrumb: i18n.t('nav.home') },
-})
+  staticData: { breadcrumb: () => m.nav_home() },
+});

 function App() {
-  return <div className="min-h-screen bg-linear-to-b ">Home</div>
+  return <div className="min-h-screen bg-linear-to-b ">Home</div>;
 }
--- a/src/routes/(app)/route.tsx
+++ b/src/routes/(app)/route.tsx
@@ -1,3 +1,4 @@
+import { AuthProvider } from '@/components/auth/auth-provider';
 import Header from '@/components/Header';
 import AppSidebar from '@/components/sidebar/app-sidebar';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
@@ -9,12 +10,14 @@ export const Route = createFileRoute('/(app)')({

 function RouteComponent() {
  return (
-    <SidebarProvider defaultOpen={false}>
-      <AppSidebar />
-      <SidebarInset>
-        <Header />
-        <Outlet />
-      </SidebarInset>
-    </SidebarProvider>
+    <AuthProvider>
+      <SidebarProvider defaultOpen={false}>
+        <AppSidebar />
+        <SidebarInset>
+          <Header />
+          <Outlet />
+        </SidebarInset>
+      </SidebarProvider>
+    </AuthProvider>
  );
 }
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,6 +1,6 @@
 import NotFound from '@/components/NotFound';
 import { Toaster } from '@/components/ui/sonner';
-import { setSSRLanguage } from '@/lib/i18n';
+import { getLocale } from '@/paraglide/runtime';
 import { sessionQueries } from '@/service/queries';
 import {
  CheckIcon,
@@ -11,13 +11,12 @@ import {
 import { TanStackDevtools } from '@tanstack/react-devtools';
 import type { QueryClient } from '@tanstack/react-query';
 import {
+  createRootRouteWithContext,
  HeadContent,
  Scripts,
-  createRootRouteWithContext,
 } from '@tanstack/react-router';
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import TanStackQueryDevtools from '../integrations/tanstack-query/devtools';
 import appCss from '../styles.css?url';

@@ -30,7 +29,6 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
    const userSession = await context.queryClient.fetchQuery(
      sessionQueries.user(),
    );
-    await setSSRLanguage();
    return { userSession };
  },
  head: () => ({
@@ -61,29 +59,19 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
 });

 function RootDocument({ children }: { children: React.ReactNode }) {
-  const { i18n } = useTranslation();
-
  return (
-    <html lang={i18n.language}>
+    <html lang={getLocale()}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Toaster
-          richColors
+          // richColors
          visibleToasts={5}
          position={'top-right'}
          offset={{ top: 60, right: 10 }}
          closeButton={true}
-          toastOptions={{
-            classNames: {
-              success: '!bg-green-50',
-              error: '!bg-red-50',
-              info: '!bg-blue-50',
-              warning: '!bg-yellow-50',
-            },
-          }}
          icons={{
            success: <CheckIcon className="text-green-500" size={16} />,
            error: <WarningOctagonIcon className="text-red-500" size={16} />,
--- a/src/server.ts
+++ b/src/server.ts
@@ -0,0 +1,8 @@
+import handler from '@tanstack/react-start/server-entry';
+import { paraglideMiddleware } from './paraglide/server.js';
+
+export default {
+  fetch(req: Request): Promise<Response> {
+    return paraglideMiddleware(req.clone(), () => handler.fetch(req));
+  },
+};
--- a/src/service/profile.schema.ts
+++ b/src/service/profile.schema.ts
@@ -1,10 +1,10 @@
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import z from 'zod';

 export const profileUpdateSchema = z.object({
  name: z.string().nonempty(
-    i18n.t('profile.messages.is_required', {
-      field: i18n.t('profile.form.name'),
+    m.common_is_required({
+      field: m.profile_form_name('profile.form.name'),
    }),
  ),
  image: z.instanceof(File).optional(),
--- a/src/service/setting.api.ts
+++ b/src/service/setting.api.ts
@@ -1,7 +1,7 @@
 import { prisma } from '@/db';
 import { Setting } from '@/generated/prisma/client';
 import { authMiddleware } from '@/lib/middleware';
-import { createServerFn } from '@tanstack/react-start';
+import { createIsomorphicFn, createServerFn } from '@tanstack/react-start';
 import { settingSchema } from './setting.schema';
 // import { settingSchema } from './setting.schema';

@@ -9,10 +9,24 @@ export type SettingReturn = {
  [key: string]: Setting;
 };

+export const getLanguage = createIsomorphicFn().server(async () => {
+  const language = await prisma.setting.findUnique({
+    where: {
+      key: 'site_language',
+    },
+  });
+
+  return language?.value;
+});
+
 export const getSettings = createServerFn({ method: 'GET' })
  .middleware([authMiddleware])
  .handler(async () => {
-    const settings = await prisma.setting.findMany();
+    const settings = await prisma.setting.findMany({
+      where: {
+        relation: 'admin',
+      },
+    });

    const results: SettingReturn = {};

--- a/src/service/setting.schema.ts
+++ b/src/service/setting.schema.ts
@@ -1,25 +1,20 @@
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import z from 'zod';

 export const settingSchema = z.object({
  site_name: z.string().nonempty(
-    i18n.t('settings.messages.is_required', {
-      field: i18n.t('settings.form.name'),
+    m.common_is_required({
+      field: m.settings_form_name(),
    }),
  ),
  site_description: z.string().nonempty(
-    i18n.t('settings.messages.is_required', {
-      field: i18n.t('settings.form.description'),
+    m.common_is_required({
+      field: m.settings_form_description(),
    }),
  ),
  site_keywords: z.string().nonempty(
-    i18n.t('settings.messages.is_required', {
-      field: i18n.t('settings.form.keywords'),
-    }),
-  ),
-  site_language: z.string().nonempty(
-    i18n.t('settings.messages.is_required', {
-      field: i18n.t('settings.form.language'),
+    m.common_is_required({
+      field: m.settings_form_keywords(),
    }),
  ),
 });
--- a/src/type/i18next.d.ts
+++ b/src/type/i18next.d.ts
@@ -1,12 +0,0 @@
-import 'i18next'
-import translation from '../locales/vi.json'
-import { defaultNS } from './i18n'
-
-declare module 'i18next' {
-  interface CustomTypeOptions {
-    defaultNS: typeof defaultNS
-    resources: {
-      translation: typeof translation
-    }
-  }
-}