Presupuestador_web/client/src/app/quotes/components/QuotePricesResume.tsx

import { FormPercentageField } from "@/components";
import { useLocalization } from "@/lib/hooks";
import { Card, CardContent, CardDescription, CardTitle, Separator } from "@/ui";
import { CurrencyData } from "@shared/contexts";
import { t } from "i18next";
import { useMemo } from "react";
import { useFormContext } from "react-hook-form";

export const QuotePricesResume = () => {
  const { watch, register, formState } = useFormContext();
  const { formatNumber } = useLocalization();

  const currency_code = watch("currency_code");
  const subtotal_price = formatNumber(watch("subtotal_price"));
  const discount_price = formatNumber(watch("discount_price"));
  const tax_price = formatNumber(watch("tax_price"));
  const total_price = formatNumber(watch("total_price"));

  const currency_symbol = useMemo(() => {
    const currencyOrError = CurrencyData.createFromCode(currency_code);
    return currencyOrError.isSuccess ? currencyOrError.object.symbol : "";
  }, [currency_code]);

  return (
    <Card className='w-full bg-muted'>
      <CardContent className='flex flex-row items-end gap-2 p-4 border-t'>
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-1 font-semibold text-right text-muted-foreground'>
            <CardDescription className='text-sm'>
              {t("quotes.form_fields.subtotal_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
              {subtotal_price}
              <span className='ml-1 text-lg tracking-normal'>{currency_symbol}</span>
            </CardTitle>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-2 gap-6 auto-rows-max'>
          <div className='grid gap-1 font-medium text-muted-foreground'>
            <CardDescription className='text-sm'>
              {t("quotes.form_fields.discount.label")}
            </CardDescription>
            <FormPercentageField
              scale={2}
              disabled={formState.disabled}
              placeholder={t("quotes.form_fields.discount.placeholder")}
              {...register("discount", {
                required: false,
              })}
            />
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm text-right'>
              {t("quotes.form_fields.discount_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
              {discount_price}
              <span className='ml-1 text-lg tracking-normal'>{currency_symbol}</span>
            </CardTitle>
          </div>
        </div>
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-2 gap-6 auto-rows-max'>
          <div className='grid gap-1 font-medium text-muted-foreground'>
            <CardDescription className='text-sm'>
              {t("quotes.form_fields.tax.label")}
            </CardDescription>

            <FormPercentageField
              scale={2}
              disabled={formState.disabled}
              placeholder={t("quotes.form_fields.tax.placeholder")}
              {...register("tax", {
                required: false,
              })}
            />
          </div>
          <div className='grid gap-1 font-semibold text-muted-foreground'>
            <CardDescription className='text-sm text-right'>
              {t("quotes.form_fields.tax_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end gap-1 text-2xl tabular-nums'>
              {tax_price}
              <span className='text-base font-medium tracking-normal'>{currency_symbol}</span>
            </CardTitle>
          </div>
        </div>{" "}
        <Separator orientation='vertical' className='w-px h-16 mx-2' />
        <div className='grid flex-1 h-16 grid-cols-1 auto-rows-max'>
          <div className='grid gap-0'>
            <CardDescription className='text-sm font-semibold text-right text-foreground'>
              {t("quotes.form_fields.total_price.label")}
            </CardDescription>
            <CardTitle className='flex items-baseline justify-end gap-1 text-3xl tabular-nums'>
              {total_price}
              <span className='ml-1 text-lg tracking-normal'>{currency_symbol}</span>
            </CardTitle>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};