Presupuestador_web/client/src/app/settings/edit.tsx

import { FormTextAreaField } from "@/components";
import {
  Alert,
  AlertDescription,
  AlertTitle,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Form,
} from "@/ui";

import { t } from "i18next";
import { AlertCircleIcon } from "lucide-react";
import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { Trans } from "react-i18next";

import { Link } from "react-router-dom";
import { useSettings } from "./hooks";

type SettingsDataForm = {
  contact_information: string;
  default_payment_method: string;
  default_notes: string;
  default_legal_terms: string;
  default_quote_validity: string;
};

export const SettingsEditor = () => {
  const [loading, setLoading] = useState(false);

  const { useQuery, useMutation } = useSettings();

  const { data } = useQuery;
  const { mutate } = useMutation;

  const form = useForm<SettingsDataForm>({
    mode: "onBlur",
    values: data,
    defaultValues: {
      contact_information: "",
      default_payment_method: "",
      default_notes: "",
      default_legal_terms: "",
      default_quote_validity: "",
    },
    /*resolver: joiResolver(
      Joi.object({
        email: Joi.string()
          .email({ tlds: { allow: false } })
          .required(),
        password: Joi.string().min(4).alphanum().required(),
      }),
      {
        messages: SpanishJoiMessages,
      }
    ),*/
  });

  const onSubmit: SubmitHandler<SettingsDataForm> = async (data) => {
    try {
      setLoading(true);
      console.log(data);
      mutate(data);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div className='mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]'>
          {form.formState.errors.root?.message && (
            <Alert variant='destructive'>
              <AlertCircleIcon className='w-4 h-4' />
              <AlertTitle>
                <Trans i18nKey='common.error' />
              </AlertTitle>
              <AlertDescription>{form.formState.errors.root?.message}</AlertDescription>
            </Alert>
          )}

          <nav className='grid gap-4 text-sm text-muted-foreground'>
            <Link to='#' className='font-semibold text-primary'>
              <Trans i18nKey='settings.quotes.title' />
            </Link>
            <Link to='#'>
              <Trans i18nKey='settings.quotes.general' />
            </Link>
            <Link to='#'>Integrations</Link>
            <Link to='#'>Support</Link>
            <Link to='#'>Organizations</Link>
            <Link to='#'>Advanced</Link>
          </nav>
          <div className='grid gap-6'>
            <Card>
              <CardHeader>
                <CardTitle>
                  <Trans i18nKey='settings.quotes.contact_information.label' />
                </CardTitle>
                <CardDescription>
                  <Trans i18nKey='settings.quotes.contact_information.desc' />
                </CardDescription>
              </CardHeader>
              <CardContent>
                <FormTextAreaField
                  disabled={loading}
                  placeholder={t("settings.quotes.contact_information.placeholder")}
                  {...form.register("contact_information", {
                    required: true,
                  })}
                  errors={form.formState.errors}
                />
              </CardContent>
              <CardFooter className='px-6 py-4 border-t'>
                <Button>
                  <Trans i18nKey='common.save' />
                </Button>
              </CardFooter>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>
                  <Trans i18nKey='settings.quotes.default_payment_method.label' />
                </CardTitle>
                <CardDescription>
                  <Trans i18nKey='settings.quotes.default_payment_method.desc' />
                </CardDescription>
              </CardHeader>
              <CardContent>
                <FormTextAreaField
                  disabled={loading}
                  placeholder={t("settings.quotes.default_payment_method.placeholder")}
                  {...form.register("default_payment_method", {
                    required: true,
                  })}
                  errors={form.formState.errors}
                />
              </CardContent>
              <CardFooter className='px-6 py-4 border-t'>
                <Button>
                  <Trans i18nKey='common.save' />
                </Button>
              </CardFooter>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>
                  <Trans i18nKey='settings.quotes.default_quote_validity.label' />
                </CardTitle>
                <CardDescription>
                  <Trans i18nKey='settings.quotes.default_quote_validity.desc' />
                </CardDescription>
              </CardHeader>
              <CardContent>
                <FormTextAreaField
                  disabled={loading}
                  placeholder={t("settings.quotes.default_quote_validity.placeholder")}
                  {...form.register("default_quote_validity", {
                    required: true,
                  })}
                  errors={form.formState.errors}
                />
              </CardContent>
              <CardFooter className='px-6 py-4 border-t'>
                <Button>
                  <Trans i18nKey='common.save' />
                </Button>
              </CardFooter>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>
                  <Trans i18nKey='settings.quotes.default_notes.label' />
                </CardTitle>
                <CardDescription>
                  <Trans i18nKey='settings.quotes.default_notes.desc' />
                </CardDescription>
              </CardHeader>
              <CardContent>
                <FormTextAreaField
                  disabled={loading}
                  placeholder={t("settings.quotes.default_notes.placeholder")}
                  {...form.register("default_notes", {
                    required: true,
                  })}
                  errors={form.formState.errors}
                />
              </CardContent>
              <CardFooter className='px-6 py-4 border-t'>
                <Button>
                  <Trans i18nKey='common.save' />
                </Button>
              </CardFooter>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>
                  <Trans i18nKey='settings.quotes.default_legal_terms.label' />
                </CardTitle>
                <CardDescription>
                  <Trans i18nKey='settings.quotes.default_legal_terms.desc' />
                </CardDescription>
              </CardHeader>
              <CardContent>
                <FormTextAreaField
                  disabled={loading}
                  placeholder={t("settings.quotes.default_legal_terms.placeholder")}
                  {...form.register("default_legal_terms", {
                    required: true,
                  })}
                  errors={form.formState.errors}
                />
              </CardContent>
              <CardFooter className='px-6 py-4 border-t'>
                <Button>
                  <Trans i18nKey='common.save' />
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </form>
    </Form>
  );
};