- added settings page and function

- add Role Ring for avatar and display role for user nav

src/components/form/profile-form.tsx

@@ -1,32 +1,20 @@
-import { authClient } from '@/lib/auth-client';
-import i18n from '@/lib/i18n';
-import { uploadProfileImage } from '@/server/profile-service';
+import { authClient, useSession } from '@/lib/auth-client';
+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 { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import z from 'zod';
-import { useAuth } from '../auth/auth-provider';
-import AvatarUser from '../AvatarUser';
+import AvatarUser from '../avatar/AvatarUser';
+import RoleBadge from '../avatar/RoleBadge';
 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 profileSchema = z.object({
-  name: z.string().nonempty(
-    i18n.t('profile.messages.is_required', {
-      field: i18n.t('profile.form.name'),
-    }),
-  ),
-  image: z.instanceof(File).optional(),
-});
-
-type Profile = z.infer<typeof profileSchema>;
-
-const defaultValues: Profile = {
+const defaultValues: ProfileInput = {
   name: '',
   image: undefined,
 };
@@ -34,7 +22,7 @@ const defaultValues: Profile = {
 const ProfileForm = () => {
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { data: session, isLoading } = useAuth();
+  const { data: session, isPending } = useSession();
   const queryClient = useQueryClient();
 
   const form = useForm({
@@ -43,8 +31,8 @@ const ProfileForm = () => {
       name: session?.user?.name || '',
     },
     validators: {
-      onSubmit: profileSchema,
-      onChange: profileSchema,
+      onSubmit: profileUpdateSchema,
+      onChange: profileUpdateSchema,
     },
     onSubmit: async ({ value }) => {
       try {
@@ -70,7 +58,9 @@ const ProfileForm = () => {
               if (fileInputRef.current) {
                 fileInputRef.current.value = '';
               }
-              queryClient.invalidateQueries({ queryKey: ['session'] });
+              queryClient.refetchQueries({
+                queryKey: ['auth', 'session'],
+              });
               toast.success(t('profile.messages.update_success'));
             },
             onError: (ctx) => {
@@ -82,11 +72,11 @@ const ProfileForm = () => {
     },
   });
 
-  if (isLoading) return null;
+  if (isPending) return null;
   if (!session?.user?.name) return null;
 
   return (
-    <Card className="@container/card col-span-1 @xl/main:col-span-2">
+    <Card className="@container/card col-span-1">
       <CardHeader>
         <CardTitle className="text-xl flex items-center gap-2">
           <UserCircleIcon size={20} />
@@ -104,11 +94,7 @@ const ProfileForm = () => {
         >
           <FieldGroup>
             <div className="grid grid-cols-3 gap-3">
-              <AvatarUser
-                session={session}
-                className="h-20 w-20"
-                textSize="2xl"
-              />
+              <AvatarUser className="h-20 w-20" textSize="2xl" />
               <form.Field
                 name="image"
                 children={(field) => {
@@ -173,13 +159,9 @@ const ProfileForm = () => {
             </Field>
             <Field>
               <FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
-              <Input
-                id="email"
-                name="email"
-                value={session?.user?.role || ''}
-                disabled
-                className="disabled:opacity-80"
-              />
+              <div className="flex gap-2">
+                <RoleBadge type={session?.user?.role} />
+              </div>
             </Field>
             <Field>
               <Button type="submit">{t('ui.update_btn')}</Button>

src/components/form/settings-form.tsx

@@ -0,0 +1,196 @@
+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());
+
+  const updateMutation = useMutation({
+    mutationFn: updateSettings,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: settingQueries.all });
+      toast.success(t('settings.messages.update_success'));
+    },
+  });
+
+  const form = useForm({
+    defaultValues: {
+      ...defaultValues,
+      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,
+      onChange: settingSchema,
+    },
+    onSubmit: async ({ value }) => {
+      updateMutation.mutate({ data: value as SettingsInput });
+    },
+  });
+
+  return (
+    <Card className="@container/card col-span-1 @xl/main:col-span-2">
+      <CardHeader>
+        <CardTitle className="text-xl flex items-center gap-2">
+          <GearIcon size={20} />
+          {t('settings.ui.title')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form
+          id="settings-form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            <form.Field
+              name="site_name"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid} className="col-span-2">
+                    <FieldLabel htmlFor={field.name}>
+                      {t('settings.form.name')}
+                    </FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="site_description"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid} className="col-span-2">
+                    <FieldLabel htmlFor={field.name}>
+                      {t('settings.form.description')}
+                    </FieldLabel>
+                    <Textarea
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      rows={4}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="site_keywords"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid} className="col-span-2">
+                    <FieldLabel htmlFor={field.name}>
+                      {t('settings.form.keywords')}
+                    </FieldLabel>
+                    <Textarea
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      rows={4}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="site_language"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid} className="col-span-2">
+                    <FieldLabel htmlFor={field.name}>
+                      {t('settings.form.language')}
+                    </FieldLabel>
+                    <Select
+                      name={field.name}
+                      value={field.state.value}
+                      onValueChange={(value) => field.handleChange(value)}
+                      aria-invalid={isInvalid}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="en">English</SelectItem>
+                        <SelectItem value="vi">Vietnamese</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <Field>
+              <Button type="submit">{t('ui.update_btn')}</Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SettingsForm;

src/components/form/signin-form.tsx

@@ -51,7 +51,7 @@ const SignInForm = () => {
         {
           onSuccess: () => {
             navigate({ to: '/' })
-            queryClient.invalidateQueries({ queryKey: ['session'] })
+            queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
             toast.success(t('loginPage.messages.login_success'))
           },
           onError: (ctx) => {