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

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

import { ChevronLeft } from "lucide-react";

import { SubmitButton } from "@/components";
import { Button, Form } from "@/ui";
import { SubmitHandler, useForm } from "react-hook-form";
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 { useMutation } = useQuotes();
  const { mutate } = useMutation;

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

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

    try {
      //setLoading(true);
      mutate(formData);
    } finally {
      //setLoading(false);
    }
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <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
              label={t("quotes.create.form_fields.reference.label")}
              description={t("quotes.create.form_fields.reference.desc")}
              disabled={form.formState.disabled}
              placeholder={t("quotes.create.form_fields.reference.placeholder")}
              {...form.register("reference", {
                required: false,
              })}
            />
            <FormDatePickerField
              required
              label={t("quotes.create.form_fields.date.label")}
              description={t("quotes.create.form_fields.date.desc")}
              disabled={form.formState.disabled}
              placeholder={t("quotes.create.form_fields.date.placeholder")}
              {...form.register("date", {
                required: true,
              })}
            />

            <div className='grid grid-cols-1 grid-rows-2 gap-6'>
              <FormTextAreaField
                className='row-span-2'
                required
                label={t("quotes.create.form_fields.customer_information.label")}
                description={t("quotes.create.form_fields.customer_information.desc")}
                disabled={form.formState.disabled}
                placeholder={t("quotes.create.form_fields.customer_information.placeholder")}
                {...form.register("customer_information", {
                  required: true,
                })}
                errors={form.formState.errors}
              />
            </div>
          </div>

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

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