170 lines
8.0 KiB
TypeScript
170 lines
8.0 KiB
TypeScript
import { DollarSign } from "lucide-react";
|
|
|
|
import { useLocalization } from "@/lib/hooks";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle, Separator } from "@/ui";
|
|
import { useFormContext } from "react-hook-form";
|
|
|
|
export const QuotePricesResume = () => {
|
|
const { watch } = useFormContext();
|
|
const { formatNumber, formatCurrency, formatPercentage } = useLocalization();
|
|
|
|
const subtotal_price = formatNumber(watch("subtotal_price"));
|
|
const discount = formatPercentage(watch("discount"));
|
|
const total_price = formatNumber(watch("total_price"));
|
|
|
|
return (
|
|
<Card className='w-full'>
|
|
<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-muted-foreground'>
|
|
<CardDescription className='text-sm'>Importe neto</CardDescription>
|
|
<CardTitle className='flex items-baseline text-2xl tabular-nums'>
|
|
{subtotal_price}
|
|
<span className='ml-1 text-lg tracking-normal'>€</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-2 auto-rows-max'>
|
|
<div className='grid gap-1 font-medium text-muted-foreground'>
|
|
<CardDescription className='text-sm'>Descuento</CardDescription>
|
|
<CardTitle className='flex items-baseline gap-1 text-xl tabular-nums'>
|
|
{discount}
|
|
<span className='text-base tracking-normal'>%</span>
|
|
</CardTitle>
|
|
</div>
|
|
<div className='grid gap-1 font-semibold text-muted-foreground'>
|
|
<CardDescription className='text-sm'>Imp. descuento</CardDescription>
|
|
<CardTitle className='flex items-baseline text-2xl tabular-nums'>
|
|
{subtotal_price}
|
|
<span className='ml-1 text-lg tracking-normal'>€</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-2 auto-rows-max'>
|
|
<div className='grid gap-1 font-medium text-muted-foreground'>
|
|
<CardDescription className='text-sm'>IVA</CardDescription>
|
|
<CardTitle className='flex items-baseline gap-1 text-xl tabular-nums'>
|
|
{discount}
|
|
<span className='text-base tracking-normal'>%</span>
|
|
</CardTitle>
|
|
</div>
|
|
<div className='grid gap-1 font-semibold text-muted-foreground'>
|
|
<CardDescription className='text-sm'>Importe IVA</CardDescription>
|
|
<CardTitle className='flex items-baseline gap-1 text-2xl tabular-nums'>
|
|
{subtotal_price}
|
|
<span className='text-base font-medium tracking-normal'>€</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'>Importe total</CardDescription>
|
|
<CardTitle className='flex items-baseline gap-1 text-3xl tabular-nums'>
|
|
{total_price}
|
|
<span className='ml-1 text-lg tracking-normal'>€</span>
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
return (
|
|
<Card className='w-full'>
|
|
<CardContent className='flex flex-row items-center w-full gap-2 p-4 border-t'>
|
|
<div className='flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1 border border-blue-600'>
|
|
<div>
|
|
<CardDescription>Descuento</CardDescription>
|
|
<CardTitle className='flex items-baseline gap-1 text-4xl tabular-nums'>
|
|
62
|
|
<span className='text-sm font-normal tracking-normal text-muted-foreground'>%</span>
|
|
</CardTitle>
|
|
</div>
|
|
<div>
|
|
<CardDescription>Importe dto.</CardDescription>
|
|
<CardTitle className='flex items-baseline gap-1 text-4xl tabular-nums'>
|
|
3.346
|
|
<span className='text-sm font-normal tracking-normal text-muted-foreground'>€</span>
|
|
</CardTitle>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex flex-row gap-3 items-center space-y-0 [&>div]:flex-1 border border-blue-600'>
|
|
<div className='grid flex-1 gap-3 bg-red-500 auto-rows-min'></div>
|
|
<div className='grid flex-1 gap-3 bg-red-500 auto-rows-min'>
|
|
<CardDescription className='font-medium text-right'>Importe neto</CardDescription>
|
|
<div className='flex items-baseline justify-end gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
|
|
{subtotal_price.amount}
|
|
<span className='text-sm font-normal tracking-normal text-muted-foreground'>
|
|
{subtotal_price.currency_code}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator orientation='vertical' className='w-px h-10 mx-2' />
|
|
|
|
<div className='flex flex-row gap-3 items-center space-y-0 [&>div]:flex-1 border border-blue-600'>
|
|
<div className='grid flex-1 gap-3 bg-red-500 auto-rows-min'>
|
|
<div className='text-sm font-medium text-left text-muted-foreground'>Descuento</div>
|
|
<div className='flex items-baseline justify-between gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
|
|
<div>
|
|
73
|
|
<span className='text-sm font-normal text-muted-foreground'>%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='grid flex-1 gap-3 bg-green-500 auto-rows-min'>
|
|
<div className='text-sm font-medium text-muted-foreground'>Descuento</div>
|
|
<div>
|
|
73
|
|
<span className='text-sm font-normal text-muted-foreground'>€</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator orientation='vertical' className='w-px h-10 mx-2' />
|
|
<div className='grid flex-1 gap-3 border border-blue-600 auto-rows-min'>
|
|
<div className='text-sm font-medium text-right text-muted-foreground'>Base imponible</div>
|
|
<div className='flex items-baseline justify-end gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
|
|
14
|
|
<span className='text-sm font-normal text-muted-foreground'>€</span>
|
|
</div>
|
|
</div>
|
|
<Separator orientation='vertical' className='w-px h-10 mx-2' />
|
|
<div className='grid flex-1 gap-3 auto-rows-min'>
|
|
<div className='text-sm font-medium text-muted-foreground'>IVA</div>
|
|
<div className='flex items-baseline justify-end gap-1 text-2xl font-semibold leading-none tabular-nums text-muted-foreground'>
|
|
14
|
|
<span className='text-sm font-normal text-muted-foreground'>€</span>
|
|
</div>
|
|
</div>
|
|
<Separator orientation='vertical' className='w-px h-10 mx-2' />
|
|
<div className='grid flex-1 gap-3 auto-rows-min'>
|
|
<div className='text-sm font-medium text-muted-foreground'>Importe total</div>
|
|
<div className='flex items-baseline justify-end gap-1 text-2xl font-bold leading-none tabular-nums'>
|
|
14
|
|
<span className='text-sm font-normal text-muted-foreground'>€</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className='flex flex-row items-center justify-between pb-2 space-y-0'>
|
|
<CardTitle className='text-sm font-medium'>Total Revenue</CardTitle>
|
|
<DollarSign className='w-4 h-4 text-muted-foreground' />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='text-2xl font-bold'>$45,231.89</div>
|
|
<p className='text-sm font-medium text-muted-foreground'>+20.1% from last month</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|