89 lines
3.8 KiB
TypeScript
89 lines
3.8 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
Separator,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { useFormContext } from "react-hook-form";
|
|
import { useTranslation } from "../i18n";
|
|
import { formatCurrency } from "../pages/create/utils";
|
|
|
|
export const CustomerInvoicePricesCard = () => {
|
|
const { t } = useTranslation();
|
|
const { register, formState, control, watch } = useFormContext();
|
|
|
|
/*const pricesWatch = useWatch({ control, name: ["subtotal_price", "discount", "tax"] });
|
|
|
|
const totals = calculateQuoteTotals(pricesWatch);
|
|
|
|
const subtotal_price = formatNumber(totals.subtotalPrice);
|
|
const discount_price = formatNumber(totals.discountPrice);
|
|
const tax_price = formatNumber(totals.taxesPrice);
|
|
const total_price = formatNumber(totals.totalPrice);*/
|
|
|
|
const currency_symbol = watch("currency");
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Impuestos y Totales</CardTitle>
|
|
<CardDescription>Configuración de impuestos y resumen de totales</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className='flex flex-row items-end gap-2 p-4'>
|
|
<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("form_fields.subtotal_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
|
|
{formatCurrency(watch("subtotal_price.amount"), 2, watch("currency"))}
|
|
</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("form_fields.discount.label")}</CardDescription>
|
|
</div>
|
|
<div className='grid gap-1 font-semibold text-muted-foreground'>
|
|
<CardDescription className='text-sm text-right'>
|
|
{t("form_fields.discount_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end text-2xl tabular-nums'>
|
|
{"-"} {formatCurrency(watch("discount_price.amount"), 2, watch("currency"))}
|
|
</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("form_fields.tax.label")}</CardDescription>
|
|
</div>
|
|
<div className='grid gap-1 font-semibold text-muted-foreground'>
|
|
<CardDescription className='text-sm text-right'>
|
|
{t("form_fields.tax_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end gap-1 text-2xl tabular-nums'>
|
|
{formatCurrency(watch("tax_price.amount"), 2, watch("currency"))}
|
|
</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("form_fields.total_price.label")}
|
|
</CardDescription>
|
|
<CardTitle className='flex items-baseline justify-end gap-1 text-3xl tabular-nums'>
|
|
{formatCurrency(watch("total_price.amount"), 2, watch("currency"))}
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|