Skip to content

Commit 199e4cd

Browse files
golebu2020golebu2020
committed
chore(5795): update pdf downloader helpers
1 parent 3d9dc8e commit 199e4cd

File tree

7 files changed

+93
-96
lines changed

7 files changed

+93
-96
lines changed

‎app/components/private-cloud/CostSummary.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function CostSummary({
1111
data: MonthlyCost | YearlyCost | QuarterlyCost;
1212
selectedDate: Date;
1313
viewMode: TimeView;
14-
isFromPDFDownloader: boolean;
14+
isFromPDFDownloader?: boolean;
1515
}) {
1616
if (!data) return null;
1717

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

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ export default function MonthlyCostTable({ data }: { data: MonthlyCost }) {
1010
<thead>
1111
<tr className="bg-gray-100 dark:bg-gray-800">
1212
<th className="text-left p-2 border-b">Date Range</th>
13-
<th className="text-right p-2 border-b">CPU (cores)</th>
14-
<th className="text-right p-2 border-b">Storage (GiB)</th>
15-
<th className="text-right p-2 border-b">CPU Cost</th>
16-
<th className="text-right p-2 border-b">Storage Cost</th>
17-
<th className="text-right p-2 border-b">Total Cost</th>
13+
<th className="text-center p-2 border-b">CPU (cores)</th>
14+
<th className="text-center p-2 border-b">Storage (GiB)</th>
15+
<th className="text-center p-2 border-b">CPU Cost</th>
16+
<th className="text-center p-2 border-b">Storage Cost</th>
17+
<th className="text-center p-2 border-b">Total Cost</th>
1818
</tr>
1919
</thead>
2020
<tbody>
2121
{data.items.length > 0 ? (
2222
data.items.map((item, idx: number) => (
2323
<tr key={idx} className={idx % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}>
24-
<td className="p-2 border-b align-top">
24+
<td className="p-2 border-b text-left">
2525
{formatDate(item.startDate, 'yyyy-MM-dd HH:mm')} &ndash;{' '}
2626
{formatDate(item.endDate, 'yyyy-MM-dd HH:mm')}{' '}
2727
{item.isArchived && (
@@ -35,11 +35,11 @@ export default function MonthlyCostTable({ data }: { data: MonthlyCost }) {
3535
</span>
3636
)}
3737
</td>
38-
<td className="p-2 border-b text-right align-top">{item.total.cpu.value}</td>
39-
<td className="p-2 border-b text-right align-top">{item.total.storage.value}</td>
40-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.cpu.cost)}</td>
41-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.storage.cost)}</td>
42-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.subtotal.cost)}</td>
38+
<td className="p-2 border-b text-center">{item.total.cpu.value}</td>
39+
<td className="p-2 border-b text-center">{item.total.storage.value}</td>
40+
<td className="p-2 border-b text-center">{formatCurrency(item.total.cpu.cost)}</td>
41+
<td className="p-2 border-b text-center">{formatCurrency(item.total.storage.cost)}</td>
42+
<td className="p-2 border-b text-center">{formatCurrency(item.total.subtotal.cost)}</td>
4343
</tr>
4444
))
4545
) : (
@@ -54,46 +54,44 @@ export default function MonthlyCostTable({ data }: { data: MonthlyCost }) {
5454
<table className="w-full text-sm border-collapse mt-6">
5555
<thead>
5656
<tr className="bg-gray-100 dark:bg-gray-800">
57-
<th className="text-left p-2 border-b">Day</th>
58-
<th className="text-right p-2 border-b">CPU (Cores)</th>
59-
<th className="text-right p-2 border-b">CPU Cost</th>
60-
<th className="text-right p-2 border-b">Storage (GiB)</th>
61-
<th className="text-right p-2 border-b">Storage Cost</th>
62-
<th className="text-right p-2 border-b">Total Cost</th>
57+
<th className="text-center p-2 border-b">Day</th>
58+
<th className="text-center p-2 border-b">CPU (Cores)</th>
59+
<th className="text-center p-2 border-b">CPU Cost</th>
60+
<th className="text-center p-2 border-b">Storage (GiB)</th>
61+
<th className="text-center p-2 border-b">Storage Cost</th>
62+
<th className="text-center p-2 border-b">Total Cost</th>
6363
</tr>
6464
</thead>
6565
<tbody>
6666
{data.days.map((day, idx: number) => {
6767
const totalCost = data.dayDetails.cpuToDate[idx] + data.dayDetails.storageToDate[idx];
6868
return (
6969
<tr key={idx} className={idx % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}>
70-
<td className="p-2 border-b text-right align-top">{day}</td>
71-
<td className="p-2 border-b text-right align-top">
70+
<td className="p-2 border-b text-center">{day}</td>
71+
<td className="p-2 border-b text-center">
7272
{totalCost === 0 ? 'N/A' : data.discreteResourceValues[idx].cpu}
7373
</td>
74-
<td className="p-2 border-b text-right align-top">
74+
<td className="p-2 border-b text-center">
7575
{totalCost === 0 ? 'N/A' : formatCurrency(data.dayDetails.cpuToDate[idx])}
7676
</td>
77-
<td className="p-2 border-b text-right align-top">
77+
<td className="p-2 border-b text-center">
7878
{totalCost === 0 ? 'N/A' : data.discreteResourceValues[idx].storage}
7979
</td>
80-
<td className="p-2 border-b text-right align-top">
80+
<td className="p-2 border-b text-center">
8181
{totalCost === 0 ? 'N/A' : formatCurrency(data.dayDetails.storageToDate[idx])}
8282
</td>
83-
<td className="p-2 border-b text-right align-top">
84-
{totalCost === 0 ? 'N/A' : formatCurrency(totalCost)}
85-
</td>
83+
<td className="p-2 border-b text-center">{totalCost === 0 ? 'N/A' : formatCurrency(totalCost)}</td>
8684
</tr>
8785
);
8886
})}
8987
</tbody>
9088
<tfoot>
9189
<tr>
9290
<td colSpan={4} />
93-
<td colSpan={1} className="p-2 text-left">
91+
<td colSpan={1} className="p-2 border-b text-center">
9492
<strong>Current total cost for {data.billingPeriod}</strong>
9593
</td>
96-
<td colSpan={1} className="p-2 text-left">
94+
<td colSpan={1} className="p-2 border-b text-center">
9795
<strong>{formatCurrency(calculateTotalCost(getDailyCostData(data)))}</strong>
9896
</td>
9997
</tr>

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

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { calculateTotalCost, getMonthlyCostData } from '@/constants';
22
import { QuarterlyCost } from '@/types/private-cloud';
3-
import { formatDate } from '@/utils/js/date';
3+
import { formatDate, getMonthNameFromNumber } from '@/utils/js/date';
44
import { formatCurrency } from '@/utils/js/number';
55

66
export default function QuarterlyCostTable({ data }: { data: QuarterlyCost }) {
@@ -10,18 +10,18 @@ export default function QuarterlyCostTable({ data }: { data: QuarterlyCost }) {
1010
<thead>
1111
<tr className="bg-gray-100 dark:bg-gray-800">
1212
<th className="text-left p-2 border-b">Date Range</th>
13-
<th className="text-right p-2 border-b">CPU (cores)</th>
14-
<th className="text-right p-2 border-b">Storage (GiB)</th>
15-
<th className="text-right p-2 border-b">CPU Cost</th>
16-
<th className="text-right p-2 border-b">Storage Cost</th>
17-
<th className="text-right p-2 border-b">Total Cost</th>
13+
<th className="text-center p-2 border-b">CPU (cores)</th>
14+
<th className="text-center p-2 border-b">Storage (GiB)</th>
15+
<th className="text-center p-2 border-b">CPU Cost</th>
16+
<th className="text-center p-2 border-b">Storage Cost</th>
17+
<th className="text-center p-2 border-b">Total Cost</th>
1818
</tr>
1919
</thead>
2020
<tbody>
2121
{data.items.length > 0 ? (
2222
data.items.map((item, idx: number) => (
2323
<tr key={idx} className={idx % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}>
24-
<td className="p-2 border-b align-top">
24+
<td className="p-2 border-b text-left">
2525
{formatDate(item.startDate, 'yyyy-MM-dd HH:mm')} &ndash;{' '}
2626
{formatDate(item.endDate, 'yyyy-MM-dd HH:mm')}{' '}
2727
{item.isArchived && (
@@ -35,11 +35,11 @@ export default function QuarterlyCostTable({ data }: { data: QuarterlyCost }) {
3535
</span>
3636
)}
3737
</td>
38-
<td className="p-2 border-b text-right align-top">{item.total.cpu.value}</td>
39-
<td className="p-2 border-b text-right align-top">{item.total.storage.value}</td>
40-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.cpu.cost)}</td>
41-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.storage.cost)}</td>
42-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.subtotal.cost)}</td>
38+
<td className="p-2 border-b text-left">{item.total.cpu.value}</td>
39+
<td className="p-2 border-b text-center">{item.total.storage.value}</td>
40+
<td className="p-2 border-b text-center">{formatCurrency(item.total.cpu.cost)}</td>
41+
<td className="p-2 border-b text-center">{formatCurrency(item.total.storage.cost)}</td>
42+
<td className="p-2 border-b text-center">{formatCurrency(item.total.subtotal.cost)}</td>
4343
</tr>
4444
))
4545
) : (
@@ -54,46 +54,44 @@ export default function QuarterlyCostTable({ data }: { data: QuarterlyCost }) {
5454
<table className="w-full text-sm border-collapse mt-6">
5555
<thead>
5656
<tr className="bg-gray-100 dark:bg-gray-800">
57-
<th className="text-left p-2 border-b">Day</th>
58-
<th className="text-right p-2 border-b">CPU (Cores)</th>
59-
<th className="text-right p-2 border-b">CPU Cost</th>
60-
<th className="text-right p-2 border-b">Storage (GiB)</th>
61-
<th className="text-right p-2 border-b">Storage Cost</th>
62-
<th className="text-right p-2 border-b">Total Cost</th>
57+
<th className="text-center p-2 border-b">Month</th>
58+
<th className="text-center p-2 border-b">CPU (Cores)</th>
59+
<th className="text-center p-2 border-b">CPU Cost</th>
60+
<th className="text-center p-2 border-b">Storage (GiB)</th>
61+
<th className="text-center p-2 border-b">Storage Cost</th>
62+
<th className="text-center p-2 border-b">Total Cost</th>
6363
</tr>
6464
</thead>
6565
<tbody>
6666
{data.months.map((month, idx: number) => {
6767
const totalCost = data.monthDetails.cpuToDate[idx] + data.monthDetails.storageToDate[idx];
6868
return (
6969
<tr key={idx} className={idx % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}>
70-
<td className="p-2 border-b text-right align-top">{month}</td>
71-
<td className="p-2 border-b text-right align-top">
70+
<td className="p-2 border-b text-center">{getMonthNameFromNumber(month)}</td>
71+
<td className="p-2 border-b text-center">
7272
{totalCost === 0 ? 'N/A' : data.discreteResourceValues[month].cpu}
7373
</td>
74-
<td className="p-2 border-b text-right align-top">
74+
<td className="p-2 border-b text-center">
7575
{totalCost === 0 ? 'N/A' : formatCurrency(data.monthDetails.cpuToDate[idx])}
7676
</td>
77-
<td className="p-2 border-b text-right align-top">
77+
<td className="p-2 border-b text-center">
7878
{totalCost === 0 ? 'N/A' : data.discreteResourceValues[month].storage}
7979
</td>
80-
<td className="p-2 border-b text-right align-top">
80+
<td className="p-2 border-b text-center">
8181
{totalCost === 0 ? 'N/A' : formatCurrency(data.monthDetails.storageToDate[idx])}
8282
</td>
83-
<td className="p-2 border-b text-right align-top">
84-
{totalCost === 0 ? 'N/A' : formatCurrency(totalCost)}
85-
</td>
83+
<td className="p-2 border-b text-center">{totalCost === 0 ? 'N/A' : formatCurrency(totalCost)}</td>
8684
</tr>
8785
);
8886
})}
8987
</tbody>
9088
<tfoot>
9189
<tr>
9290
<td colSpan={4} />
93-
<td colSpan={1} className="p-2 text-left">
91+
<td colSpan={1} className="p-2 border-b text-center">
9492
<strong>Current total cost for {data.billingPeriod}</strong>
9593
</td>
96-
<td colSpan={1} className="p-2 text-left">
94+
<td colSpan={1} className="p-2 border-b text-center">
9795
<strong>{formatCurrency(calculateTotalCost(getMonthlyCostData(data)))}</strong>
9896
</td>
9997
</tr>

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

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { calculateTotalCost, getMonthlyCostData } from '@/constants';
22
import { YearlyCost } from '@/types/private-cloud';
3-
import { formatDate } from '@/utils/js/date';
3+
import { formatDate, getMonthNameFromNumber } from '@/utils/js/date';
44
import { formatCurrency } from '@/utils/js/number';
55

66
export default function YearlyCostTable({ data }: { data: YearlyCost }) {
@@ -10,18 +10,18 @@ export default function YearlyCostTable({ data }: { data: YearlyCost }) {
1010
<thead>
1111
<tr className="bg-gray-100 dark:bg-gray-800">
1212
<th className="text-left p-2 border-b">Date Range</th>
13-
<th className="text-right p-2 border-b">CPU (cores)</th>
14-
<th className="text-right p-2 border-b">Storage (GiB)</th>
15-
<th className="text-right p-2 border-b">CPU Cost</th>
16-
<th className="text-right p-2 border-b">Storage Cost</th>
17-
<th className="text-right p-2 border-b">Total Cost</th>
13+
<th className="text-center p-2 border-b">CPU (cores)</th>
14+
<th className="text-center p-2 border-b">Storage (GiB)</th>
15+
<th className="text-center p-2 border-b">CPU Cost</th>
16+
<th className="text-center p-2 border-b">Storage Cost</th>
17+
<th className="text-center p-2 border-b">Total Cost</th>
1818
</tr>
1919
</thead>
2020
<tbody>
2121
{data.items.length > 0 ? (
2222
data.items.map((item, idx: number) => (
2323
<tr key={idx} className={idx % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}>
24-
<td className="p-2 border-b align-top">
24+
<td className="p-2 border-b text-left">
2525
{formatDate(item.startDate, 'yyyy-MM-dd HH:mm')} &ndash;{' '}
2626
{formatDate(item.endDate, 'yyyy-MM-dd HH:mm')}{' '}
2727
{item.isArchived && (
@@ -35,11 +35,11 @@ export default function YearlyCostTable({ data }: { data: YearlyCost }) {
3535
</span>
3636
)}
3737
</td>
38-
<td className="p-2 border-b text-right align-top">{item.total.cpu.value}</td>
39-
<td className="p-2 border-b text-right align-top">{item.total.storage.value}</td>
40-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.cpu.cost)}</td>
41-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.storage.cost)}</td>
42-
<td className="p-2 border-b text-right align-top">{formatCurrency(item.total.subtotal.cost)}</td>
38+
<td className="p-2 border-b text-center">{item.total.cpu.value}</td>
39+
<td className="p-2 border-b text-center">{item.total.storage.value}</td>
40+
<td className="p-2 border-b text-center">{formatCurrency(item.total.cpu.cost)}</td>
41+
<td className="p-2 border-b text-center">{formatCurrency(item.total.storage.cost)}</td>
42+
<td className="p-2 border-b text-center">{formatCurrency(item.total.subtotal.cost)}</td>
4343
</tr>
4444
))
4545
) : (
@@ -54,46 +54,44 @@ export default function YearlyCostTable({ data }: { data: YearlyCost }) {
5454
<table className="w-full text-sm border-collapse mt-6">
5555
<thead>
5656
<tr className="bg-gray-100 dark:bg-gray-800">
57-
<th className="text-left p-2 border-b">Day</th>
58-
<th className="text-right p-2 border-b">CPU (Cores)</th>
59-
<th className="text-right p-2 border-b">CPU Cost</th>
60-
<th className="text-right p-2 border-b">Storage (GiB)</th>
61-
<th className="text-right p-2 border-b">Storage Cost</th>
62-
<th className="text-right p-2 border-b">Total Cost</th>
57+
<th className="text-center p-2 border-b">Month</th>
58+
<th className="text-center p-2 border-b">CPU (Cores)</th>
59+
<th className="text-center p-2 border-b">CPU Cost</th>
60+
<th className="text-center p-2 border-b">Storage (GiB)</th>
61+
<th className="text-center p-2 border-b">Storage Cost</th>
62+
<th className="text-center p-2 border-b">Total Cost</th>
6363
</tr>
6464
</thead>
6565
<tbody>
6666
{data.months.map((month, idx: number) => {
6767
const totalCost = data.monthDetails.cpuToDate[idx] + data.monthDetails.storageToDate[idx];
6868
return (
6969
<tr key={idx} className={idx % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800'}>
70-
<td className="p-2 border-b text-right align-top">{month}</td>
71-
<td className="p-2 border-b text-right align-top">
70+
<td className="p-2 border-b text-center">{getMonthNameFromNumber(month)}</td>
71+
<td className="p-2 border-b text-center">
7272
{totalCost === 0 ? 'N/A' : data.discreteResourceValues[month].cpu}
7373
</td>
74-
<td className="p-2 border-b text-right align-top">
74+
<td className="p-2 border-b text-center">
7575
{totalCost === 0 ? 'N/A' : formatCurrency(data.monthDetails.cpuToDate[idx])}
7676
</td>
77-
<td className="p-2 border-b text-right align-top">
77+
<td className="p-2 border-b text-center">
7878
{totalCost === 0 ? 'N/A' : data.discreteResourceValues[month].storage}
7979
</td>
80-
<td className="p-2 border-b text-right align-top">
80+
<td className="p-2 border-b text-center">
8181
{totalCost === 0 ? 'N/A' : formatCurrency(data.monthDetails.storageToDate[idx])}
8282
</td>
83-
<td className="p-2 border-b text-right align-top">
84-
{totalCost === 0 ? 'N/A' : formatCurrency(totalCost)}
85-
</td>
83+
<td className="p-2 border-b text-center">{totalCost === 0 ? 'N/A' : formatCurrency(totalCost)}</td>
8684
</tr>
8785
);
8886
})}
8987
</tbody>
9088
<tfoot>
9189
<tr>
9290
<td colSpan={4} />
93-
<td colSpan={1} className="p-2 text-left">
91+
<td colSpan={1} className="p-2 border-b text-center">
9492
<strong>Current total cost for {data.billingPeriod}</strong>
9593
</td>
96-
<td colSpan={1} className="p-2 text-left">
94+
<td colSpan={1} className="p-2 border-b text-center">
9795
<strong>{formatCurrency(calculateTotalCost(getMonthlyCostData(data)))}</strong>
9896
</td>
9997
</tr>

0 commit comments

Comments
 (0)