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

import { ChevronLeft } from "lucide-react";

import { SubmitButton } from "@/components";
import { useGetIdentity } from "@/lib/hooks";
import { Badge, Button, Form, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui";
import { t } from "i18next";
import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import {
  QuoteDetailsCardEditor,
  QuoteDocumentsCardEditor,
  QuoteGeneralCardEditor,
} from "./components/editors";
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 QuoteEdit = ({ isOverModal }: QuoteCreateProps) => {
  const [loading, setLoading] = useState(false);

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

  const { useQuery, useMutation } = useQuotes();

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

  const form = useForm<QuoteDataForm>({
    mode: "onBlur",
    values: data,
    defaultValues: {
      date: "",
      reference: "",
      customer_information: "",
      lang_code: "",
      currency_code: "",
      payment_method: "",
      notes: "",
      validity: "",
      items: [],
    },
  });

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

    try {
      setLoading(true);
      data.currency_code = "EUR";
      data.lang_code = String(userIdentity?.language);

      mutate(data);
    } 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>
            <Badge variant='default' className='ml-auto sm:ml-0'>
              {t("quotes.status.draft")}
            </Badge>
            <div className='items-center hidden gap-2 md:ml-auto md:flex'>
              <Button variant='outline' size='sm'>
                {t("quotes.create.buttons.discard")}
              </Button>
              <SubmitButton variant={form.formState.isDirty ? "default" : "outline"} size='sm'>
                {t("quotes.create.buttons.save_quote")}
              </SubmitButton>
            </div>
          </div>
          <Tabs defaultValue='general' className='space-y-4'>
            <TabsList>
              <TabsTrigger value='general'>{t("quotes.create.tabs.general")}</TabsTrigger>
              <TabsTrigger value='items'>{t("quotes.create.tabs.items")}</TabsTrigger>
              <TabsTrigger value='documents'>{t("quotes.create.tabs.documents")}</TabsTrigger>
              <TabsTrigger value='history'>{t("quotes.create.tabs.history")}</TabsTrigger>
            </TabsList>
            <TabsContent value='general'>
              <QuoteGeneralCardEditor />
            </TabsContent>
            <TabsContent value='items'>
              <QuoteDetailsCardEditor />
            </TabsContent>

            <TabsContent value='documents'>
              <QuoteDocumentsCardEditor />
            </TabsContent>
            <TabsContent value='history'></TabsContent>
          </Tabs>
          <div className='flex items-center justify-center gap-2 md:hidden'>
            <Button variant='outline' size='sm'>
              {t("quotes.create.buttons.discard")}
            </Button>
            <Button size='sm'>{t("quotes.create.buttons.save_quote")}</Button>
          </div>
        </div>
      </form>
    </Form>
  );
};