chore(5795): seperate out function for pdf download

Author: golebu2020

app/app/private-cloud/products/(product)/[licencePlate]/costs/page.tsx

@@ -167,6 +167,18 @@ export default privateCloudProductCosts(({ getPathParams, session }) => {
     }
   };
 
+  async function handleDownloadCostPdf() {
+    if (!costData) return;
+    setDownloading(true);
+    const downloadPDF =
+      {
+        [TimeView.Monthly]: () => downloadPrivateCloudMonthlyCosts(licencePlate, format(selectedDate, 'yyyy-MM')),
+        [TimeView.Quarterly]: () => downloadPrivateCloudQuarterlyCosts(licencePlate, formatAsYearQuarter(selectedDate)),
+      }[viewMode] || (() => downloadPrivateCloudYearlyCosts(licencePlate, selectedDate.getFullYear().toString()));
+    await downloadPDF();
+    setDownloading(false);
+  }
+
   return (
     <div className="space-y-5">
       <Box pos="relative">
@@ -183,18 +195,7 @@ export default privateCloudProductCosts(({ getPathParams, session }) => {
               <Button
                 loading={downloading}
                 onClick={async () => {
-                  if (!costData) return;
-                  setDownloading(true);
-                  const downloadPDF =
-                    {
-                      [TimeView.Monthly]: () =>
-                        downloadPrivateCloudMonthlyCosts(licencePlate, format(selectedDate, 'yyyy-MM')),
-                      [TimeView.Quarterly]: () =>
-                        downloadPrivateCloudQuarterlyCosts(licencePlate, formatAsYearQuarter(selectedDate)),
-                    }[viewMode] ||
-                    (() => downloadPrivateCloudYearlyCosts(licencePlate, selectedDate.getFullYear().toString()));
-                  await downloadPDF();
-                  setDownloading(false);
+                  handleDownloadCostPdf();
                 }}
                 className="absolute right-0 top-[10px]"
               >

app/components/private-cloud/monthly-cost/MonthlyCostTable.tsx

@@ -4,6 +4,8 @@ import { formatDate } from '@/utils/js/date';
 import { formatCurrency } from '@/utils/js/number';
 
 export default function MonthlyCostTable({ data }: { data: MonthlyCost }) {
+  const dailyCost = getDailyCostData(data);
+  const currenTotalCost = calculateTotalCost(dailyCost);
   return (
     <>
       <table className="w-full text-sm border-collapse">
@@ -92,7 +94,7 @@ export default function MonthlyCostTable({ data }: { data: MonthlyCost }) {
               <strong>Current total cost for {data.billingPeriod}</strong>
             </td>
             <td colSpan={1} className="p-2 border-b text-center">
-              <strong>{formatCurrency(calculateTotalCost(getDailyCostData(data)))}</strong>
+              <strong>{formatCurrency(currenTotalCost)}</strong>
             </td>
           </tr>
         </tfoot>

app/components/private-cloud/quarterly-cost/QuarterlyCostTable.tsx

@@ -4,6 +4,8 @@ import { formatDate, getMonthNameFromNumber } from '@/utils/js/date';
 import { formatCurrency } from '@/utils/js/number';
 
 export default function QuarterlyCostTable({ data }: { data: QuarterlyCost }) {
+  const monthlyCost = getMonthlyCostData(data);
+  const currenTotalCost = calculateTotalCost(monthlyCost);
   return (
     <>
       <table className="w-full text-sm border-collapse">
@@ -92,7 +94,7 @@ export default function QuarterlyCostTable({ data }: { data: QuarterlyCost }) {
               <strong>Current total cost for {data.billingPeriod}</strong>
             </td>
             <td colSpan={1} className="p-2 border-b text-center">
-              <strong>{formatCurrency(calculateTotalCost(getMonthlyCostData(data)))}</strong>
+              <strong>{formatCurrency(currenTotalCost)}</strong>
             </td>
           </tr>
         </tfoot>

app/components/private-cloud/yearly-cost/YearlyCostTable.tsx

@@ -4,6 +4,8 @@ import { formatDate, getMonthNameFromNumber } from '@/utils/js/date';
 import { formatCurrency } from '@/utils/js/number';
 
 export default function YearlyCostTable({ data }: { data: YearlyCost }) {
+  const monthlyCost = getMonthlyCostData(data);
+  const currenTotalCost = calculateTotalCost(monthlyCost);
   return (
     <>
       <table className="w-full text-sm border-collapse">
@@ -92,7 +94,7 @@ export default function YearlyCostTable({ data }: { data: YearlyCost }) {
               <strong>Current total cost for {data.billingPeriod}</strong>
             </td>
             <td colSpan={1} className="p-2 border-b text-center">
-              <strong>{formatCurrency(calculateTotalCost(getMonthlyCostData(data)))}</strong>
+              <strong>{formatCurrency(currenTotalCost)}</strong>
             </td>
           </tr>
         </tfoot>