revisar pantalla de ajustes para que guarde los datos

client/src/app/settings/edit.tsx

@@ -15,10 +15,11 @@ import {
 
 import { t } from "i18next";
 import { AlertCircleIcon } from "lucide-react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Trans } from "react-i18next";
 
+import { cn } from "@/lib/utils";
 import { IUpdateProfile_Request_DTO } from "@shared/contexts";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -27,6 +28,7 @@ import { useSettings } from "./hooks";
 type SettingsDataForm = IUpdateProfile_Request_DTO;
 
 export const SettingsEditor = () => {
+  const [activeSection, setActiveSection] = useState("profile");
   const { useOne, useUpdate } = useSettings();
 
   const { data, status, error: queryError } = useOne();
@@ -61,7 +63,7 @@ export const SettingsEditor = () => {
     ),*/
   });
 
-  const { formState } = form;
+  const { formState, reset } = form;
   const { isSubmitting } = formState;
 
   const onSubmit: SubmitHandler<SettingsDataForm> = async (data) => {
@@ -74,6 +76,7 @@ export const SettingsEditor = () => {
       },
       //onSettled: () => {},
       onSuccess: () => {
+        reset({}, { keepValues: true, keepIsValid: true });
         toast("Ajustes guardados");
         //clear();
       },
@@ -114,17 +117,29 @@ export const SettingsEditor = () => {
             )}
 
             <nav className='grid gap-4 text-sm text-muted-foreground'>
-              <Link to='#' className='font-semibold text-primary'>
+              <Link
+                to='#'
+                onClick={() => setActiveSection("profile")}
+                className={activeSection === "profile" ? "font-semibold text-primary" : ""}
+              >
                 <Trans i18nKey='settings.edit.tabs.profile' />
               </Link>
-              <Link to='#'>
+              <Link
+                to='#'
+                onClick={() => setActiveSection("quotes")}
+                className={activeSection === "quotes" ? "font-semibold text-primary" : ""}
+              >
                 <Trans i18nKey='settings.edit.tabs.quotes' />
               </Link>
-              <Link to='#'>
+              <Link
+                to='#'
+                onClick={() => setActiveSection("legal")}
+                className={activeSection === "legal" ? "font-semibold text-primary" : ""}
+              >
                 <Trans i18nKey='settings.edit.tabs.legal' />
               </Link>
             </nav>
-            <div className='grid gap-6'>
+            <div className={cn("grid gap-6", activeSection === "profile" ? "visible" : "hidden")}>
               <Card>
                 <CardHeader>
                   <CardTitle>
@@ -136,6 +151,7 @@ export const SettingsEditor = () => {
                 </CardHeader>
                 <CardContent>
                   <FormTextAreaField
+                    autoSize
                     placeholder={t("settings.form_fields.contact_information.placeholder")}
                     {...form.register("contact_information", {
                       required: true,
@@ -149,7 +165,8 @@ export const SettingsEditor = () => {
                   </Button>
                 </CardFooter>
               </Card>
-
+            </div>
+            <div className={cn("grid gap-6", activeSection === "quotes" ? "visible" : "hidden")}>
               <Card>
                 <CardHeader>
                   <CardTitle>
@@ -161,6 +178,7 @@ export const SettingsEditor = () => {
                 </CardHeader>
                 <CardContent>
                   <FormTextAreaField
+                    autoSize
                     placeholder={t("settings.form_fields.default_payment_method.placeholder")}
                     {...form.register("default_payment_method", {
                       required: true,
@@ -174,7 +192,6 @@ export const SettingsEditor = () => {
                   </Button>
                 </CardFooter>
               </Card>
-
               <Card>
                 <CardHeader>
                   <CardTitle>
@@ -186,6 +203,7 @@ export const SettingsEditor = () => {
                 </CardHeader>
                 <CardContent>
                   <FormTextAreaField
+                    autoSize
                     placeholder={t("settings.form_fields.default_quote_validity.placeholder")}
                     {...form.register("default_quote_validity", {
                       required: true,
@@ -211,6 +229,7 @@ export const SettingsEditor = () => {
                 </CardHeader>
                 <CardContent>
                   <FormTextAreaField
+                    autoSize
                     placeholder={t("settings.form_fields.default_notes.placeholder")}
                     {...form.register("default_notes", {
                       required: true,
@@ -224,7 +243,8 @@ export const SettingsEditor = () => {
                   </Button>
                 </CardFooter>
               </Card>
-
+            </div>
+            <div className={cn("grid gap-6", activeSection === "legal" ? "visible" : "hidden")}>
               <Card>
                 <CardHeader>
                   <CardTitle>
@@ -236,6 +256,7 @@ export const SettingsEditor = () => {
                 </CardHeader>
                 <CardContent>
                   <FormTextAreaField
+                    autoSize
                     placeholder={t("settings.form_fields.default_legal_terms.placeholder")}
                     {...form.register("default_legal_terms", {
                       required: true,