From aabe3579ab3df53df1e865e73b2906a0bd11723e Mon Sep 17 00:00:00 2001
From: David Arranz <darranz@rodax-software.com>
Date: Thu, 18 Jul 2024 18:41:46 +0200
Subject: [PATCH] .

---
 .../quotes/components/QuotePricesResume.tsx   | 167 ++++++++++++++++++
 client/src/app/quotes/components/index.ts     |   1 +
 client/src/app/quotes/edit.tsx                |   2 +
 3 files changed, 170 insertions(+)
 create mode 100644 client/src/app/quotes/components/QuotePricesResume.tsx

diff --git a/client/src/app/quotes/components/QuotePricesResume.tsx b/client/src/app/quotes/components/QuotePricesResume.tsx
new file mode 100644
index 0000000..10f3942
--- /dev/null
+++ b/client/src/app/quotes/components/QuotePricesResume.tsx
@@ -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>
+  );
+};
diff --git a/client/src/app/quotes/components/index.ts b/client/src/app/quotes/components/index.ts
index ccded8d..8af5494 100644
--- a/client/src/app/quotes/components/index.ts
+++ b/client/src/app/quotes/components/index.ts
@@ -1 +1,2 @@
+export * from "./QuotePricesResume";
 export * from "./QuotesDataTable";
diff --git a/client/src/app/quotes/edit.tsx b/client/src/app/quotes/edit.tsx
index 491d758..1cbba9c 100644
--- a/client/src/app/quotes/edit.tsx
+++ b/client/src/app/quotes/edit.tsx
@@ -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>