Presupuestador_web/client/src/app/quotes/create.tsx

import {
  BackHistoryButton,
  FormDatePickerField,
  FormTextAreaField,
  FormTextField,
} from "@/components";
import { t } from "i18next";

import { ChevronLeft } from "lucide-react";

import { SubmitButton } from "@/components";
import { Button, Form } from "@/ui";
import { FieldErrors, SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { useQuotes } from "./hooks";

type QuoteDataForm = {
  id: string;
  status: string;
  date: string;
  reference: string;
  customer_information: string;
  lang_code: string;
  currency_code: string;
  payment_method: string;
  notes: string;
  validity: string;
  items: any[];
};

/*type QuoteCreateProps = {
  isOverModal?: boolean;
};*/

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

  //const { data: userIdentity } = useGetIdentity();
  //console.log(userIdentity);

  const navigate = useNavigate();
  const { useMutation } = useQuotes();
  const { mutate } = useMutation();

  const form = useForm<QuoteDataForm>({
    defaultValues: {
      date: new Date(Date.now()).toUTCString(),
      customer_information: "",
      reference: "",
    },
  });

  const onSubmit: SubmitHandler<QuoteDataForm> = async (formData) => {
    alert(JSON.stringify(formData));

    try {
      //setLoading(true);
      mutate(formData, {
        onSuccess: (data) => {
          navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true });
        },
      });
    } finally {
      //setLoading(false);
    }
  };

  const onErrors: SubmitErrorHandler<QuoteDataForm> = async (
    errors: FieldErrors<QuoteDataForm>
  ) => {
    console.log(errors);
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit, onErrors)}>
        <div className='mx-auto grid max-w-[90rem] flex-1 auto-rows-max gap-6'>
          <div className='flex items-center gap-4'>
            <Button variant='outline' size='icon' className='h-7 w-7'>
              <ChevronLeft className='w-4 h-4' />
              <span className='sr-only'>{t("quotes.common.back")}</span>
            </Button>
            <h1 className='flex-1 text-xl font-semibold tracking-tight shrink-0 whitespace-nowrap sm:grow-0'>
              {t("quotes.create.title")}
            </h1>
          </div>

          <div className='grid max-w-lg gap-6'>
            <FormTextField
              className='row-span-2'
              name='reference'
              required
              label={t("quotes.create.form_fields.reference.label")}
              description={t("quotes.create.form_fields.reference.desc")}
              placeholder={t("quotes.create.form_fields.reference.placeholder")}
            />

            <FormDatePickerField
              required
              label={t("quotes.create.form_fields.date.label")}
              description={t("quotes.create.form_fields.date.desc")}
              placeholder={t("quotes.create.form_fields.date.placeholder")}
              name='date'
            />

            <FormTextAreaField
              rows={4}
              className='row-span-2'
              name='customer_information'
              required
              label={t("quotes.create.form_fields.customer_information.label")}
              description={t("quotes.create.form_fields.customer_information.desc")}
              placeholder={t("quotes.create.form_fields.customer_information.placeholder")}
            />
          </div>

          <div className='flex items-center justify-start gap-2'>
            <BackHistoryButton size='sm' label={t("quotes.create.buttons.discard")} url='/quotes' />

            <SubmitButton size='sm' label={t("common.continue")}></SubmitButton>
          </div>
        </div>
      </form>
    </Form>
  );
};