Skip to content

feat(5957): redesign cost pages #5998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jul 7, 2025
Merged

feat(5957): redesign cost pages #5998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d82d622
feat(5957): redesign cost pages
golebu2020 Jul 7, 2025
00384f2
chore(5957): remove unnecessary comments
golebu2020 Jul 7, 2025
1c3ed0d
chore(5957): remove unused imports
golebu2020 Jul 7, 2025
bdccac0
chore(5957): use secured regex
golebu2020 Jul 7, 2025
3e62e3c
chore(5957): resolve sonarqube errors
golebu2020 Jul 7, 2025
e8d65ef
chore(5957): resolve data laoding problems
golebu2020 Jul 7, 2025
209bdf1
chore(5957): remove progress arrow and make background transparent
golebu2020 Jul 7, 2025
a39c1d6
chore(5957): remove unused imports and correct file name
golebu2020 Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 37 additions & 77 deletions app/app/private-cloud/products/(product)/[licencePlate]/costs/Monthly.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,56 @@
'use client';

import { Button, Tooltip } from '@mantine/core';
import { MonthPickerInput } from '@mantine/dates';
import { useQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Session } from 'next-auth';
import { useState } from 'react';
import DataTable from '@/components/generic/data-table/DataTable';
import LoadingBox from '@/components/generic/LoadingBox';
import MonthlyCostSummary from '@/components/private-cloud/monthly-cost/MonthlyCostSummary';
import MonthlyCostChart from '@/components/private-cloud/monthly-cost/MonthyCostChart';
import { dailyCostColumns, periodicCostColumns } from '@/constants/private-cloud';
import { downloadPrivateCloudMonthlyCosts, getMonthlyCosts } from '@/services/backend/private-cloud/products';
import { DailyCostMetric, PeriodicCostMetric } from '@/types/private-cloud';
import { getDateFromYyyyMmDd } from '@/utils/js';

export default function Monthly({ licencePlate, session }: { licencePlate: string; session: Session }) {
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const [downloading, setDownloading] = useState(false);

const { data, isLoading, isError } = useQuery({
import { useEffect } from 'react';
import MonthlyCostChart from '@/components/private-cloud/monthly-cost/MonthlyCostChart';
import { getMonthlyCosts } from '@/services/backend/private-cloud/products';
import { MonthlyCost } from '@/types/private-cloud';

export default function Monthly({
selectedDate,
licencePlate,
session,
onDataLoaded,
forecastEnabled,
onLoadingDone,
}: {
selectedDate: Date;
licencePlate: string;
session: Session;
onDataLoaded: (data: MonthlyCost) => void;
forecastEnabled: boolean;
onLoadingDone: (isLoading: boolean) => void;
}) {
const { data, isLoading } = useQuery({
queryKey: ['costItems', licencePlate, selectedDate ? format(selectedDate, 'yyyy-MM') : null],
queryFn: () => getMonthlyCosts(licencePlate, format(selectedDate!, 'yyyy-MM')),
enabled: !!licencePlate && !!selectedDate,
});

useEffect(() => {
onLoadingDone(isLoading);
}, [isLoading, onLoadingDone]);

useEffect(() => {
if (data) {
onDataLoaded(data);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

passing isLoading to onLoadingDone after data is present, at this point, isLoading will likely already be false - this can be possibly redundant

}
}, [data, onDataLoaded]);

if (!data || !session.previews.costRecovery) {
return null;
}

const handleChange = (date: string | null) => {
setSelectedDate(date ? getDateFromYyyyMmDd(date) : new Date());
};

const dailyCostData = data.days.map((day, idx) => {
const { cpuToDate, storageToDate, cpuToProjected, storageToProjected } = data.dayDetails;
const totalCost = cpuToDate[idx] + storageToDate[idx] + cpuToProjected[idx] + storageToProjected[idx];

return {
day,
dayDetails: {
cpuToDate: cpuToDate[idx],
storageToDate: storageToDate[idx],
cpuToProjected: cpuToProjected[idx],
storageToProjected: storageToProjected[idx],
totalCost,
},
};
});

return (
<div>
<div className="flex items-center gap-4 mb-6">
<Tooltip label="Select a month">
<MonthPickerInput
placeholder="Select a month"
value={selectedDate}
onChange={handleChange}
maw={200}
clearable
/>
</Tooltip>

{data.items.length > 0 && (
<div className="ml-auto">
<Button
loading={downloading}
onClick={async () => {
if (!data) return;
setDownloading(true);
await downloadPrivateCloudMonthlyCosts(licencePlate, format(selectedDate, 'yyyy-MM'));
setDownloading(false);
}}
>
Download PDF
</Button>
</div>
)}
</div>

<MonthlyCostSummary data={data} />

<>
{data.items.length > 0 && (
<div className="my-8">
<MonthlyCostChart data={{ days: data.days, dayDetails: data.dayDetails }} />
</div>
<MonthlyCostChart
data={{ days: data.days, dayDetails: data.dayDetails, billingPeriod: data.billingPeriod }}
isForecastEnabled={forecastEnabled}
/>
)}

<LoadingBox isLoading={isLoading}>
<DataTable<PeriodicCostMetric> data={data.items} columns={periodicCostColumns} defaultPageSize={5} />
<DataTable<DailyCostMetric> data={dailyCostData} columns={dailyCostColumns} defaultPageSize={5} />
</LoadingBox>
</div>
</>
);
}
114 changes: 38 additions & 76 deletions app/app/private-cloud/products/(product)/[licencePlate]/costs/Quarterly.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,56 @@
'use client';

import { Button, Tooltip } from '@mantine/core';
import { MonthPickerInput } from '@mantine/dates';
import { useQuery } from '@tanstack/react-query';
import { Session } from 'next-auth';
import { useState } from 'react';
import DataTable from '@/components/generic/data-table/DataTable';
import LoadingBox from '@/components/generic/LoadingBox';
import { useEffect } from 'react';
import QuarterlyCostChart from '@/components/private-cloud/quarterly-cost/QuarterlyCostChart';
import QuarterlyCostSummary from '@/components/private-cloud/quarterly-cost/QuarterlyCostSummary';
import { monthlyCostColumns, periodicCostColumns } from '@/constants/private-cloud';
import { downloadPrivateCloudQuarterlyCosts, getQuarterlyCosts } from '@/services/backend/private-cloud/products';
import { MonthlyCostMetric, PeriodicCostMetric } from '@/types/private-cloud';
import { formatAsYearQuarter, getDateFromYyyyMmDd } from '@/utils/js';

export default function Quarterly({ licencePlate, session }: { licencePlate: string; session: Session }) {
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const [downloading, setDownloading] = useState(false);

const { data, isLoading, isError } = useQuery({
import { getQuarterlyCosts } from '@/services/backend/private-cloud/products';
import { QuarterlyCost } from '@/types/private-cloud';
import { formatAsYearQuarter } from '@/utils/js';

export default function Quarterly({
selectedDate,
licencePlate,
session,
onDataLoaded,
forecastEnabled,
onLoadingDone,
}: {
selectedDate: Date;
licencePlate: string;
session: Session;
onDataLoaded: (data: QuarterlyCost) => void;
forecastEnabled: boolean;
onLoadingDone: (isLoading: boolean) => void;
}) {
const { data, isLoading } = useQuery({
queryKey: ['costItems', licencePlate, selectedDate ? formatAsYearQuarter(selectedDate) : null],
queryFn: () => getQuarterlyCosts(licencePlate, formatAsYearQuarter(selectedDate)),
enabled: !!licencePlate && !!selectedDate,
});

if (!data || !session?.previews.costRecovery) {
return null;
}

const handleChange = (date: string | null) => {
setSelectedDate(date ? getDateFromYyyyMmDd(date) : new Date());
};
useEffect(() => {
onLoadingDone(isLoading);
}, [isLoading, onLoadingDone]);

const monthlyCostData = data.months.map((month, idx) => {
const { cpuToDate, storageToDate, cpuToProjected, storageToProjected } = data.monthDetails;
const totalCost = cpuToDate[idx] + storageToDate[idx] + cpuToProjected[idx] + storageToProjected[idx];
useEffect(() => {
if (data) {
onDataLoaded(data);
}
}, [data, onDataLoaded]);

return {
month,
monthDetails: {
cpuToDate: cpuToDate[idx],
storageToDate: storageToDate[idx],
cpuToProjected: cpuToProjected[idx],
storageToProjected: storageToProjected[idx],
totalCost,
},
};
});
if (!data || !session.previews.costRecovery) {
return null;
}

return (
<div>
<div className="flex items-center gap-4 mb-6">
<Tooltip label="Select a month within the quarter">
<MonthPickerInput
placeholder="Select a month"
value={selectedDate}
onChange={handleChange}
maw={200}
clearable
/>
</Tooltip>
{data.items.length > 0 && (
<div className="ml-auto">
<Button
loading={downloading}
onClick={async () => {
if (!data) return;
setDownloading(true);
await downloadPrivateCloudQuarterlyCosts(licencePlate, formatAsYearQuarter(selectedDate));
setDownloading(false);
}}
>
Download PDF
</Button>
</div>
)}
</div>

<QuarterlyCostSummary data={data} />

<>
{data.items.length > 0 && (
<div className="my-8">
<QuarterlyCostChart data={{ months: data.months, monthDetails: data.monthDetails }} />
</div>
<QuarterlyCostChart
data={{ months: data.months, monthDetails: data.monthDetails, billingPeriod: data.billingPeriod }}
isForecastEnabled={forecastEnabled}
/>
)}

<LoadingBox isLoading={isLoading}>
<DataTable<PeriodicCostMetric> data={data.items} columns={periodicCostColumns} defaultPageSize={5} />
<DataTable<MonthlyCostMetric> data={monthlyCostData} columns={monthlyCostColumns} defaultPageSize={5} />
</LoadingBox>
</div>
</>
);
}
Loading
Loading