.
This commit is contained in:
parent
9815757655
commit
aabe3579ab
167
client/src/app/quotes/components/QuotePricesResume.tsx
Normal file
167
client/src/app/quotes/components/QuotePricesResume.tsx
Normal file
@ -0,0 +1,167 @@
|
||||
import { DollarSign } from "lucide-react";
|
||||
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle, Separator } from "@/ui";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
export const QuotePricesResume = () => {
|
||||
const { getValues } = useFormContext();
|
||||
//const { formatNumber } = useLocalization({ locale: "es-ES" });
|
||||
|
||||
const subtotal_price = getValues("subtotal_price");
|
||||
const discount = getValues("discount");
|
||||
|
||||
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='items-baseline gap-1 text-3xl tabular-nums'>
|
||||
{subtotal_price.amount / 100}
|
||||
<span className='text-base 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-2xl tabular-nums'>
|
||||
{discount.amount / 100}
|
||||
<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 gap-1 text-3xl tabular-nums'>
|
||||
{subtotal_price.amount / 100}
|
||||
<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-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-2xl tabular-nums'>
|
||||
{discount.amount / 100}
|
||||
<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-3xl tabular-nums'>
|
||||
{subtotal_price.amount / 100}
|
||||
<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-4xl tabular-nums'>
|
||||
{subtotal_price.amount / 100}
|
||||
<span className='text-base font-medium 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>
|
||||
);
|
||||
};
|
||||
@ -1 +1,2 @@
|
||||
export * from "./QuotePricesResume";
|
||||
export * from "./QuotesDataTable";
|
||||
|
||||
@ -14,6 +14,7 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import { QuotePricesResume } from "./components";
|
||||
import { QuoteDetailsCardEditor, QuoteGeneralCardEditor } from "./components/editors";
|
||||
import { useQuotes } from "./hooks";
|
||||
|
||||
@ -251,6 +252,7 @@ export const QuoteEdit = () => {
|
||||
<TabsTrigger value='items'>{t("quotes.create.tabs.items")}</TabsTrigger>
|
||||
{/* <TabsTrigger value='history'>{t("quotes.create.tabs.history")}</TabsTrigger>*/}
|
||||
</TabsList>
|
||||
<QuotePricesResume />
|
||||
<TabsContent value='general' forceMount hidden={"general" !== activeTab}>
|
||||
<QuoteGeneralCardEditor />
|
||||
</TabsContent>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user