Added settings for user

src/components/form/settings-form.tsx

@@ -1,6 +1,6 @@
 import { m } from '@/paraglide/messages';
 import { settingQueries } from '@/service/queries';
-import { updateSettings } from '@/service/setting.api';
+import { updateAdminSettings } from '@/service/setting.api';
 import { settingSchema, SettingsInput } from '@/service/setting.schema';
 import { GearIcon } from '@phosphor-icons/react';
 import { useForm } from '@tanstack/react-form';
@@ -10,6 +10,7 @@ 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 { Skeleton } from '../ui/skeleton';
 import { Textarea } from '../ui/textarea';
 
 const defaultValues: SettingsInput = {
@@ -21,13 +22,15 @@ const defaultValues: SettingsInput = {
 const SettingsForm = () => {
   const queryClient = useQueryClient();
 
-  const { data: settings } = useQuery(settingQueries.list());
+  const { data: settings, isLoading } = useQuery(settingQueries.listAdmin());
 
   const updateMutation = useMutation({
-    mutationFn: updateSettings,
+    mutationFn: updateAdminSettings,
     onSuccess: () => {
       // setLocale(variables.data.site_language as Locale);
-      queryClient.invalidateQueries({ queryKey: settingQueries.all });
+      queryClient.invalidateQueries({
+        queryKey: [...settingQueries.all, 'list'],
+      });
       toast.success(m.settings_messages_update_success(), {
         richColors: true,
       });
@@ -50,6 +53,9 @@ const SettingsForm = () => {
     },
   });
 
+  if (isLoading)
+    return <Skeleton className="h-96.25 col-span-1 @xl/main:col-span-2" />;
+
   return (
     <Card className="@container/card col-span-1 @xl/main:col-span-2">
       <CardHeader>
@@ -145,37 +151,6 @@ const SettingsForm = () => {
                 );
               }}
             />
-            {/* <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}>
-                      {m.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">{m.ui_update_btn()}</Button>
             </Field>